This article was originally written by @joen. He has graciously given us permission to repost this here for the community.

---

You may have heard of Figma recently. It’s a web-app (with a hybrid-native version) that aims to solve the same problem Sketch solves: make it easy and fast to design and prototype software.

When two apps solve the same problem, why would you want to learn to use the new thing when you know how to use the old one? In this article I will go into why, and when, you should consider Figma, even if you already know how to use Sketch.

Why you should think about Figma

The first question we have to tackle is: what does Figma do better than Sketch, and do those aspects matter to you? The answer is that both are solid applications and they each have their pros and cons. So when you evaluate which one to use, we have to look at the strengths and weaknesses of both, and judge them based on your needs.

When it comes to Figma, the key reasons you need to think about boil down to just these two aspects:

1. It’s free for personal use, which means if you’re working with the open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. community, this removes a barrier to collaboration.
2. It’s cross-platform and even works in the browser, which further removes simplifies that collaboration.

There are additional niceties in this vein, such as the ability to share a file with only commenting privileges, or even just for viewing. Just the fact that you don’t have to bounce files and worry about versioning removes a lot of friction. As a result, if you’re working with the community Figma is unbeatable. In fact, if your design work involves anyone not on a Mac with a copy of Sketch, Figma is an inclusive choice.

What you need to know, coming from Sketch

In most ways, Figma and Sketch are incredibly similar. The excellent UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. Sketch pioneered you’ll find mostly the same in Figma. There’s an infinite canvas, layers are on the left, contextual properties are on the right.

The first thing you’ll want to do to give Figma a proper shake is to install the desktop app.

While it’s not a “true” native app, for actual design work it’s still worlds better than the browser version. In fact, despite the hybrid nature of the app, this mainly manifests itself a different way of handling files and a slightly longer time to start.

Tip: You can set your browser to automatically open Figma links in the app. If the browser doesn’t prompt you to do this, click the menu button, and click “Open in desktop app”.

Artboards & “Frames”

In Sketch, you’ll often use “Artboards” to create mini-canvases to export separately, and with a background color of your choice.

In Figma there are no artboards, and you can customize background colors, and configure options for exporting on any item, even groups. But the closest equivalent Figma has to an artboard is the “Frame”. The frame is meant to act somewhat like a viewport in the browser sense, which means if you resize the frame, items inside will scale themselves according to their constraint and scaling rules.

Frames, by default, “clip” (mask) the content inside, and Figma supports a number of preset dimensions you can set your frames to, to match various devices and screen sizes. For that reason, using a frame will let you accomplish mostly the same that you can with an artboard in Sketch.

If you want to convert a frame to a group, or vice versa, there’s a dropdown menu in the top right corner.

One nice aspect to frames is that you can click items inside a frame directly, whereas you have to double-click a group to “open” it, before you can select items inside.

Key tip: If you want to resize a frame and not have it skew/distort the contents, hold ⌘ while you’re resizing.

Libraries & “Assets”

In Sketch, as soon as you create a symbol, the symbol itself is moved to a separate “Symbols” page, and an instance is is created where you made it.

In Figma, symbols are called “Master Components” and are denoted with an icon showing 4 small diamonds. Symbol instances are called “Components”, and are denoted with a single big diamond shape.

When you create a new master component in Figma, it’s created instantly, and is stored right where you created it. This takes a little getting used to, but it also removes a great deal of friction, which may be good because components are so powerful in Figma. We’ll get to that aspect later in the article.

It can get messy, though, because master components can’t be nested inside other components. If you try and nest one, an instance will be created in its place, and the actual master component will be put somewhere else. One way to clean that up is to store your symbols in one place, just like how Sketch does it, and you can emulate this behavior in Figma:

1. Create a new “Symbols” page (or call it “Components” to embrace the Figma way).
2. Convert your item to a component (select it and press ⌥⌘K).
3. Copy the new component, then paste it in place (⇧⌘V) — the copy is an instance of the component.
4. Select the master component, right click it, and choose “Move to Page” → Symbols (or “Components”, if you called it that).

Because Figma doesn’t have a standard location for storing all your symbols, it has an alternative tool to help you search for the right item, called “Assets”. This is a tab that sits at the top of the layers panel. This allows you to see a searchable and organized grid view (you can choose a list-view for this too). Team Libraries — “published” Figma files created just to be component libraries — will show up here as well, and it’s a great way to use icon libraries.

