Connect with us


404: Not discovered

On this article, we’ll discover what wireframing is, and why it’s value doing it with Figma — the most-used UI design software in the marketplace as we speak.

We’ll take a deep dive into Figma, and discover ways to design person interfaces with it — digging into wireframing as we go.

BTW: in the event you check out the 2020 Design Instruments Survey, Figma received in most classes: Person Flows, UI Design, Prototyping, Handoff, Design Techniques, Versioning, and even “most excited to strive in 2021”.


Wireframes are diagrams that depict the construction of a design, and they are often both low-fidelity (for person analysis) or mid-fidelity (for UX analysis). We’ll be specializing in the latter (UX analysis), and visuals will likely be of no concern to us right here, as a result of all we wish to do at this stage is work out the content material and format (in any other case often called the “data structure”).

What are we wireframing?

First, just a little background on the UI we’ll be constructing. Will probably be a table-like construction exhibiting varied UX design instruments and which step of the UX design workflow every software is utilized in. The information will likely be user-submitted, so the goal is to see which UX design workflow is greatest, relatively the overdone “which UI design software is greatest?”

Wireframing will assist me to determine how greatest to construction this interface with out losing time on determining the little visible particulars. It received’t look wonderful, however that’s nice; it simply must look good sufficient that customers can supply me some suggestions.

Sure, it’s an actual UI. In the meanwhile I’m calling it “Toolflows”.

Let’s start!

Step 1: Set Up the Artboard

The vast majority of my web site’s customers are desktop customers, so it is sensible to wireframe my design on a desktop artboard. Press A in your keyboard, then click on Design > Desktop > MacBook from the suitable sidebar of Figma.

Creating artboards in Figma

Step 2: Collect Practical Necessities

Assuming that you just or any individual else did some person analysis at some stage, we’ll must consult with that to create our wireframe. Whereas conducting person analysis (particularly, person interviews, focus teams, and person testing with low-fidelity wireframes), we might have been made conscious of any practical necessities.

Ours are:

  • filter by software
  • variety of workflow customers

Let’s begin wireframing!

Step 3: Create Textual content and Shapes

To start with, there are Figma wireframe kits obtainable, however I’m not a fan of them precisely. They make me really feel constrained to work solely with what’s obtainable within the package, so it hinders creativity.

As a substitute, we’ll wireframe utilizing textual content and shapes.

As we discovered earlier than with the artboard, the best method to create something in Figma is to abuse the keyboard shortcuts:

  • T: Textual content
  • O: Ellipse
  • R: Rectangle
  • ⇧⌘Okay: Picture
  • ⇧L: Arrow
  • L: Line

After that, it’s merely a case of clicking on the artboard roughly the place you’d like the item to look, after which you should use your mouse and arrow keys to regulate the scale and alignment.

Helpful shortcuts:

  • ⌘-/+ to Zoom.
  • ⌘D to Duplicate chosen objects.
  • ⌘G to Group chosen objects (⌘rc to pick out inside).
  • Maintain when mouse-resizing to rotate objects.
  • Maintain when mouse-resizing to take care of side ratio.
  • Use arrow keys to maneuver objects by 1px (Maintain for 10px).
  • Arrow keys + to resize by 1px (Maintain ⌘⇧ for 10px).

Quick wireframing with Figma

Subsequent, we’ll transfer on to styling.

Proceed studying
An Introduction to Wireframing with Figma
on SitePoint.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *