Figma is a free / paid UI design software showcased in Microsoft's app design docs. It has 2 individual plans, free and $12/mo, but the paid version is free for students. On the other hand, Framer is priced the same way but doesn't have any education plan. This post will go over the basics of Figma, more advanced bits, and ways to prototype faster. This post will go over everything you need to use Figma, from document creation to component variants.
Once you have your account, create a file by clicking New Design File at the top. You will be greeted with a screen that looks like this.
To start designing, you will need to create a frame using the Frame tool (F). Once pressing F, the right panel will be changed to list screen sizes. Choose the device type, and it will create a new white rectangle of that size.
Now, you can create items in that frame using certain tools. A list of tools are
- Rectangle (R)
- Line (L)
- Arrow (Shift + L)
- Ellipse (O)
- Polygon
- Star
- Pen (P)
- Pencil (Shift + P)
- Text (T)
- Upload (Ctrl + Shift + K)
Like in most programs, grouping objects make them act as one unless ungrouped or double-clicked. You can group objects with Ctrl + G and ungroup with Ctrl + Shift + G.
Components (Ctrl + Alt + K) are where things start to get more advanced. Components are another type of group, but with the ability to create variants. Once you create one, it duplicates the component and allows you to edit it and set properties. Now, imagine a component with variants for all of these properties (Property -> Variant)
- type
- style1
- style2
- disable1
- disable2
- state
- default
- hover
- pressed
- icon
- true
- false
- size
- large
- medium
- small
- color
- light
- dark
This style set has 144 possible combinations, but instead of having 144 assets, you could have 1 asset with 5 dropdowns and 4/3/2/3/2 options in those dropdowns. Here is Figma's example for buttons:
To create a variant, click on a component in the file tree and press the Create Variant option on the right. This adds a property and a property variant, but only for the first one. Subsequent ones will require you to create a new property or property variant. You need to click on the dropdown for selecting a property / property variant and click Add New. Rename it, then edit your design. By default, Figma sorts variants in a list. When you select multiple then hover over a variant, there will be a pink circle over it, this allows you to reorder them. Just make sure you have enough space by selecting the component name then resizing it.
I recommend either putting designs in a new document or on a separate page. You can add a new page by going to the Page 1 button next to Assets, then pressing the +. Move items by dragging them from the file tree onto the new page. If you decide to do a style document, go back to Figma's dashboard, then move the file into a Team Project. Note that you do have to have a Professional plan to do this, remember that students do get this. Go to the team settings, then enable libraries, then choose the products team members should access this sheet from. Lastly, in the Prototype tab, you can make the variant change with the Change To statement.
That's all you need to know about Figma, there are lots of other design tools but due to the plan and features of Figma, it is arguably the best value out there. Off-topic, but make sure to check out Fleet, JetBrains' newest IDE and might be a VSCode killer. Thanks for reading!