As you’re probably aware, Adobe XD is losing its charm, and Figma is emerging as the next big thing in design! Thanks only to the EU…maybe!?!

Before diving into Figma wireframes, it’s a smart move to start with simple lo-fi wireframes featuring basic elements and a minimalist color palette. Keep titles and headers succinct, utilizing thin grey rectangles. For images and icons, stick to a palette of black, white, or grey geometric shapes. This approach streamlines the Figma wireframing process. Of course, if you’re aiming for a hi-fi prototype, that’s a whole different story.

Versatility of Figma — Mac, PC, and Linux, as well as web browsers

The beauty of Figma is its versatility across all major operating systems, including Mac, PC, and Linux, as well as web browsers. Personally, I prefer the desktop app for its offline functionality, but for the purpose of this tutorial, we’ll be using the online version to accommodate the broad audience.

Our goal with this tutorial is to get you well-versed in Figma’s tools. Think of it as a visual roadmap for your ideal end product. Typically, you’d create a wireframe based on your concepts, not the other way around.

Launch Figma

1. Upon launching Figma, you’ll land on the home dashboard, displaying recent files, teams, drafts, and offering the option to create a new design file, FigJam board, or import a file into Figma.
2. To create a new file, simply click the ‘+ Design File’ button in blue, tucked away in the top-right corner. This action will initiate a fresh, blank file, automatically categorized under “Drafts.”
3. Your creative canvas is to the left, under “Layers,” while the right side plays host to your “Properties” section for fine-tuning elements within your layers. In the top-left corner, you’ll access the menu items.
4. For Frames, you can click the ‘hashtag icon’ or use the keyboard shortcut ‘F.’ On the right, a variety of device sizes, tablets, desktops, and other templates await. Let’s pick an iPhone size. Once selected, a new frame will appear on your canvas. The top center provides tools for adding components, editing objects, and creating masks.
5. Don’t forget to name your frame; just double-click on it and enter a new name, then hit ‘Enter’ to apply the change.

One often overlooked step is employing a layout grid. Re-select the frame, find ‘Layout Grid’ on the right, and click the ‘+ icon.’ This action unveils additional options. Opt for the ‘bento box’ or the 9 squares icon. A pop-up appears, offering a grid dropdown menu; select ‘grid’ here. You can adjust the columns – I typically go with stretch, but custom sizes are an option too. To hide the layout temporarily, click the ‘eye’ icon. To re-enable it, simply click the closed-eye icon.

Import Your Drawn (Sketch) Wireframe

Now, let’s start by importing your mobile design screenshot into Figma. Place the screenshot inside the frame and adjust its size to match the frame’s dimensions while maintaining the aspect ratio by holding ‘Shift’ on your keyboard.

If the frame’s height is problematic, adjust it. Click on the frame’s name in the layers on the left, manually modify the frame’s height, or double-click the image to get its height, then paste that number into the frame’s “height” attribute to resize it accordingly.

Position the image within the frame, either to the left or right, to serve as your reference point.

Recreating with Shapes, Lines, and Text

Now, let’s begin recreating the wireframe for this screenshot. Start by adding a rectangle to represent the primary component – the image at the top. Adjust the size if necessary. You can use rectangles to depict various elements on the page, like the navigation bar at the top. Choose the square tool or press ‘R’ to create another rectangle, and place it on top of the image.

Figma offers smart guides, which are incredibly helpful! Using the selection tool, position this box on the home page and center it within the frame using red alignment lines.

For text, utilize the ‘T’ icon or press ‘T’ on your keyboard to enter headers. To speed up the process, duplicate an existing text box or use a thin rectangle as a placeholder. This simplifies the wireframing process and saves time.

Auto-Layout in Figma

You can also use thin rectangles to represent elements like the drop-down menu and logos. If you prefer plugins, look for ‘Iconify,’ install it, and find icons like the hamburger menu or drop-down menu.

To handle multiple picture boxes of the same size efficiently, copy components with Command C (or Control C for PC) and paste them with Command V (or Control V for PC). Adjust the spacing between them using the ‘+’ icon within Auto Layout.

To display social media icons, opt for circular shapes or transform rectangles into circles by adjusting their corner radius. Use rectangles to represent all non-text elements in the screenshot, simplifying the wireframe as much as possible.

You’ve seen how to utilize Figma’s tools for wireframing, sticking to a monochromatic palette. Simplify the wireframe, keeping it minimal with black, white, and grays, using text sparingly for headers. If you’ve followed along, you’ve gained valuable insights into wireframing. In my next video, I’ll challenge you to elevate this wireframe to a high-fidelity mockup.