What's different

Figma's UI should feel familiar to Sketch users for the most part, however there are some core differences with our information architecture that are important to grasp early on to help ease the transition.

Sketch artboards => Figma frames

In Figma we have a parent object called a frame. Similar to artboards in Sketch, frames are used to contain content. However, unlike artboards, frames have default constraints and can be nested within each other. Think of them more like powerful groups or divs as opposed to just artboards.

Frames also have a few additional properties like a background fill and multiple layout grids (more on that later). They also give you the ability to clip or unclip nested content. We offer frame size presets based on devices (Google Pixel 2 phones, iPad mini tablets, Apple watches, etc) or use cases (letter paper, Instagram post, Twitter header image, etc). You can find all of these settings in the properties panel on the right.

Creating frames in Figma is super easy too, in fact you can still use the shortcut "a" from Sketch to create them. You also have the option to use the shortcut "f," or the dedicated frame tool which is located just to the right of the move tool.

Sketch symbols => Figma components

In Sketch, symbols are a great way to reuse elements throughout your design files. In Figma, we have something similar called components. The ideas underpinning components and symbols are the same, however our approach has a few unique differences.

When you create a symbol in Sketch, it adds it to a page in your file that acts as a container for all of your main symbols. You can then use instances of these main symbols in other pages throughout the same document. Editing these instances (like changing the text of a button component) is done via the overrides panel on the right. If you need to edit the main symbol, you'll have to go back to the symbol page and edit it there. Essentially, in Sketch, main symbols and instances can't live in the same page, which can sometimes make it difficult to edit symbols without the proper context.

In contrast, Figma lets you manipulate the instances of your components directly on the canvas. Want to override the color of your button in an instance? Just change the color. Need to tweak the text? Double-click the text object and do it! No need to navigate to an overrides panel to make simple changes. While we might be a bit biased we believe this method is more flexible and makes creating and editing components/instances much simpler.

Another benefit to our implementation is that main components and their instances can live on the same page. This makes creating and editing components much easier because you can see, in context, how the changes affect all of the instances. In my initial design creation phase (before I organize and publish my components to the library), I find it super helpful to have components and instances next to each other on the canvas.

(That said, most design ops teams prefer to keep all their main components in a separate file. That way, they can control the edit permissions for the design system that's used by the whole company.)

Libraries

Both Sketch and Figma have libraries, which make sharing and consuming a collection of components easier. In Sketch, libraries are just .sketch files that you can specify as a library within the preferences panel. Then you can access the symbols contained within that Sketch file in other files.

Figma libraries work a little differently. First of all it's important to note that the team library is a paid feature that's part of our Professional plan. You can still create components on the free Starter plan, you just can't access them across different files. Again I'm biased, but even before joining Figma I paid for the Professional plan as a freelancer to use the team library. Totally worth it! You can learn more about our pricing here.

The team library in Figma allows you to publish your components, and then access them across different files and projects. Unlike Sketch, when you create a library in Figma we publish only the components from the file (not other elements). In fact, you can specify exactly which components you want to publish.

If you don't want a particular component to get published (maybe it's not finished yet, or you only plan to use it in one file), just add a period at the beginning of the component name. Alternatively, right click it in the assets tab in the layers panel and remove from the library.

To get started with publishing components, go to the assets tab (in the left-hand layers panel in Figma) and then click on the Team Library button. Here you'll see the name of your file and a publish button. After publishing, you can add an optional description (I like to think of these as commits). Put in details that will help you keep track of what you're changing and why.

Overall, you'll improve your workflow with components a lot by taking advantage of Figma's library functionality, especially if you're part of a team. If you want more information on components my colleague, Tom, wrote a best practice guide that goes into much more depth about how to name, structure, and use components, libraries, and styles (which we'll go over next). I definitely recommend giving it a read.

🔎 Pro tip: To make sure a component doesn't get published, just add a period at the beginning of the name.

Styles

In Figma we currently allow you to create four different types of styles — grid, color, text, and effect. They can be used locally and/or published to your Team Library.

