Figma is an amazing piece of software. As a web-based tool, it won’t flood your computer with big files, so you can work on your favorite projects quickly and without interruptions. If you’re more comfortable with an app, you can easily download it for macOS and Windows.
If you’re just getting started with Figma or plan on doing it soon, here is a short and step-by-step guide with the essentials you need to get going.
Why should you use Figma?
A few of the many features that make this tool truly special include:
– Web-based files that allow you to save space on your computer
– Both web and desktop app interfaces to work fast and without interruptions
– Annotation tools to facilitate real-time collaboration
– An accompanying mobile app to view prototypes, Figma Mirror
– Accessible pricing: it’s free for individuals
– Works on macOS & Windows
– You can import files from Sketch (it doesn’t work the other way around)
What can you create with Figma?
While initially adopted by product designers, Figma offers a wide range of design possibilities beyond that field. Aside from wireframes, prototypes, and UI elements, you can also use it to create mockups, social media posts, icons, collages, marketing collateral, and even logos.
How to get started
1. Create your account
Head over to figma.com and create your free account. Then select Design File + from the right-side menu.
Tip: You can also take the quick guided tour
2. Interface
Let’s have a quick look at Figma’s interface.
Tools menu: In the top left menu you will find the tools that you will use to create your designs. Have a look around and explore these options:
- Main menu
- Move tools
- Region tools
- Shape tools
- Drawing tools
- Text
- Hand tool
- Add comment
Layers/Assets/Page 1: In the left-side menu, you will find every element that you create. We’ll go into details later on.
Inspect panel: In the right-side menu, you will find the property values for your work. You can see there are three different tabs:
- Design
- Prototype
- Inspect
3. Canvas
When you create a new design file, the canvas will appear. This is your full workspace in Figma.
4. Frames
Frames are Figma’s artboards, if you’re familiar with those from Adobe’s Creative Cloud apps. To create a frame, select F on your keyboard or head over to the Tools menu and click on the Frame icon. Select from a wide range of presets:
- Phone
- Tablet
- Desktop
- Watch
- Presentation
- Paper
- Social media
- Figma Community
Tip: Frames are the parent object, allowing you to control every child (element) within.
5. Vector shapes & colors
You can select among the default shapes available in the Tools menu:
- Rectangle
- Line
- Arrow
- Ellipse
- Polygon
- Star
- Images
Tip: Hold shift to keep proportions in place.
Pen Tool
If you want to get creative or you have a complex shape to draw, you can use the pen tool (P).
Colors
Select the color of the shape from the right menu, under Fill.
6. Layers
They automatically appear once an element is created. You can access them in the left menu.
Tip: You can nest frames within other frames!
7. Groups
You can group layers with cmd + G to keep your files organized.
8. Pages
Pages are in the left-side menu and you can use them for different sections of your project, e.g. Wireframes, UI.
9. Images
If you want to use images, you can easily drag & drop them into the canvas. Figma allows adjustments if you click on the image icon in the Inspect panel like exposure, contrast, saturation, etc.
Tip: There’s also a Creative Market plugin for Figma you can use to pull thousands of assets that are ready to license and use, without leaving the app.
10. Typography
Press T or search for the icon in the Tools menu and start writing. Figma has all the Google Fonts installed already, but if you want to use other fonts you can install Figma Font Helper and work with your own desktop fonts. You can play with the text properties in the Inspect panel, such as size, color, letter spacing, etc.
11. Styles
Styles are a super cool Figma feature that allows you to save repeatable properties like colors, text, shadows, and grids. You’ll save a ton of time just relying on these definitions as you work through your frames.
To define a color style, pick your hue, head over to the Inspect panel under Fill, click on the icon with the four dots (Styles), and then on + to name and save your color.
To create your own text styles, click on the Style button in the Inspect panel and click on +. Done! You can repeat this same process to store grids and effects like shadows and blurs.
12. Components
Components are elements that help create consistency in your projects. There are Master Components and Instances. The Master Component is the one setting the property values; editing this one will affect all of its instances.
To create a component, select a group of layers and right-click Create component or press opt + cmd + K.
13. Constraints
Constraints define how objects behave when a frame is resized. The constraints are set by default to Top and Left. You can edit these in the Inspect panel under Constraints by selecting the elements in your frame. You can apply them on both the x (horizontal) and y (vertical) axis.
14. Keyboard shortcuts
To speed up your work, you can find the keyboard shortcuts in the bottom right corner of the screen. Click on the circle button ? (Help and resources) > Keyboard shortcuts, or simply press ^ + shift + ?.
15. Prototyping
Prototyping is very useful to form an idea of how users can interact with a product you’ve designed. You can create connections, interactions, animations, and preview your prototype. Here are some basic definitions:
- Connections are made between frames and elements within the frames. Make sure to click on Prototype from the Inspect panel to create the connections. Click on your element/frame and you’ll see a circle appearing. Click and hold to direct your connection to a new frame.
- Interactions and animations: Once you’ve created your connection, the Interaction details will appear. Choose from a wide range of interactions and animations.
- Prototypes: When you’re ready to play with your prototype, click on the â–¶ button on the top-right of your screen.
Tip: Install the Figma Mirror app for a realistic mobile experience
16. Collaborating in real-time
You can work on the same project with your team in real-time. Here are some handy tools to make that easier:
- Comments: Comments are great for sharing feedback with your team. You can access them in the top left menu or simply by pressing C.
- View mode: When you share your design, make sure you know in which mode it is. From the drop-down menu after you click on the Share button, select either can view or can edit. The view mode is great for sharing with developers.
- Edit mode: To share your designs with your design team, make sure you have the edit mode set on.
17. Exporting files
When it comes to exporting files in Figma, you’ll see several options. Keep the following in mind:
- SVG – for vector files
- PNG – for images and graphics with transparent background
- JPG – for all images
- PDF – for high-quality pages
In terms of sizing, 1x is the actual size. You can export assets at 2x (twice the original size), 3x, 4x, or you can type out other multipliers.
Tip: To export a document as PDF with frames as pages, click on the Figma icon in the Tool Menu > File >Export Frames to PDF.
Practice Makes Perfect
We hope this guide to Figma’s essential features inspires you to explore the tool and start using it to speed up your projects. Explore our Figma Finds page for more tools to power your workflow and apply the skills you just learned.
Check off these items before you go live and make sure that your visitors get the best possible experience.
Download your checklist
Hi! I'm Luna, a designer & illustrator. I love crafting templates & graphics for you!
View More Posts
