Master UI/UX Design with Figma: Low-Fidelity Wireframe Tutorial

Master UI/UX Design with Figma: Low-Fidelity Wireframe Tutorial

Table of Contents

1. Introduction
2. User Experience Design Process
3. Getting Started with Figma
   • Creating a New Document
   • Choosing a Mobile Screen
   • Navigating and Zooming in Figma
4. Turning on the Layout GRID
   • Updating Grid View
   • Adjusting Grid Width, Color, Number, and Spacing
   • Adding Ruler Lines for Reference
5. Creating Low Fidelity Screens
   • Mapping Out the Page with Basic Shapes
   • Manipulating Shapes and Adding Borders
   • Incorporating Text
6. Adding Design Elements
   • Adding Headers
   • Including Navigation Buttons
   • Creating Overlays for Mapping Application
7. Incorporating Functionality and Interactions
   • Choosing a Base Map for the Mapping App
   • Inserting an Image within a Shape
   • Replicating User Location Symbol
   • Adding Icons and Map Widgets
   • Creating Call-to-Action Buttons
   • Showing User Interaction with the Map
8. Using Layers for Easy Access
9. Conclusion

Creating Wireframes using Figma: A Step-by-Step Tutorial

Wireframes play a crucial role in the user experience design process. They help designers Visualize screens and layouts, allowing them to make informed decisions on information architecture and organization. In this tutorial, we will focus on using Figma, a web-Based interactive and collaborative design tool, to Create wireframes. Whether you're new to Figma or want to enhance your wireframing skills, this tutorial will walk you through the process step by step.

1. Introduction

Before we dive into the details, let's briefly introduce the concept of wireframing. Wireframes are Simplified sketches or mockups that represent the basic structure and layout of an app or Website. They are devoid of detailed design elements, focusing solely on the arrangement of content and functionality. Wireframes act as a blueprint for the final design, allowing designers and stakeholders to Align their vision and make necessary revisions before moving into the visual design phase.

2. User Experience Design Process

To understand where wireframing fits into the overall user experience design process, let's take a quick overview. User experience design involves a multi-layered approach that encompasses various stages, including research, ideation, wireframing, prototyping, testing, and implementation. Wireframing comes after the research and ideation stage and serves as the foundation for the subsequent design and development phases.

3. Getting Started with Figma

Creating a New Document

To start wireframing in Figma, You need to create a new document. When you open Figma, you'll be greeted with an empty canvas. Think of it as an online campus for designing your app screens.

Choosing a Mobile Screen

With Figma, you can create wireframes for various devices, including mobile screens. Select the mobile screen size you prefer. Click on the frame icon in the left-HAND corner of the toolbar, and choose the desired screen size from the drop-down options. For example, we'll choose the iPhone 11 Pro Max screen for our demonstration.

Navigating and Zooming in Figma

Once you've chosen a screen size, familiarize yourself with the navigation and zooming features in Figma. You can navigate through your document by swiping left or right on your trackpad or pressing the space bar and using the left clicker on your mouse. Zoom in by pinching your fingers outwards or using the scroll wheel on your mouse while holding the command or control key. Zoom out by pinching your fingers inwards or scrolling the opposite direction on your mouse.

4. Turning on the Layout Grid

To maintain organization and alignment in your wireframes, Figma offers a layout grid feature. Enabling the layout grid ensures that your user interface (UI) elements are properly aligned and visually pleasing.

Updating Grid View

On the right-hand side of the screen, locate the layout grid options. By default, Figma displays a default grid view. Click on the grid view and select "Columns" for a more straightforward layout. You can also customize the width, color, number, and spacing between the columns to suit your preferences.

Adding Ruler Lines for Reference

Another handy feature in Figma is the ability to add ruler lines. Ruler lines help you keep track of the center and align your UI elements accurately. Drag the ruler lines both horizontally and vertically to mark the center and reference points on your canvas.

5. Creating Low Fidelity Screens

With the grid set up, it's time to start creating low fidelity screens using basic shapes and text. Low fidelity screens focus on the overall layout and organization of the content without delving into specific design details.

Mapping Out the Page with Basic Shapes

