How to Use Figma for Designers

Figma is a cloud‑based UI design tool that lets designers create, collaborate, and prototype in one place. This tutorial shows you, step by step, how to start a new file, build components, add interactions, and hand off assets. Follow the instructions, and you’ll finish a basic app screen in under an hour.

1. Setting up a Figma account and workspace
2. Navigating the canvas and basic tools
3. Creating reusable components
4. Building interactive prototypes
5. Preparing designs for development hand‑off
6. Figma vs. competing tools
FAQ

1. Setting up a Figma account and workspace

1.1 Sign up for a free Starter plan

Go to figma.com and click “Sign up”. Use Google, Microsoft, or an email address. The free plan gives you three editable files, unlimited collaborators, and up to 30 days of version history.

1.2 Create your first project

After logging in, click the “New File” button in the dashboard. Name the file “Mobile App UI – Draft”. The file opens in a new browser tab.

Figma dashboard with New File button — Fig.1 – Figma dashboard showing the New File button.

2. Navigating the canvas and basic tools

2.1 Pan, zoom, and frames

Use the mouse wheel or trackpad pinch to zoom. Hold the space bar and drag to pan. Press F to create a Frame – the container for screens, artboards, or groups.

2.2 Shape and text tools

Press R for a rectangle, O for an ellipse, and T for text. All objects appear in the Layers panel on the left.

Figma toolbar highlighting shape and text tools — Fig.2 – Toolbar with shortcuts for rectangle, ellipse, and text.

2.3 Align and distribute

Select multiple layers, then click the alignment icons in the top bar. Use “Tidy up” (Shift + A) to auto‑space evenly.

3. Creating reusable components

3.1 Build a button component

1. Draw a rectangle (120 × 40 px).
2. Add a text layer “Primary”.
3. Select both, right‑click → “Create component” (or Ctrl/Cmd + Alt + K).

Button component in Figma — Fig.3 – Primary button component ready for reuse.

3.2 Variants for states

With the button component selected, click “+” in the Properties panel → “Add variant”. Create “Hover” and “Disabled” variants by changing fill color and opacity. Name the property “State”.

3.3 Using the component

Drag the component from the Assets tab onto any frame. To switch states, select the instance and choose a variant from the right‑hand dropdown.

4. Building interactive prototypes

4.1 Link screens

Select a button instance, go to the Prototype tab, click the node, and drag to the target frame. Choose “On click → Navigate to”.

4.2 Add transitions

In the interaction details, set “Animation” to “Smart animate”. Adjust duration to 250 ms for a smooth slide.

4.3 Preview and share

Press Present (play icon) to open the prototype. Click “Share” → “Copy link” to send a view‑only URL to stakeholders.

5. Preparing designs for development hand‑off

5.1 Exporting assets

Select an icon layer, go to the Export section, click “+”. Choose SVG for vector icons, PNG @2x for raster images. Click “Export” and save to a local folder.

5.2 Inspect mode

Developers can open the file, click “Inspect” on the right panel, and copy CSS, iOS, or Android code snippets directly.

/* Example CSS generated by Figma */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
  background: #0066ff;
  color: #fff;
  border-radius: 4px;
}

5.3 Documentation

Add a separate “Style Guide” page. Include color swatches, typography scale, and spacing tokens. Use Figma’s “Comment” feature to annotate decisions.

6. Figma vs. competing tools

Feature	Figma (Free)	Adobe XD (Free)	Sketch (Paid)
Real‑time collaboration	Yes, unlimited	No, only co‑editing with plugin	Via Sketch Cloud, limited
Browser access	Yes	Only desktop	No
Component variants	Yes	Limited	Yes (via symbols)
Version history	30 days automatic	Manual saves	Manual via plugins
Export formats	PNG, JPG, SVG, PDF	PNG, JPG, SVG	PNG, JPG, SVG, PDF

FAQ

Do I need a paid Figma plan to create components?

No. The free Starter plan lets you create unlimited components within three projects.

Can I export assets from Figma without a plugin?

Yes. Select the layer, click Export in the right panel, and choose PNG, JPG, SVG or PDF.

How does Figma’s prototyping differ from Adobe XD?

Figma stores prototypes in the same file as the design, offers real‑time collaboration, and supports variable interactions without extra plugins.

Is there a way to version‑control Figma files?

Figma automatically saves versions. Use File > Show Version History to name and restore any point.

Can I use Figma on a Windows PC?

Yes. Figma runs in any modern browser and also offers a native Windows desktop app.

With these steps you can launch a Figma project, build reusable components, prototype interactions, and hand off clean assets to developers. The tool’s live collaboration and browser‑first approach make it a strong choice for remote design teams.