Lab 3: High-Fi Wireframes with Figma

In this lab we will:

• Get familiar with the UI and design tools available in Figma
• Investigate how to create high fidelity wireframes
• Do a complete example of a high fidelity (hi-fi) wireframe of a website

As we already saw an introduction to Figma in Lab 2, we will jump ahead to some slightly more advanced usage in this lab.

Let’s look a few common usage examples that are less trivial:

Start with Frames

• Since we are mocking up user interfaces, we need to start with a screen view
• In Figma, these are called Frames
• Use the frame tool and draw a box
• If you need to, you can manually set a size in the right sidebar for pixel perfect views
• You can select frames by clicking on their name in the upper left

Fine tuning shapes

• Once you place a rectangle, you may want to fine tune. Typically these changes will be made from:
  • The right-click context menu
  • The widgets which appear when the object is selected
  • The properties panel to the right of the application

Gradients

• To create a fill which is a gradient, perform the following steps
  1. Click on the fill color
  2. Change the fill type from solid to linear
  3. You can set the individual points in the gradient in this area
  4. You can fine tune the gradient, e.g. change the rotation, here. Experiment with some of the other gradient types!

Boolean Operations

• Boolean operations allow you to create shapes more interesting than simple primitives by adding (union) or cutting them out (subtraction.)
  • These are non-destructive so you can modify them later
• e.g. create a user icon with the following three circles:
• select the objects with shift click, in order, background, then each of the circles
• from the menu at (2), select Subtract Selection
• This will create a new shape with the other two parts cut out Experiment with some of the other boolean operations
• An alternative approach to creating interesting shapes is to turn your primitives into raw vector data, and modify control points from there!

Learn more about boolean operations here A video on boolean operations

Auto Layout

• AutoLayout is a tool in Figma which groups elements together into a row or column and allows you align them and add spacing and/or padding between the elements

A video on Auto Layout

Groups

• lets make our user icon slightly better with an outline.
• First, lets draw a circle slightly bigger than our icon
• Make sure it is behind the icon either through layers, or right-click -> Send to back
• Make sure it has a Stroke, and remove its fill
• Finally, select both objects and right-click -> Group
• These objects will now move together, and can be clones (ctrl+d) and manipulated together.
• Note: because outlines do not change their thickness when scaling, this may not look exactly right at other sizes!

Learn more about groups versus frames here

Masked Images

• Sometimes we want images to be masked by another shape
  • i.e. an image inside of a circle
  • We can think of this like a window which is looking through to an image behind it.
  • we can do this by
    • uploading an image using the image tool, under the rectangle
    • adding a shape on top
    • select the shape and click on the mask button
    • in the layer pane, drag the image above the mask
    • the image can by fine tunes by double clicking it and them manipulating it
• An alternative approach to this is to use images as fills
  • If you want to modify the image after, change the fill type to crop (or alt+double-click)
  • If you choose to upload multiple images, you can fill them one after another rapidly

More info about masks in the docs

You can level up your figma usage with this guide on best practices

Figma can be used for Low Fidelity (lo-fi) wireframing.

Lo-fi wireframing, (creating wireframes, or mockups) is the simplest way to roughly lay out the visual elements of your design. These mock-ups are purposefully rough and devoid of detail or color so that one is forced to focus on the structure, and remain uncommitted to the design thus remaining open to change.

Dedicated tools exist for this, like Balsamiq, but we can also easily simulate this in Figma.

Baslamiq has a good explanation of Wireframes here.

In Figma there are two approaches to this: you could make the individual components yourself, which is not particularly hard, and will give your mockup a more personalized feel. Or you could start with a kit designed specifically for this purpose:

Figma lo-fi kit

Let’s make some of these elements quickly, and attempt to quickly wireframe one of the pages here.

Instead of using scribbles, you can use placeholder text, but be sure to use an appropriate font like comic neue or allison, or even redacted script! One benefit to this is that there will be more reflow options.

In contrast to a lo-fi wireframes, High Fidelity, or hi-fi wireframes incorporate some design elements of the final product, such as images, colors, fonts and real copy which will appear in the final product. For this lab, we will use the term Wireframes to refer to mock-ups without interactivity, and Prototypes to refer to mockups with interactivity, which we will see next week, though keep in mind in industry you may see the terms used interchangeably.

In Figma, it’s often not much harder technically to create hi-fi wireframes than lo-fi, which involve colors, actual images, and content, as long as these assets are available. We can create our layouts using primitive shapes with color, images, text and UI icons.

Similarly, we can also extend Figma’s functionality with high fidelity UI kits, for example, something like Figit, however tradeoffs will exist - what you gain in speed you may lose in flexibility and creativity.

A Quick Note on Image Licensing: Always make sure that you have the rights to use the images that you use in your designs!

The easiest way to ensure that you can use assets for any purpose is to use Creative Commons CC0 assets - this is a very permissive license which effectively puts the assets in the public domain, allowing anyone to use them for any purpose without even needing to credit their source.

Let’s work through a hi-fi wireframe example. We will try to replicate a website from Frontend Mentor. I have already compiled assets you may want, which you can find in the example files.

We are going to do the loopstudios landing page.

Head to the website Dribbble, which is a website where designers showcase their UI work. Find a UI design you like which includes at least 10 unique components. I am using the term component to be a complete visual element, e.g. an image, a button, an icon, etc. For example, I would count 16 component in the following design:

Your assignment is to attempt to recreate this design in Figma.

Rules:

• If elements are clearly just images, you may screen-capture them, or find a similar image on the internet. Max 3 elements can be just pictures. If your design has more pictures, that’s fine, but you’ll need at 7 least seven more component.
• If an element is not an image, and is just geometry, you must attempt to make it. (Rounded rectangles, clipped chunks, etc.)
• Repeated elements only count as one module, even if there are minor variations, e.g. different photos or different text do not count as different components
• Component may be nested
• Do not choose a project that is too ambitious!
• You may choose a mobile or desktop design.
• You can do just one or two pages of a multi-page design as long as it has at least 10 components.
• Please cite the designer of your website or app, especially if you plan to use this on a portfolio afterwards (give credit where credit is due!).

Please submit your Figma file (.fig) file to URCourses by the due date. Also include the URL to the design you attempted from dribbble in a separate text file.

---

Figma, Figma Help Center, Figma, 2022

P. Guilizzoni, What Are Wireframes, Balsamiq Wireframing Academy, Balsamiq Studios, LLC

E. Key, Prototyping a WordPress Project in Adobe XD, Linda from LinkedIn, 2019