How to Use Figma: A Step-by-Step Tutorial for Beginners
Key Takeaways
- Figma is free for up to 3 projects and works entirely in your browser—no downloads needed.
- Start with wireframes using basic shapes, then add interactivity with Prototype mode.
- Components and variants let you build reusable design elements, saving hours of repetitive work.
- The Auto Layout feature automatically adjusts spacing when you resize elements—crucial for responsive design.
How to Use Figma: From Wireframes to Prototypes and Design Systems
I’ve taught Figma to dozens of junior designers over the years, and the biggest mistake I see is jumping straight into high-fidelity mockups. You need to walk before you run. Let me show you the workflow that actually works, starting with the basics.
Step 1: Set Up Your First Project
When you open Figma for the first time, you’ll see a blank canvas. Click New File. Name it something like "Portfolio Redesign" so you can find it later. The interface has three main areas:
- Toolbar (top): Shapes, text, and drawing tools.
- Layers panel (left): Every element you add appears here.
- Properties panel (right): Adjust size, color, and spacing.
Pro tip: Use the Frame tool (F key) instead of the regular Artboard. Frames behave like containers—they clip content and support Auto Layout, which regular rectangles don’t.
Step 2: Wireframing with Basic Shapes
Wireframes are the skeleton of your design. No colors, no fonts—just boxes and lines.
1. Select the Rectangle tool (R key).
2. Draw a rectangle that’s 375x812 pixels—that’s an iPhone 14 frame size. Figma shows the dimensions in the top toolbar while you drag.
3. Add smaller rectangles for navigation bars, buttons, and images. Use T for text placeholders like "Logo" or "Headline."
4. Group related elements: Select them, then press Ctrl+G (Cmd+G on Mac).
Real numbers: I usually spend 30 minutes on wireframes for a simple app screen. It’s faster than jumping straight to polished designs and having to redo everything when the layout doesn’t work.
Step 3: Add Interactivity in Prototype Mode
Once your wireframe looks right, switch to the Prototype tab (top right). This is where you connect screens.
1. Click on a button in your first frame.
2. Drag the blue circle that appears to your second frame.
3. In the properties panel, set the interaction to "On Click" with a "Navigate to" action. Animation speed: 300ms feels natural.
4. Hit the Play button (top right) to test your prototype in a new tab.
Comparison: Wireframes vs. Prototypes
| Aspect | Wireframes | Prototypes |
| -------- | ------------ | ------------ |
| Purpose | Layout and structure | User flow and interactions |
| Detail | Grayscale, placeholder text | Colors, icons, real content |
| Tools used | Shapes, lines, text frames | Connections, triggers, animations |
| Time investment | 20-40 minutes per screen | 1-2 hours per flow |
Step 4: Build a Simple Design System
Design systems save you from manually updating every button color when the client changes their mind. Here’s how to start small.
Create color styles:
1. Select a shape with your primary color (e.g., #1A73E8, Google blue).
2. Click the four-dot icon next to the fill color in the properties panel.
3. Choose "Create style" and name it "Primary Blue."
Create component variants:
1. Design a button (rectangle + text).
2. Select it and press Ctrl+Alt+K (Cmd+Option+K) to make it a component.
3. In the right panel, add a property like "State: Default, Hover, Pressed."
4. Design each variant by clicking the + icon in the component set.
Now you can drag any variant into your design, and updating the master component changes all instances. I’ve seen teams reduce button update time from 10 minutes to 10 seconds with this.
Step 5: Master Auto Layout
Auto Layout is the feature that makes Figma feel like magic. It automatically adjusts spacing when you add or remove content.
1. Select a frame with a button and some text inside.
2. Press Shift+A to apply Auto Layout.
3. In the properties panel, set padding (e.g., 16px horizontal, 8px vertical) and spacing between items (e.g., 12px).
4. Now add a new text element inside—the layout expands automatically.
Pro tip: Use Auto Layout on your entire screen frame. Set it to vertical with 0px padding. This lets you rearrange sections (header, hero, footer) by simply dragging them up or down.
Step 6: Export and Share
When you’re ready to hand off to developers:
1. Select the frames or elements you want to export.
2. In the properties panel, click the Export section.
3. Choose PNG for most cases (2x for retina screens).
4. Click "Export"—Figma saves it to your downloads.
For developers, share a link: click Share (top right), set permissions to "Can view," and copy the link. They can inspect CSS properties and download assets directly.
FAQ
Q: Is Figma really free for professional use?
A: Yes, the free plan allows up to 3 projects and unlimited personal files. For teams, the Professional plan is $12 per editor per month. I’ve used the free plan for client work for over a year without issues.
Q: Can I use Figma offline?
A: Not natively. Figma is browser-based, but you can install the desktop app (Windows/Mac) that caches files locally. If your internet drops, you can still view cached files, but changes won’t save until you reconnect.
Q: How do I learn Figma fast?
A: Skip the 10-hour courses. Instead, build one real project—like a login screen—using this tutorial. Figma’s own YouTube channel has 3-minute tips. Practice Auto Layout and Components first; they’re the hardest but most valuable skills. Expect to be comfortable after 2-3 days of focused work.