knowledge-kitchen / course-notes

Rapid Prototyping in Figma

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”.

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


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.

Create a frame


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.


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.

Turn on Autolayout

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.

Create a shape or a text box

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:

Width and height settings

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


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.

Create a group

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.

Autolayout for groups

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.


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.

Create a component

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.

Finding the original of a component


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.

Create a prototype


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.

Create an overlay