Figma is the most popular design tool for a reason: it’s free to start, runs in your browser, and the collaboration features are genuinely best-in-class. But opening Figma for the first time can feel overwhelming. Toolbar icons, layers panels, properties — where do you even begin?
This guide walks you through everything you need to design your first real project in Figma.
What Is Figma (and What Is It For)?
Figma is a browser-based design tool used to create:
- Website and app designs (UI/UX design)
- Wireframes and prototypes
- Design systems and component libraries
- Presentations (via Figma Slides)
- Diagrams and brainstorming (via FigJam)
It’s used by designers at companies like Airbnb, Uber, Google, and Spotify. But it’s also free for individuals, making it accessible to students, freelancers, and hobbyists.
What Figma is NOT: It’s not a photo editor (use Photoshop), an illustration tool (use Illustrator), or a drag-and-drop template tool (use Canva). Figma is for designing interfaces from scratch.
Setting Up Your Account
- Go to figma.com and sign up with Google or email
- You’ll land in the Figma Dashboard — this is your file browser
- Click ”+ New design file” to create your first file
The free plan includes:
- 3 Figma files
- Unlimited collaborators (view only)
- 30-day version history
- Access to the community (free templates and plugins)
For unlimited files, the Professional plan is $15/editor/month. But 3 files is plenty for learning.
Understanding the Interface
The Canvas
The large empty area is your canvas — an infinite 2D space. You can zoom in/out (Ctrl/Cmd + scroll) and pan around (Space + drag).
Top Toolbar
From left to right:
- Move tool (V): Select and move objects
- Frame tool (F): Create frames (the most important concept in Figma)
- Shape tools: Rectangle (R), Ellipse (O), Line (L), Polygon
- Pen tool (P): Draw custom shapes
- Text tool (T): Add text
- Hand tool (H): Pan the canvas
Left Panel
- Layers: Every object you create appears here, nested inside frames
- Assets: Your saved components and team library components
- Pages: Multiple pages within one file (like sheets in Excel)
Right Panel
- Design tab: Properties of the selected object (size, color, effects, etc.)
- Prototype tab: Add interactions and transitions
- Inspect tab (Dev Mode): Code output for developers
Core Concept #1: Frames
Frames are the building blocks of everything in Figma. Think of them as containers.
- A phone screen is a frame (iPhone 16: 393 × 852)
- A button is a frame containing text
- A card is a frame containing an image, title, and description
- A page layout is a frame containing other frames
To create a frame: Press F, then either:
- Click and drag to create a custom-sized frame
- Select a preset from the right panel (iPhone, Desktop, Tablet, etc.)
Frames vs. Rectangles: Beginners often use rectangles when they should use frames. The key difference: frames can contain other objects (like a folder), rectangles cannot.
Core Concept #2: Auto Layout
Auto Layout is Figma’s most powerful feature. It automatically arranges child objects inside a frame — like CSS Flexbox.
Example: Building a Button
- Type “Get Started” with the Text tool (T)
- Select the text → right panel → click “Auto Layout” (or Shift+A)
- A frame wraps your text with padding
- In the right panel, set padding to 12 vertical, 24 horizontal
- Add a background fill color (e.g., blue #3B82F6)
- Round the corners to 8px
You now have a button that automatically resizes when you change the text. This is Auto Layout in action.
Why it matters: Without Auto Layout, you’d manually resize the button every time the text changes. With it, the button adapts like a real HTML element.
Auto Layout Properties
- Direction: Horizontal or Vertical stacking
- Gap: Space between items
- Padding: Space inside the frame (top, right, bottom, left)
- Alignment: How items align within the frame
Core Concept #3: Components
Components are reusable design elements. Create a button once, reuse it 100 times. Change the original, and all 100 instances update.
To create a component:
- Design your element (e.g., a button)
- Select it → right-click → “Create Component” (or Ctrl/Cmd + Alt + K)
- The component turns purple in the layers panel
To use a component:
- Drag it from the Assets panel (left sidebar) onto your canvas
- Each copy is an “instance” that links back to the original
Overrides: You can change text, colors, and visibility on instances without breaking the link to the main component. This lets you have one “Button” component with different labels and colors.
Core Concept #4: Styles and Variables
Color Styles
Instead of remembering hex codes, create named color styles:
- Select an object with the color you want to save
- Click the 4-dot icon next to the fill color → ”+” → name it (e.g., “Primary/Blue”)
- Apply this style to any object by clicking the 4-dot icon and selecting it
Text Styles
Same concept for typography:
- Style your text (font, size, weight, line height)
- Click the 4-dot icon next to the text properties → ”+” → name it (e.g., “Heading/H1”)
Variables (Advanced)
Variables let you define values (colors, numbers, strings) that can switch between modes — for example, light mode vs. dark mode. This is powerful but save it for after you’re comfortable with the basics.
Your First Project: Design a Mobile App Screen
Let’s build a simple task list screen:
Step 1: Create the Phone Frame
- Press
F→ select “iPhone 16” from the right panel presets (393 × 852)
Step 2: Add a Status Bar
- Create a frame inside: 393 × 54, fill white
- Add text: time on left, battery icon on right
- (Or find a free status bar component in the Figma Community)
Step 3: Add a Header
- Create a frame: 393 × 60, Auto Layout, horizontal, centered
- Add text: “My Tasks” (20px, bold)
Step 4: Create a Task Card Component
- Create a frame: 361 × auto, Auto Layout vertical, padding 16, gap 8
- Add a checkbox circle (24 × 24 ellipse with 2px stroke)
- Add text: “Task name here” (16px)
- Add secondary text: “Due tomorrow” (14px, gray)
- Group checkbox + task name horizontally with Auto Layout
- Select the whole card → Create Component
Step 5: Build the Task List
- Drag 5 instances of your Task Card from the Assets panel
- Wrap them in a frame with Auto Layout vertical, gap 8
- Change the text on each instance to different tasks
Step 6: Add a Floating Action Button
- Create a circle (56 × 56), fill blue, add a ”+” text
- Position it at the bottom-right of the screen
You’ve just designed a functional mobile screen with reusable components.
Prototyping Basics
Make your design interactive:
- Switch to the Prototype tab in the right panel
- Select the ”+” button on your design
- Drag the blue circle to a new frame (e.g., an “Add Task” screen)
- Set the interaction: “On Tap” → “Navigate to” → choose transition (e.g., “Slide In”)
- Click the Play button (▶️) in the top-right to preview
Your prototype now feels like a real app. Share the prototype link with stakeholders for feedback — no code required.
Essential Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| V | Move tool |
| F | Frame tool |
| R | Rectangle |
| T | Text |
| Shift + A | Add Auto Layout |
| Ctrl/Cmd + D | Duplicate |
| Ctrl/Cmd + Alt + K | Create Component |
| Ctrl/Cmd + G | Group |
| Ctrl/Cmd + ] | Bring Forward |
| Ctrl/Cmd + [ | Send Backward |
| Ctrl/Cmd + K | Command palette (search anything) |
Free Resources to Keep Learning
- Figma Community: Thousands of free templates, UI kits, and icons at figma.com/community
- Figma YouTube channel: Official tutorials for every feature
- UI kits: Search the community for “iOS Design Kit” or “Material Design” for pre-built components
What’s Next?
Once you’re comfortable with frames, Auto Layout, and components, explore:
- Design Systems: Build a library of components and styles that your whole team uses
- Advanced Prototyping: Variables, conditional logic, and interactive components
- Dev Mode: Learn how developers use Figma to extract design specs
- Plugins: Explore plugins for icons (Iconify), stock photos (Unsplash), and content generation (Content Reel)
Bottom Line
Figma’s learning curve is real, but it’s shorter than you’d expect. Most designers feel productive within a week of daily practice. The free plan gives you everything you need to learn, and the community provides thousands of free resources to accelerate your growth.
Read our full Figma Review | Compare with Canva | See Best Free Design Tools
Frequently Asked Questions
How long does this take?
Most users can complete this process in 15-30 minutes by following the step-by-step guide above.
Do I need any technical skills?
No advanced technical skills are required. This guide walks you through each step with clear instructions.
What tools do I need?
See the requirements section above for the complete list of tools and accounts you’ll need to get started.