How to Use Figma: Wireframes to Prototypes & Design Systems
Key Takeaways
- Figma is free for up to 3 projects and 2 editors per file, making it perfect for beginners.
- Start with wireframes using basic shapes and frames, then add interactivity for prototypes.
- Design systems in Figma save time by reusing components and styles across projects.
- Practice with real-world examples like a simple app login screen to build confidence.
How to Use Figma: A Beginner's Guide to UI/UX Design
If you're new to UI/UX design, Figma is one of the best tools to start with. It runs in your browser, so there's no installation hassle. I've taught hundreds of beginners, and the biggest hurdle is knowing where to begin. This guide breaks it down into three practical steps: wireframing, prototyping, and building a design system. By the end, you'll have a working prototype and reusable components.
Step 1: Creating Wireframes with Frames and Shapes
Wireframes are the skeleton of your design. They focus on layout, not colors or fonts. In Figma, everything starts with a Frame—think of it as a container for your design.
1. Open Figma and create a new file.
2. Click the Frame tool (shortcut: F). Choose a device size like "iPhone 14 Pro" (393 x 852 pixels).
3. Add basic shapes: rectangles for buttons, lines for dividers, and text for labels. Use the Rectangle tool (R) and Text tool (T).
Example: Design a login screen wireframe.
- Place a rectangle at the top for a logo area (100x100 px).
- Add two rectangles below for email and password fields (300x50 px each).
- Another rectangle for the login button (300x50 px).
- Use text layers to label "Email", "Password", and "Log In".
Pro tip: Use Auto Layout (Shift+A) to keep elements aligned. Select the button and its label, then apply Auto Layout. Now the button resizes automatically if you change the text.
Step 2: Adding Interactivity for Prototypes
Prototypes make your wireframes clickable. Figma's prototyping mode is intuitive—you connect frames with interactions.
1. Switch to Prototype mode (top-right corner).
2. Select the login button frame. Click the blue circle (the connection point) and drag it to the next screen (e.g., a home screen frame).
3. Set the interaction: "On Click" → "Navigate To" → "Home Screen".
Real numbers: A simple prototype with 3-4 screens takes about 10 minutes to set up. For example, a login flow: Login Screen → Home Screen → Profile Screen. Add transitions like "Smart Animate" for smooth moves (e.g., a card sliding in).
Test your prototype by clicking the Play button (top-right). You'll see your app working. Fix any broken links by checking the connection lines in Prototype mode.
Step 3: Building a Design System with Components and Styles
A design system is a library of reusable parts—buttons, colors, text styles. This saves hours of repetitive work. I once redesigned a 50-screen app, and using a design system cut the time by 40%.
1. Create a Component from your login button: right-click → "Create Component" (shortcut: Ctrl+Alt+K). Now it appears in the Assets panel.
2. Define Color Styles: Select a shape, go to Fill, click the four-dot icon, and choose "Create Style". Name it "Primary Blue" (#1877F2).
3. Set Text Styles: Select a text layer, go to the Text section, click the four-dot icon, and choose "Create Style". Name it "Body 16px".
Comparison Table: Components vs. Instances
| Feature | Component (Master) | Instance (Copy) |
| --------- | ------------------- | ----------------- |
| Edit behavior | Changes affect all instances | Changes affect only that instance |
| Use case | Buttons, headers, icons | Customized versions (e.g., different button text) |
| Override | No overrides allowed | Can override text, colors, size |
| Example | "Primary Button" component | An instance with "Submit" text |
To use your design system, go to the Assets panel and drag a component onto your frame. For consistent spacing, use Grid Styles (e.g., 8px grid). Enable it under View → Grid Layout → Grid.
Real-world tip: Start small. Build a design system for just 3 components (a button, a text input, a card). Then expand as you go. I've seen beginners try to create 50 components on day one and get overwhelmed. Stick to 5-10 core pieces first.
Practical Workflow: From Wireframe to Prototype
Here's a 30-minute exercise to tie everything together:
1. Wireframe (10 mins): Create 3 frames: Login, Home, Profile. Use rectangles and text only.
2. Style (5 mins): Add a color style for your primary button (e.g., blue) and a text style for headings (20px bold).
3. Prototype (10 mins): Connect Login → Home (on click), Home → Profile (on icon tap). Use "Smart Animate" for a smooth transition.
4. Refine (5 mins): Turn the button into a component. Apply it to all screens. Test the prototype.
You'll have a clickable prototype with reusable parts. Share it by clicking the Share button (top-right) and copying the link. No export needed—it's web-based.
FAQ
1. How do I share a Figma file with someone who doesn't have an account?
You can share a prototype link directly. Go to the Prototype mode, click the Play button, then copy the URL. Anyone can view it in a browser without signing in. For editing access, they need a Figma account (free).
2. Can I use Figma offline?
Figma is primarily cloud-based, but the desktop app (available for Windows and macOS) lets you work offline. Changes sync when you reconnect. However, the browser version requires an internet connection. I recommend the desktop app for offline sessions.
3. What's the difference between Figma and FigJam?
Figma is for UI/UX design (wireframes, prototypes, design systems). FigJam is a digital whiteboard for brainstorming, flowcharts, and workshops. They integrate: you can embed a FigJam board inside a Figma file. Use Figma for final designs, FigJam for early ideation.