Figma UX tutorial for beginners - Mockup

Summary

In this tutorial, Aliena Cai teaches viewers how to create a high-fidelity mock-up in Figma by replicating a screen from their favorite app. She covers the process step-by-step, from adjusting sizes and colors of elements to adding system-related components like the time and battery. Aliena emphasizes the importance of wireframing before diving into detailed design, offers tips on refining icons, and explains how to adjust layouts and fonts to match the original app’s aesthetic. The video is a great resource for beginners looking to master mock-up design in Figma.

Takeaways

• 😀 Understand the difference between wireframes and high-fidelity mock-ups in Figma.
• 😀 Create a mock-up by adjusting size, color, and position of elements to match an app screenshot.
• 😀 Always start with a wireframe to plan the layout and structure before diving into detailed design.
• 😀 Use Figma's alignment tools to position elements accurately and ensure visual consistency.
• 😀 Incorporate high-resolution images by copying and pasting them directly into your mock-up.
• 😀 Adjust text elements by changing font size, color, and positioning to match the original app's design.
• 😀 Take care with element layering to avoid important components being hidden behind others (e.g., photo layers).
• 😀 Refine shape elements like rectangles by adjusting corner radius and color to replicate the original design.
• 😀 Utilize online resources (like Figma community icons) to find and add icons to your design, saving time.
• 😀 Add system-related elements like time and battery percentage to your mock-up for a realistic look and feel.
• 😀 Practice is key to improving your design skills—always learn from other products and design systems.

Q & A

What is a mock-up, and why is it important in design?

A mock-up is a high-fidelity design that closely resembles the final product. It’s important because it allows designers to visualize the final product and make necessary adjustments before development, ensuring that the design is accurate and functional.

Why should you create a wireframe before making a mock-up?

A wireframe provides the basic structure and layout of the design, helping you focus on the placement and functionality of elements without getting distracted by detailed design decisions. It saves time and ensures that the mock-up process is more efficient.

How can you ensure elements are properly aligned in Figma?

To align elements, hold **Shift** while dragging them to keep their vertical or horizontal alignment intact. Additionally, when you see the red alignment guide (a vertical or horizontal line), it indicates that the element is centrally aligned.

What should you do if your mouse or keyboard can't adjust the element's position precisely enough?

In such cases, you can manually adjust the position by typing the exact coordinates into the right panel. For example, you can add or subtract fractions of a pixel (like 0.5 pixels) for more precision.

How do you add an image to a rectangle in Figma?

To add an image to a rectangle in Figma, first select the rectangle, then use the **Fill** option in the right-hand panel. Choose the image option and paste the image into the rectangle by pressing **Ctrl + V (Cmd + V)** after selecting the image from your local device.

Why is it important to rename layers and elements in Figma?

Renaming layers and elements in Figma helps keep your design organized, especially when working with multiple elements. It ensures that you can easily identify and manage components, making the design process more efficient and less error-prone.

What is the purpose of using the system-related elements (like time and battery) in a mock-up?

System-related elements, such as the time and battery percentage, are essential because they represent the environment in which the app will be used. Adding these elements early ensures that the design accounts for these system constraints, preventing later adjustments.

How can you refine the spacing of text elements in Figma?

To refine the spacing of text elements, you can adjust the **letter spacing** and **line height** in the right panel. You can also fine-tune the positioning by moving elements manually or entering exact pixel values for better control.

What should you do if you can’t find the exact icon you need for your design?

If you can’t find the exact icon, you can search for a similar one from online icon libraries, such as the Figma community. Alternatively, you can use a placeholder icon and refine it later when you have access to the correct one.

What is the advantage of using pre-made icon sets from Figma’s community resources?

Using pre-made icon sets from Figma’s community resources saves time and ensures consistency. These sets provide high-quality, professionally designed icons that are ready to use, so you don't have to design each icon from scratch.