How to create Mockups in Figma (Steps)?
In this article, we will be considering the Mockup of a recipe application and learn how to enhance its UI and add basic prototypes to its components.
1. Starting with a Mid-Fidelity Wireframe
A mid-fidelity wireframe provides a skeletal layout of the entire design, the placement of text, several images & the type of font that would be used. Here we have created a mid-fidelity wireframe design, specifying rectangular boxes that require the placement of an icon, or image and the buttons too.
Here’s the wireframe design:
2. Creating UI Design Mockup
Step 1: Select a frame of mobile size.
Step 2: Add a navigation bar, a logo in the left side and a few icons of search & like in the right side. Plus for a desktop view to elongate the content for the screen size accordingly, add a side bar section of daily special foods and specify it’s pricings and discounts.
Step 3: Create a main section with a picture of any food item with it’s name, other details & time till which it is available. Copy this for a section of another food too.
Step 4: Add a heading Categories and under that add multiple pictures each of food items and their names.
Step 5: Finally add a section of Popular Recipes & within that add few details about another food item. Here’s the final design:
2. Creating Mockup Screens
A mockup is when you view on a laptop or desktop, or a tablet for the required design & view as how the design looks on devices of different screen sizes. For eg. If the desktop view for our wireframe here used is looking good, then on tablet it might look oversized. Hence according to the need of the specific mockup, we would eliminate a few elements or change them.
Note: Use the plugin “Mockuuups Studio” on Figma to create mockups for different devices. Choose the option of view plugins and click on this plugin & generate multiple images for mockups as follows:
Step 1: Click on the plugins on the tab above the design & search for Mockuuup Studio.
Step 2: Choose one of the above options and select a Mockup of choice.
Here’s the mockup for laptop:
And here’s the mockup for tablets:
How to Create Your First Mockup in Figma?
Creating your first Mockup in Figma can be a tedious, yet entertaining task that would comprise a whole lot of creativity, ingenuity & excitement. Mockups in Figma are a basic layout or a skeletal of the project which is designed to be submitted as a high-fidelity prototype to the client. In this article we will learn how to design the UI of a project in Figma and then add prototypes to it, thus creating a good Mockup for it.
Table of Content
- Introduction to Figma
- How to create Mockups in Figma (Steps)?
- 1. Starting with a Mid-Fidelity Wireframe
- 2. Creating UI Design Mockup
- 2. Creating Mockup Screens
- Importance of using Mockups in Figma
- Conclusion