Tip: Double-click the icon part of a layer, to center that element in the screen.

File Handling

While Figma has files (File → Save as .fig), the primary way of collaborating and sharing Figma mockups is through links. Click the blue “Share” button in the top right corner. You’ll find that it works almost exactly how it does in Google Docs: set permissions on a per-user basis, or on a per-link basis.

As you go about your day to day, habits from Sketch might not work well here. If you’re used to saving multiple versions of the same Sketch file for a project, incrementing a version number in the file name each time, you can do this in Figma as well: in the file browser, click the ellipsis button for a project and use the “Duplicate” option.

However there’s a better way: save a copy of the current state to version history. Click the Figma menu in the top left corner (⌘/) and choose File → Save to Version History (⌥⌘S). This stores the entire state of the Figma file at that point in history. You can later browse through this history and restore older versions. An old version that gets restored adds a new state to the version history, so you don’t actually overwrite newer versions when restoring. If you just need to to copy an element from the old version, you can right-click the item you want, and choose Duplicate to get a separate file version of that state, because sadly you can’t just select and copy an element from the past version, you can only view/restore/duplicate them.

Note: the free version of Figma only stores 30 days of version history. If you want unlimited version history, you need to be on a paid plan.

Other little things:

• Figma handles Sketch file importing reasonably well.
• You can, as of recent versions, copy and paste from Sketch directly into Figma.
• You can copy and paste vectors directly from Illustrator into Figma.
• You can drag SVGs or images directly into Figma, just as you could in Sketch.
• You can copy PNGs directly from your browser (right-click, copy image) into Figma.
• You can copy SVGs from your browser too, but these are converted to bitmaps. If you want to import SVGs, save them to your desktop and drag them into Figma.
  • Or, you can copy the SVG markup directly, and paste it into Figma and it will become an SVG.
• Animated GIFs don’t play in Figma 

Symbols & “Component” Overrides

Symbols are called “Components” in Figma, and just like how you can create symbol overrides in Sketch — aspects of a symbol that can be customized on a per-instance basis — so can you in Figma components.

In Sketch there’s a dedicated “Overrides” panel of the properties sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. This allows you to create a very friendly and inviting way to change properties of a symbol, such as the icon used or the text label of a button.

Figma has a very different interface to overrides, which can be confusing if you’re coming from Sketch looking for an overrides panel. You won’t find it, because instead of having a dedicated panel, the way you override properties of a component is to simply edit them directly. Where in Sketch, a symbol instance is “locked in place”, Figma lets you explore all the layers of a component directly, just as if it was a simple group:

• Hide or “delete” a layer to override the visibility of that layer in the component instance.
• Inversely, you can unhide any layer that is hidden in the master component. For example you might have neutral, hover, and focused states inside a single Button component and hide or unhide each layer in the instance to show the desired state.
• Double-click a text field to change the text.
• Change any color of a component. You can even change strokes and effects. You can remove them, hide them, modify them. Want a shadow on your button instance but not in the master component? Add it directly to the instance. Or, add it to the master component and hide it by default, then unhide the effect in the instance.
• You can change the instance to be that of a different symbol. By default, components of the same dimensions as the instance show up as “Related Components”. This is a great way to swap out icons.

There’s also a button to reset any overrides you created, it’s a little diamond with an arrow in it:

Delicious mystery meat!

Because you can add or remove any compenent style, hide or unhide any layer, in actual practice this makes Figma overrides significantly more powerful than they are in Sketch, where you’re limited to features that are surfaced in the Overrides panel.

The primary limitation of Figma component overrides, though, is that you can’t change the dimensions or position of a nested element. For example if you have a button component nested inside a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. component, you can’t change the size or position of the button, it is locked in place and acts according to the scaling constraints that are applied to it. The only exception is that a textfield will expand if you write longer text, unless that conflicts with its constraints.

Those scaling constraints are very powerful, though, and act as a mix of classic responsive design rules, and the constraints you might be used to from iOSiOS The operating system used on iPhones and iPads. app development. A key aspect of making highly reusable Figma components is mastering these constraints.

