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. Create a component to be filled, like a rectangle
  2. Click on the fill color
  3. Change the fill type from solid to gradient

  

1. You can set the individual points in the gradient in this area

   

2. 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, select the two foreground circles

• click on the union operation. This makes a composite shape comprised of the two foreground circles.
• again, using select, in order click the background circle then shift-click your new union
• from the menu, select Subtract Selection
• This will create a new shape with the other two parts cut out

Here are the merged results. You could also add a third circle to the background and modify the color to make the icon stand out against light backgrounds:

Experiment with some of the other boolean operations

Learn more about boolean operations here

Groups

• As we would like our person with a background icon as one object, we can group it
• 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

Vector Operations

• An alternative approach to creating interesting shapes is to turn your primitives into raw vector data, and modify control points from there!
• You may also wish to start with pen tool, and other primitives (disabling fill but enabling outline)
• Let’s try to make this globe from fontawesome.com

• duplicate (ctrl+d), flip horizontal (shift+h), and slide it over to the right

• finish with a line

Hint - you can also double click on rectancle, circle, etc. and switch to vector mode where you move around control points, e.g. to make a trapezoid or parallelogram. Yay geometry!

Learn more about vector operations here

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
  • Based on the documentation, it is growing quite rapidly in scope, but we’ll just scratch the surface.
  • Let’s make a little keyboard
    • Create an inner key, (rectangle, rectangle, tweaks, letter)
      • Group it!
      • 
    • Duplicate the group
      • Shift it to the right (shift + drag)
      • Now you have two groups
      • 
    • Group the groups
      • the tree is now
      • 
    • Select the outermost group
    • Select the autolayout on the right, choosing horizontal
      • This creates an auto layout
      • 
    • Pop back inside the tree, and duplicate another key
      • It will join the auto layout horizontally
      • 
    • Autolayout provides tools to modify elements together, such as spacing between them, and much more
    • 

A guide on autolayouts

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
    • paste, or drag and drop an image in
    • adding a shape on top, like a circle
    • right click on the shape, and click Use as mask (Ctrl+Alt+M)
    • in the layer pane, drag the image above the mask (it should nest inside)
    • 
  • as with the boolean operations, this process is non destructive
    • the image can be fine tuned by double clicking it and them manipulating it
    • the circle can be manipulated too
    • you can also add multiple things inside the mask, like an alpha gradient to tink the image

• Once you are happy, group it, and then you can move it around as a single object.

• 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 a graphical element is a photograph or render, you may either use a screen-capture to isolate the image, or find a similar image on the internet. A max of 3 elements can be just pictures - if your design has more pictures, that’s fine, but you’ll need at 7 least seven additional components.
  • If the images are masked, you should try to mask them too!
• If an element is not an image, and is just geometry, like an icon, you must attempt to make it using the vector manipulations operations we saw in figma. (Rounded rectangles, clipped chunks, pen tool, boolean operations, 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, e.g. a card with an icon, a title and a tag
  • This would count as 4 elements - one for the overall layout, and one for each component
• 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 your portfolio for this class. (Give credit where credit is due!)
  • You should not be using this on your portfolio in general as you didn’t actually design the layout, colors, etc., this is just an excercise to hone your skills.
    • Using what you learned to make your own design would make an excellent portfolio piece, but is well outside the scope of this lab activity!

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