Figma should help you prototype your product during the Prototype stage. Keep in mind that the base for your prototype should be an outcome of the Model stage. At the same time, the outcome of the Prototype stage should be a base for the Test stage.
Figma, as a tool, can be divided into 2 parts:
Our Figma classes are divided into 2 parts:
Craft is important, but it’s not the most important thing. The most important thing is to create a good design. Craft is just a tool that helps you create a good design.
In other words, it’s better to have a good design with not-so-good craft than a bad design with good craft.
If you need a consultation regarding the Prototype stage or just want to talk about Figma, feel free to book a meeting with me using my appointment calendar.
Figma’s interface can be divided into 5 parts:
Navigation on the canvas can be hard at the beginning, but you will get used to it quickly. There are 2 main navigation actions: pan and zoom.
There are a few ways to pan the canvas:
Space key and drag the canvasZooming can be done in a few ways as well:
⌘/control key and scroll the mouse wheelZ key and select the area you want to zoom in; hold ⌥Z/alt Z and click anywhere to zoom outFigma has a few basic tools that you will use most often:
When working in Figma, you should focus on reusing your design decisions as much as possible.
Use Text styles to store your typography for different use cases.
Since Figma recently introduced Variables, you might not need to use Color styles, so store your palette using Variables. Color styles could be useful for storing gradients and more advanced fills.
There are also Effect styles and Grid styles, but you won’t need them for now.
Components are one of the most important features of Figma. They allow you to create reusable elements of your design. You can create components from any layer or group of layers. Typical examples of components are buttons, navigation bars, text inputs, cards, etc.
Components fall into 2 categories:
Instances don’t have to be exactly the same as the main component. You can override many properties of the main component in its instance. For example, you can change the text in the button or swap the icon inside it. Be careful with overriding too many properties. Usually, you should limit overrides to:
If you want to override more properties, you should consider creating a new variant of the main component. Variants are just slightly different versions of the main component. For example, you can create a variant of the button with a different hierarchy (Primary, Secondary, Tertiary) or a card with a different layout (Horizontal, Vertical).
All components can be accessed in the Assets tab in the left sidebar (⌥2/alt 2).
Placing elements in the view absolutely, using defined x and y coordinates, is not a common practice – at least during implementation. Most views of digital products are built relatively to each other and to the view itself, using more automated layout techniques.
Many of the elements are sized relative to the content they contain. For example, the width of the button could be based on the width of the text inside it.
Figma helps you build your views in the similar manner they are implemented in the development process – which is a really convenient approach. This feature is called Auto layout, and essentially it is just a set of rules applied to the container and elements nested in it.
You can turn any Frame into an Auto layout Frame (container) by selecting it and clicking the + button in the Auto layout section of the Design panel. You can also “frame” elements into an Auto layout Frame by selecting them and clicking the same + button. Shift A is a very useful shortcut here.
Container settings are divided into 2 parts: sizing and layout.
Sizing rules can be found in the top section of the Design panel and can be applied to both width and height.
Layout rules are located in the Auto layout section of the same Design panel.
Each element inside an Auto Layout container could have its own sizing settings. You can find them in the top section of the Design panel.
Prototyping is the separated mode of Figma, which allows you to create interactions between your views. You can enter Prototype mode by clicking the Prototype tab in the right panel. You can also switch easily between Design and Prototype modes by pressing Shift E.
Actually, this is not an interaction feature but allows you to build more realistic prototypes. In many digital interfaces, some elements are fixed and don’t move when the user scrolls the view.
You can fix any element by selecting it and choosing the Fixed (stay in place) option in the Scroll behavior section of the Prototype panel. Unfortunately, you can’t fix elements in the Auto layout Frame easily, but we will cover this topic later.
The most common interaction is navigating between views. You can create a navigation by selecting an element and grabbing the + icon from the element’s edge and pointing it to another view. You can also select an element and click the + icon in the Interaction section in the Prototype panel.
To customize this interaction, you can choose different transition types and set the duration of the transition, but don’t focus on this too much at this stage.
It’s quite common to have a Back interaction in your prototype. It saves you some time of setting every interaction twice.
You can create a Back interaction by selecting an element and grabbing the + icon from the element’s edge and pointing to the ↰ icon in the top-right corner of the element’s view. Figma will create an interaction that will navigate back to the previous view and even reverse the transition.
There are certain UI elements that are used in many places in your design and always lead to the same view. The best example of this is bottom navigation bar.
You can set up an interaction in the Main component in the same way you would do it in the regular layer/element. Such interaction will be applied to all Instances of the Main component. However, keep in mind that if you override something in the Instance before, you would need to reset it to the Main component state and apply overrides again – Figma simply cannot propagate interactions to elements that were overridden.
If you use reusable elements that are not full-screen views and want to present them from different views in your prototype, you can use Overlays. They are just standalone views that can be presented on top of other views.
You can create an Overlay by selecting an element and grabbing the + icon from the element’s edge and pointing it to the view that should be displayed as an Overlay. Then you will need to change Navigate to to Open overlay in the popup window. There you can also set the transition, Overlay position, appearance of the so-called scrim, and a few other settings.
Figipedia is a sample project that I created to inspire you and to help you understand few concepts:
Keep in mind, that it’s not the final project and it covers a very limited scope. Your projects should cover all scenarios, and have more comments and descriptions of your design decisions.
To allow you to focus on designing your product, I created a components library that contains many common components you might need to design your product. It doesn’t mean you won’t need to create your own components, but it should save you some time.
Soon this file will also become a template for your projects, consisting not only of components but also of a predefined page structure, file cover, etc.
Draft of the components library
During the course, we will create and use a few resources. You can find them below.
Figma allows you to create free educational accounts. These accounts allow you to create Education Teams, which have the same features as paid Professional accounts.
Get verified.School not listed.SWPS University of Social Sciences and Humanities.https://english.swps.pl/Since Figma is a browser-based tool, you can use it in most modern browsers like Safari or Chrome. However, I suggest downloading the desktop version, which has a few extra features compared to the browser version. You can find it at https://www.figma.com/downloads/.