Like our component and library functionalities, Figma styles work a little differently than Sketch's do. Instead of bundling certain properties together, like color and text, we broke them apart into their own unique styles. We found this modular approach made it easier for designers to adapt styles across different use cases because the styles themselves were more flexible. In contrast, in Sketch (at least up until recently), you would have to create multiple text styles for each color and alignment.

Creating styles in Figma is done by simply clicking on the little square icon made up of four dots. You'll find this button under the text, color, effect, and grid sections within the properties panel. This brings up a dropdown with all of your current styles that you can select from. To create a new style, just click on the plus button in the top right corner of the dropdown. From here a modal will appear that will let you name and create the style.

You can learn more about best practices for using styles in that same best practice guide from Tom, or check out our help content too.

One note: Our system for creating and manipulating styles is a bit different from Sketch, so unfortunately they won't migrate over with you.

Constraints

Constraints in Figma will feel very familiar to Sketch, but there's one big difference: They're at the frame level — not the group. (You can read a quick primer on frames versus groups in Figma here).

It can take some time to get used to constraints that function like this, but there's a big upside: By having constraints at the frame level, you can create responsive-esque screens or even nest frames to create tables, etc.

Where you really start to see the power of constraints is when you combine them with layout grids. On to that next…

Layout grids

Layout grids in Figma are a bit unique compared to the grid options in Sketch. The first thing you'll notice is that they aren't limited to just the file/page level, and instead can be added to any frame of any size. You can also add multiple grids to a single frame, so having a 8 * 8px square grid, a 16px vertical baseline grid, and a horizontal 12 column grid is all completely possible. We even allow you to create styles out of grids so that you can publish them to your library.

I've found that adding layout grids to your components can help communicate padding or other spacing values. This shouldn't be a surprise, but again Tom has a great overview about how and when to use layout grids here.

Prototyping

I won't go too much into prototyping here. For more information I recommend checking out our help articles, our prototyping livestream, or our guide on prototyping best practices.

With that being said there is one thing that I wanted to call out that is different in Figma than Sketch.

In Figma, we allow you to prototype with any part of a component, whereas in Sketch you can only use the whole symbol as a transition point. The benefit of this is that you can actually set up the prototype connections from a master component (within the same page). Then when you duplicate it, thus creating instances, it will carry those connections over. This has a lot of great use cases, like quickly setting up a tab-bar navigation.

File Browser, Projects, and Saving

The last thing I wanted to touch on before getting into some tips and tricks is the File Browser. While this isn't anything revolutionary, you'll notice that Figma comes with built-in file management. This means that all of your files live in the cloud, so you no longer need to worry about sharing things with a service like Dropbox or Google Drive. This also helps keep your hard drive clear of all those Final, FinalFinal, and FinalFinalv2FINAL files. ;)

Here's the standard hierarchy of how files are organized in Figma:

Teams > Projects > Files > Pages

With the free Starter plan you're limited to 3 projects with unlimited files within them. Think of a project more as a space, not necessarily as a specific design project. When I was on the Starter plan I set up my 3 projects like so:

• Personal
• Client
• Resources

And then each of these projects had files within them. Eventually I needed more organizational flexibility and wanted to start taking advantage of the Team Library. So, after upgrading to the Professional plan my workspace looked more like this:

• Portfolio
• Client A
• Client B
• Client C
• UI Kits
• Icons
• Other Resources
• MISC files

With the Professional plan you can have unlimited projects and unlimited files within them. You also get unlimited version history and access to the Team Library features. If you're a part of a larger organization that's considering the move from Sketch to Figma, I'd recommend checking out our Organization tier. This offers unlimited teams, added security, SSO, and a bunch of other enterprise level features.

There's a few other things that might be helpful to learn more about within the File browser like Drafts, team settings, etc. I recommend checking out these resources here to dig deeper:

• The Power of Figma Drafts
• Files and Projects help articles

Now on to the tips and tricks...