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.

Figma is a collaborative online designing tool that is used frequently to design websites, for UI(user interactive) & UX (user experience) designs, graphics posts, etc. It is the most widely used tool for converting design into development. It helps in setting up a functional UI structure of a project that can be submitted to the client for website purposes, and those designs can be converted to development codes of React.js or HTML, etc, using plugins on Figma.

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:

• Mockups in Figma are essential since it provides a visual representation of the site before the actual submission to the client.
• Mockups are essentially high fidelity wireframes with a complete set of possible prototypes wanted in a web design template.
• Mockups help in making responsive websites, since it caters to all different screen sizes.

Mockups are important in Figma since they allow changes in UI designing & UX designing too before actual submission to the client. They allow refactoring & final changes in the web design & are used to submit a high valued prototype to the customer. It helps in understanding the placement of basic elements in the design file & their properties. Mockups thus, form an integral part of the web design field.