Figma is a vector graphics editor and prototyping tool – the first interface design tool with real-time collaboration. It’s what you use to make user interfaces in Sketch, but way better. And it’s free.
Figma has everything you need to design amazing user interfaces. But how do you actually frame in Figma?
The first step is to create a new frame. To do this, click on the “+” icon in the left sidebar and select “New Frame” from the dropdown menu. Alternatively, you can press the shortcut “Cmd/Ctrl + N”.
Once you’ve created your frame, you can start adding elements to it. To do this, click on the “Add” icon in the toolbar and select the type of element you want to add from the dropdown menu. Alternatively, you can press the shortcut “Cmd/Ctrl + Shift + A”.
There are three types of elements you can add to a frame: vector shapes, bitmap images, and text. Vector shapes are perfect for creating simple illustrations or icons.
Bitmap images are best for photos or complex illustrations. And text is great for adding labels or instructions.
Once you’ve added an element to your frame, you can move it around or resize it using the selection tool. To do this, click on the element and drag it to where you want it. Alternatively, you can use the arrow keys on your keyboard to nudge it into place.
To resize an element, click on it and drag one of the handles that appear around its edges. Alternatively, you can use the shortcut “Cmd/Ctrl + Shift + R”.
You can also change an element’s properties using the Inspector panel. To do this, select the element and then click on the “Inspector” tab in the right sidebar. Here, you can change things like an element’s color, stroke weight, or font family.
Figma is a powerful tool for creating beautiful user interfaces.