One use case is creating an icon that sits at the end of left-aligned text. By applying the right constraints, you can make that text editable, and still be able to make sure the icon sits where it needs to:

Constraints apply to every layer in the hierarchy, and when you combine them right, you can create some incredibly versatile components.

Tip: Right-click a component instance and choose “Go to master component”. This is useful if you need to change an aspect of a reused component and have it apply to all instances, or if you need to adjust the scaling constraints.

Aspects where Figma is still lacking

As you ponder whether the switch from Sketch to Figma will work for you, there are a few aspects of Figma that are still lacking compared to Sketch. Being mindful of these downsides is important for your considerations.

1. There is no official pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party support in Figma. While a third party project exists, you are essentially installing a non-official copy of Figma. As a result, there aren’t that many plugins available.

Figma is responding with a Web API that can hopefully one day accomplish what plugins can in Sketch, but it’s still limited, there’s only a read APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. So if extensibility is your jam, this is a space to watch.

2. Offline support just works in Sketch because of the local files. To be able to work with files offline in Figma, you have to use the native app, and you have to open the file first, before you go offline. Definitely something you can work around, but it’s also not smooth.

3. The Figma file browser doesn’t support folders. It’s a flat hierarchy, and you have to search to find files that aren’t in the “Recent” section. All files that aren’t published land in the “Drafts” section. It’s something you can get used to, and not that different from how Google Docs works, but it’s also a different way of thinking if you have an existing pattern for organizing your files.

4. You can’t resize nested elements of a component. As mentioned in the overrides section, while you can create very reusable components using nesting and smart constraints, you can’t resize nested elements. This very often bites you when you need to resize a button inside a component to make the text fit. The workaround is to detach the parent instance, which is not the end of the world, but it does make some components slightly less reusable. This is being discussed here.

Other miscellany

• Zooming:
  • Hold z and click to zoom.
  • Hold z and drag to zoom an area.
  • Hold z and ⌥ to zoom out.
  • Hold space to pan.
• Color Picker: Click the color swatch then use the arrow keys ↑ and ↓ to brighten or darken the color.
• Properties Panel: You can select a fill, stroke or effect by clicking the space around it. Then you can copy it (⌘C) and paste it on any other symbol or shape (⌘V) to paste the copied property.
• Groups: If you delete elements in a group, the group disappears. Similarly, if you create a text area and don’t write anything, it’s gone. No empty groups! 
• Images: When you add a bitmap image, it acts as a fill inside a rectangle (think background-image in CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.). This makes it easy to tile or mask the image by simply resizing the rectangle. Fewer masks! 
• There are basic prototyping tools built in. Click the “Prototype” tab in the Properties panel to get started.
• Drawing vector graphics in Figma creates “networks”, where a single point can have multiple connections, as opposed to just the two you know from Sketch or Illustrator. It takes a little getting used to, but in practice it works quite well, certainly better than Sketch ever did.
• You can copy the code for the appearance of any element, by picking the “Code” tab in the properties panel. It’s provides syntax for CSS, iOS and Android, admittedly in a somewhat rudimentary way, but definitely a cool little aspect.

There are quite a few more golden features in Figma, such as tools to help you with layout grids, the ability to add actual color swatches that can be applied to components instead of fills. But I will leave those as an exercise to explore once you’re more comfortable with the basics.

Should you switch?

At the time of writing, one can’t really suggest that Figma is better than Sketch, but also not the inverse. Both have their strengths, both have weaknesses, and the fact that they coexist means there’s healthy competition in the market which will benefit both. In fact, some of the key reasons to use Figma (works in the browser, great for collaboration) are in some shape or form heading to Sketch as well in 2019. Knowing that, should you switch?

You should consider switching to Figma if the strengths (inclusive of communities and non-designers) outweigh the downsides (learning a new tool, lack of plugin support).

You should not switch to Figma if those coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. strengths aren’t important to you or your team, or if you rely on a specific plugin or an established workflow.

Sketch is a wonderful app, and if it’s working well for you, stay with it. If you do mean to switch to Figma, maybe don’t do it if you need it for a project on a tight deadline, because although the learning curve from Sketch is small, it’s still there. Consider instead some practice projects, or complete a tutorial or two when you have the time. Then, jump in when you’re ready. I hope this write-up was helpful in your choice of design tools!

#figma, #sketch, #tools