We've covered all the basic concepts you need to understand when making the switch from Sketch to Figma. Hopefully you have a better sense of how the tools compare and differ. Before leaving you I wanted to share a few other miscellaneous tips and tricks that may help your adjustment, from which keyboard shortcuts you should memorize to hacks for importing style properties from Sketch.
A lot of the keyboard shortcuts should be the same when transitioning from Sketch to Figma, however there are a few different ones that might throw you off. To see all of our shortcuts we have an awesome interactive panel that lets you know whether you've used a specific shortcut or not. You can access this by clicking on the question mark in the bottom right of Figma, and then on Keyboard Shortcuts or...surprise...by using the shortcut
Unfortunately we don't offer the ability to create custom shortcuts at the moment, but we hope this is something we can build out in the future.
Figma should feel like home rather quickly. Here's some of my top navigation shortcuts that I use all the time to get around:
Command + /to quickly traverse the menu. When using this shortcut it opens up the file menu with the search field activated. This lets you quickly search for a command without ever needing to reach for your mouse or trackpad.
Note: I'm using the arrow keys to navigate up and down the menu and then use enter to select the desired item.
Option + 1to open up the layers panel,
Option + 2for the assets panel, and
Option + 3for the Library Modal. These 3 shortcuts make it super quick to navigate between your library, components, and layers. I use them all the time.
Shift + Command + to navigate between tabs in the browser or desktop app. I usually work out of the desktop app, and this shortcut lets me quickly go back and forth between different files.
Like I said above, there are a few things that Figma unfortunately can't bring over from Sketch, like styles. This tip should help you overcome these challenges in the migration process:
Select all with...This command lets you select everything within the page that has the same property like fill, stroke, effect, font, etc. You can then use this command to help quickly turn a bunch of objects back into styles or components.
Figma has some amazing prototyping features and a built-in code panel to help with handoff. However, if you and your team are already in the workflow of using something like Zeplin or Principle, no need to worry, we support these along with a few other integrations. Here's where to find them:
Sometimes it takes seeing how others do it before it hits "home". So, here's a collection of articles that are from our community about why and how they switched from Sketch.
While there are still a ton of amazing features, workflows, and tips that I didn't cover, I hope this article is a start in helping you with your move from Sketch to Figma. If you're looking for more information on a specific topic, I highly recommend checking out our help center, our YouTube channels, as well as getting involved with our community on Spectrum. Also, as always, if you have any questions feel free to hit me up on Twitter.
Welcome home! :)