Guide

How to Use Figma for Design

Follow these simple steps to create and export a design using Figma. This guide will walk you through the process from creating a new file to exporting your design.

1. Create a New Design File – Go to figma.com and click “New Design File” from your dashboard. Blank canvas, full freedom.

2. Use Frames as Artboards – Press F to create Frames, which act like screens or pages (perfect for web/mobile UI).

3. Draw Basic Shapes – Use R for Rectangle, O for Circle, T for Text — these tools are your daily bread in UI design.

4. Apply Design Styles – Add fills, strokes, shadows, effects, auto layout, border radius — make your elements clean and modern, not messy.

5. Use Grids and Layouts – Press Shift + G for grids, or add layout grids from the right panel — this is what separates amateurs from real designers.

6. Create Components – Select a UI element and press Ctrl/Cmd + Alt + K — this makes it a reusable component. Smart design = scalable design.

7. Use Variants for Component States – Make buttons with hover/active states using variants. If you're not using variants, you're doing extra work.

8. Build a Design System (Optional but Powerful) – Make your fonts, colors, buttons, inputs reusable. Design once. Use forever.

9. Prototype Your Designs – Switch to the Prototype tab, link screens together for interactive flows. Great for presenting your ideas without writing a line of code.

10. Done – Export assets, share with devs, or present it like a boss. Figma isn’t just a tool — it’s your full design battlefield.