How to Create a Mockup in Figma Quickly and Easily
To create a mockup in
Figma, start by setting up a new frame as your canvas, then add design elements like shapes, text, and images using the toolbar. Use components and layers to organize your design, and finally, preview your mockup with the Present mode to see how it looks in real use.Syntax
In Figma, creating a mockup involves these main steps:
- Create Frame: This is your design canvas where you place all elements.
- Add Elements: Use shapes, text, images, and components to build your design.
- Organize Layers: Keep your elements tidy and grouped for easy editing.
- Use Components: Reusable design parts that help maintain consistency.
- Preview: Use Present mode to see your mockup as a prototype.
text
1. Select Frame tool (F) and draw a frame. 2. Use Shape tools (R for rectangle, O for ellipse) to add shapes. 3. Add Text (T) and type your content. 4. Import images via drag-and-drop or menu. 5. Group elements with Ctrl+G (Cmd+G on Mac). 6. Create components with Ctrl+Alt+K (Cmd+Option+K on Mac). 7. Click Present (play icon) to preview.
Example
This example shows how to create a simple mobile app mockup with a header, button, and image.
text
1. Press F and draw a frame sized 375x812 (iPhone X size). 2. Press R and draw a rectangle at the top for the header (375x80), fill with blue. 3. Press T and add header text "Welcome" centered in the header. 4. Press R and draw a rounded rectangle button below header (200x50), fill with green. 5. Add text "Get Started" on the button. 6. Drag an image from your computer into the frame below the button. 7. Group the button and text. 8. Click Present to preview the mockup.
Output
A mobile screen mockup with a blue header labeled 'Welcome', a green 'Get Started' button below, and an image under the button.
Common Pitfalls
Beginners often make these mistakes when creating mockups in Figma:
- Not using frames: Without frames, designs lack structure and are hard to manage.
- Ignoring layers: Overlapping elements without organizing layers cause confusion.
- Not using components: Repeating elements manually wastes time and causes inconsistency.
- Skipping preview: Not using Present mode misses how the design feels in real use.
text
Wrong way:
- Drawing elements directly on the canvas without frames.
- Copy-pasting buttons instead of creating components.
Right way:
- Always start with a frame.
- Create components for repeated elements.
- Organize layers and groups clearly.Quick Reference
| Action | Shortcut / Tool | Description |
|---|---|---|
| Create Frame | F | Draws a new frame as your design canvas |
| Add Rectangle | R | Adds a rectangle shape |
| Add Ellipse | O | Adds a circle or ellipse shape |
| Add Text | T | Adds text element |
| Group Elements | Ctrl+G / Cmd+G | Groups selected elements |
| Create Component | Ctrl+Alt+K / Cmd+Option+K | Makes selected elements reusable |
| Present Mode | Play icon | Previews your design as a prototype |
Key Takeaways
Start your mockup by creating a frame to organize your design.
Use shapes, text, and images to build your mockup visually.
Create components for repeated elements to save time and keep consistency.
Organize layers and groups to keep your design clean and editable.
Always preview your mockup in Present mode to check the user experience.