Figma Design Handbook (P.t 1)
How to Start your Journey as a Designer with Figma
This article is aimed at getting you familiar with the tools on Figma. Let us start with the first tool you’ll need to make a responsive design.
- Frame Tool: The frame tool creates an art-board for your designs. It is located at the top left corner of the screen and when you click on it, displays a couple of screen sizes on the right toolbar. Figma has a couple of screen sizes which makes it easier to start your designs. From smartphones to laptops to social media banners, watches and paper sizes.
2. Slice Tool: The slice tool allows you to divide an image into smaller sections which fit together like a jigsaw (but with straight edges). Image slicing is useful if you have a large image, by breaking it into sections. Portions of the image will begin to load first, letting the user know more is to come. This is helpful for users with a slow connection.
3. Shape Tools: The shape tool foldout menu shows 6 different tools. These tools allow you to create any geometric shape imaginable. Squares, triangles, rhombi, trapezoids, and hexagons can be created. They can be used as buttons and other user interface components.
Tips & Tricks:
- Hold the Shift key while dragging out shapes for perfect squares, circles, and polygons.
- Hold the Option key while dragging out shapes to size them from the center.
4. Pen and Pencil Tools: The pen tool is the best tools for designing vectors. It allows you to define your own anchor points, as well as adjust the curve associated with those anchors, by manipulating two control points associated with each anchor. The pencil tool is more illustrator focused as it is used to draw freeform lines by dragging the cursor along the stage. It can be set to draw straight lines and smooth curves.
5. Text Tool: The text tool is one of the most powerful tool in your toolbox because it opens the door to a multitude of pre-designed font libraries. Figma is compatible with any google font as they are already imported to your board. If using the desktop app external fonts can be used if you have the font installed on your pc. But you need to have the Figma font helper package installed if using the web version.
To place text in your canvas you need only select the text tool from the toolbox and click on the canvas in the area you want the text to appear. When you do so, a text toolbar will appear on the right which can be used to change the font, font size, line height, line spacing, Paragraph spacing, justification and other text options.
6. Comment Tool: Figma has a comment tool in the app that allows you to pin comments to design directly. This allows clients to communicate with designers in real time which leads to faster product delivery. To use this, click on the comment tool or tap “c” and pin the comment icon on the layer you want to comment on. If multiple designers and clients are on a board, you can sort out messages with the use of @mentions to get the attention of people easily; you just type the symbol “@” followed by the person’s name and they get an email notification and also a notification on Figma.
7. Move and Scale Tool: The move tool allows you to move a selection or entire layer by dragging it with your mouse. It is the first tool on the toolbar and can also be selected by pressing “v”. By default, if an area is selected, the selection will be moved, otherwise, the whole layer will be moved. The move tool can be used for other functions such as copying layers plus selecting and aligning multiple layers. To align multiple layers, select them and use the alignment bar at the top right to align the layers.
The scale tool is used to increase the size of a layer while keeping the same proportions. Let us say you have a circle of 35x35px, the scale tool can increase and decrease the circle such that it can only be 25x25px and not 25x26px.
With these tools, you should be able to start a design with Figma, so start practicing. My next article will be about some more complex tools and the use of constraints in Figma.
You can join us on Slack at https://figma-africa.slack.com, follow us on twitter at https://twitter.com/figma_africa