Begin by implementing basic shapes to Outline the structure of your screens. You can choose shapes like rectangles or squares from the top left-hand toolbar. Draw the shapes on the screen and manipulate their size and position by dragging the edges.

Manipulating Shapes and Adding Borders

To enhance the visual hierarchy, you can add borders to your shapes. In the right-hand design tab, click on the shape you drew, and then select the "Stroke" option. Adjust the border color, thickness, and other design elements as needed.

Incorporating Text

Text plays a crucial role in wireframes, as it helps communicate the purpose and functionality of each screen. To add text, click on the "T" icon in the upper left-hand toolbar. Click anywhere on the artboard and start typing. Manipulate the text font, size, and other properties to ensure clear and concise communication. For example, you can use the default app font "Roboto" and set the header size to 35.

6. Adding Design Elements

Now that the basic layout is established, it's time to add specific design elements that contribute to the overall usability and aesthetics of the screens.

Adding Headers

Headers provide a visual cue about the section or page the user is currently viewing. Incorporate headers in your wireframes to improve navigation and orientation. Use the text tool to insert headers and style them according to the design preferences. Experiment with font choices, sizes, and colors to find the optimal combination that aligns with your app's branding.

Including Navigation Buttons

In most apps, navigation is a crucial element that allows users to move between screens or sections. Design navigation buttons that guide users in accessing various parts of your app. For instance, include a back button that directs users to the previous screen. Ensure the buttons are consistent in design and placement to improve usability.

Creating Overlays for Mapping Application

If you're designing a mapping application, you may need to create overlays to display maps and related functionalities. Leave space in the wireframe to incorporate the mapping functionalities and ensure there's room for users to Interact with the map.

7. Incorporating Functionality and Interactions

Wireframes should not only represent the static layout of the app but also showcase its interactive aspects. While wireframes lack the complexity and visual finesse of the final design, they should demonstrate the expected user interactions and functionality.

Choosing a Base Map for the Mapping App

In a mapping application, the choice of base map determines the visual backdrop of the app. From the left-hand toolbar, access the base map options and choose the appropriate Type of map that best suits your app's purpose. For example, grayscale or navigation maps are commonly used base maps for mapping applications.

Inserting an Image within a Shape

To display the map within your wireframe, you can insert an image within a shape. Select the shape you created for the map and go to the right-hand toolbar. Under the fill section, choose the "Image" option and select the screenshot you took of the map.

Replicating User Location Symbol

In a mapping app, it's common to display the user's location on the map. Replicate the default user location symbol or any customized symbol within your wireframe. Use Figma's shape and manipulation tools to create the symbol and place it accurately on the map.

Adding Icons and Map Widgets

Include Relevant icons and map widgets to showcase the available functionality. Download icons and drag them into your Figma document. They will appear within a frame. Select the icon, drag it out of the frame, delete the frame, and adjust the size according to the screen format. Position the icons strategically and align them using the measurement indicators that appear between the elements.

Creating Call-to-Action Buttons

To prompt user actions, incorporate call-to-action buttons in your wireframe. These buttons indicate specific actions that users can take. For example, include a "Save" button at the bottom of the screen, highlighting an important action for users. Customize the shape of the button by adjusting the corner radius, making it visually distinguishable as a Clickable element.

Showing User Interaction with the Map

Wireframes allow you to showcase user interactions and state changes within the app. Duplicate the screen where the map is displayed and demonstrate what happens when the user interacts with specific elements. For instance, show the activation of the draw button when the user clicks on it, along with the changes in other relevant elements on the screen.

8. Using Layers for Easy Access

As you work on your wireframes, you'll Notice that Figma automatically organizes your elements into layers in the left-hand sidebar. Take AdVantage of this feature to easily locate and access specific UI elements within your document. Clicking on a layer will automatically lead you to the corresponding asset location, making it convenient to make adjustments or modifications.

9. Conclusion

Creating wireframes using Figma provides a streamlined and collaborative approach to visualizing your app's screens and layout. By following the steps outlined in this tutorial, you'll be able to create low fidelity wireframes that effectively communicate your design concepts. Remember, wireframes act as a blueprint for your final design, allowing you to test and iterate before diving into detailed visual designs. Stay tuned for more tutorials and design tips from Geo Marvel. Happy wireframing!