A Newcomer’s Guide to Figma
There’s no better time to design together in the cloud
Imagine a world where designers can’t gather around a whiteboard and sketch together—now we’re living in it. While you and your team scramble to get ready for the remote design challenge, Figma might be a tool that’s already on your radar.
Figma has gained much traction in the design community since its launch in 2015. Our team switched to Figma in the past year (from our old favorite, Sketch), and now we’re glad we made the decision. So I decided to put together some resources that helped us during the migration, hoping they’ll speed things up for you, too.
Before you start…
This article may not be a good beginner’s tutorial. If you’re new to UI design tools, I recommend spending 30 minutes to go through Figma’s Getting Started playlist on YouTube, or follow this Figma tutorial on LinkedIn Learning.
As someone who’s interested in migrating to Figma or adopting it as your primary design tool, here are a few questions you may want to ask:
What’s so good about Figma?
- With a full-featured web app supporting most modern browsers, Figma doesn’t ask for a Mac
- Teamwork happen in real-time — it’s just like Google Docs for design
- Sharing made easy with files and edits saved to the cloud
- Figma replaces both Sketch and Zeplin with built-in design handoff features
- Figma found the final piece of the UI design puzzle: Auto Layout
Do I have to pay?
Figma offers a free Starter plan that meets the needs of many. If you’re a student, verify your student status and get a free upgrade to the Professional plan that unlocks unlimited projects and more control over your work.
Can I migrate my files from Sketch or Adobe XD?
Yes, you can! Figma officially supports importing from Sketch files. Simply drag and drop Sketch files into your workspace or follow this guide. For now, Adobe XD files cannot be imported directly, but here’s a workaround suggested by a Reddit user.
File structure in Figma
Figma’s file browser can look different from similar tools. Since everyone has unlimited storage in the cloud, normally files won’t be saved locally. And as a collaborative tool, Figma encourages you to set up teams and invite others to work together. Having separate team spaces helps you jumping between different groups you’re working with, or utilize that to set up a personal space.
Under a team space you may create multiple projects, and inside each project are files. Simply put: Figma’s 3 levels of file structure are team > project > file. Each team, project, and file can have different sharing permissions.
Here’s a video from Figma that walks through the process of creating a new document under this structure:
Frames vs. artboards
You’ll easily feel at home with Figma’s user interface if you’ve used other design tools like Sketch, InVision, or Adobe XD before. Pages, layers, and constraints all work as you’d expect, with frames being the only thing that stands out immediately.
Figma explains a frame as “a foundational element for your designs that can act as a top-level container, and represent areas or components”. Unlike an artboard in other design tools, frames can be nested.
You can define constraints for elements in frames, so when the frame is resized, the elements inside will move relatively. This is different from a group which resizes with its child elements. To learn more about when to use groups versus frames, check out this article.
If the terms mentioned above don’t sound familiar to you, here’s a 6-minute tutorial from Figma that explains what’s going on in the editor.
Collaboration and design handoff
You’ve heard so much about this—Figma’s multiplayer magic lets everyone design at the same time. Each player sees others’ edits in real-time, and knows where others are in the project by tracking their cursors. (In fact, our dev friends said they like Figma largely because they had fun stalking us when we were working 😄)
Built-in features such as commenting and code preview made design handoff much simpler. In the past we had to rely on the combination of Sketch and Zeplin (some also added Abstract to the combo), and now Figma replaces them all!
Using libraries, styles, and components
We all like the idea of “design once, use everywhere”, and many of us have been working hard on a scalable design system that follows the Atomic Design principles. However, the truth is design assets and code have different personalities, so it can be challenging to try to organize vector graphics in the same way as JavaScript snippets. And limitations of design tools often forces us to adopt cumbersome workarounds.
Figma streamlines the process and gives more control back to you. Unlike symbols in Sketch, components don’t have to live in a separate page. The master component stay where it is, and you can always find it through its instances.
And not only components can be reused—so can styles! Colors, text, effects (shadow & blur), and layout grids can all become reusable styles.
Styles and components created in one file aren’t limited to that file. They can be published as a shared library, and then be reused in other files or projects. And if a file has access to more than one shared libraries, you have the control of turning individual ones on or off.
Changes to components and styles can be synced across files, too. Edit a master component, and the next time you open another file that contains its instances, Figma will prompt you and ask if these instances need to be updated. Here’s a visual from Figma that explains the process:
… And more
There’s so much to learn about Figma, so create or import a project and get started! After you start to get along with it, don’t forget to take a look at Figma’s advice of best practices that helped us establish a handoff workflow.
Or at least try the Auto Layout magic!
Good luck, and have a good time designing in the cloud!
