knowledge-kitchen / course-notes

Figma - Wireframing & Rapid Prototyping

These are shorthand notes on core concepts in Figma that assist in rapidly wireframing and prototyping application designs.

Design files and FigJams

At the time of this writing, Figma offers two types of documents: “Design files” and “FigJams”.

• Design files are useful for wireframing, visual design, and prototyping.
• FigJams are useful for brainstorming, jotting notes, and creating site or app maps.

These notes will be about Design files, since they are the more complex of the two. FigJams are relatively self-explanatory.

Frames

Frames are the “artboards” within which you will design each user interface screen of your application. Frames can be created in a variety of preset dimensions that match common mobile, tablet, or desktop device screen sizes.

Rename

Once created, you can double-click on a Frame’s name to rename it to something that accurately describes what it is intended to represent. For example, a screen representing the Home screen of an app should be named Home.

Autolayout

One of the most valuable features of Figma is its ability to automatically lay out the contents of a frame, either horizontally or vertically. Any objects placed within a Frame set to Autolayout will be automatically arranged a consistent distance apart. This spacing can be modified in settings.

Adding shapes and text boxes

Shapes and other objects can be placed within a given frame. For example, wireframe diagrams of a given user interface screen will typically be composed of rectangles and text placed within a frame.

Make sure you place shapes, text, and other objects within a Frame, not outside of it. You can use the “Layers” panel on the left to organize shapes, text boxes, and other objects.

Object widths and heights

Objects can be given widths and heights in a few different ways:

• a “Fixed” width and height, where a specific pixel size is desired.
• “Hug contents”, where the object will be automatically sized to fit the contents within it.
• “Fill container”, where the object will be automatically sized to consume as much width and/or height within the frame or group that contains it as is possible.

Very often (but not always), we want the width of an object to be “Fill container” and the height to be “Hug contents”.

Groups

Shapes, text boxes, and other objects can be grouped together. The group becomes a sort of container so the objects within it can be manipulated as a single entity. Grouped objects can always be ungrouped.

Objects within a group can be manually laid out or the group can be given its own Autolayout settings.

Autolayout for groups

Groups can have their own autolayout, which affects only those objects nested within the group. This is useful for creating horizontal layouts with sub-sections of an otherwise vertically-laid out screen.

Note that once the group has had Autolayout applied, it is usually necessary to click into the sub-objects of the group and adjust their width and/or height settings to ensure they are sized correctly.

For example, in a group that uses Autolayout to lay out its nested objects horizontally, it is often desireable to have the group width set to “Fill container”, its height set to “Hug contents“and also set the width of the nested objects within the group to “Fill container” and their height to “Hug contents”.

Modifying the layout of a group may inadvertently modify the width of the container object surrounding that group (e.g. the Frame within which the group is nested). In such cases, it’s easy to fix the group’s container by clicking on it and updating its width in the settings.

Components

It is common, and often desireable, to reuse the same shapes or groups in multiple places within an app design. For example, every screen of an app typically has the same header and footer. As another example, in an e-commerce app, all product thumbnails follow the same layout with a small-ish product photo with the product title usually below it.

With Figma components, it is possible to design a shape or group once, reuse it in multiple places, and update all occurances of that shape or group at once by updating the original copy of it.

Finding the original

Sometimes it’s unclear whether you are clicked on an original component or a copy of the original. You can always navigate to the original of a component by clicking “Go to main component” in the context menu of any copy.

Prototyping

Once several screens have been designed, it is possible to create a clickable prototype from them. To do so, click the “Prototype” tab in the right panel.

Overlays

By default, when a link in the prototype is clicked, the app will navigate to a new screen entirely. However, it is also possible to load an “overlay” on top of the current screen instead that will return the app to the underlying screen when closed.

Status bar

On some mobile devices, the front-facing camera is embedded in a notch at the top of the screen. This may overlap the top of your prototype screens.

To fix this, either add extra margin to the top of your screens to push down the rest of the diagrams or add a status bar at the top of each screen. There are several examples of status bars published in the Figma Community that are free to use in your own projects.