Mike Ashurst
Updated on 27 Jan 2022 · 6 minute read

Why we prefer to use Figma instead of Sketch

Contents

Figma is one of the latest programs which we have started to use, and ever since changing from Sketch we've loved every minute of it. We loved it so much we just had to do a post about it!.

Why we prefer to use Figma instead of Sketch Hero

Introduction

Sketch has been our primary design tool for quite some time now here at Shape, until we heard about the new

We started using it as an alternative to Adobe Photoshop, We did a blog comparing the 2 a while back, Sketch vs Adobe Photoshop. Let me tell you it was a breath of fresh air, with its modern interface, Artboards on one canvas, it had plugins to help with the design process.. We thought it couldnt get any better.

And then Figma came along, with a load of extra features which sets it head and shoulders above Sketch (in our opinion). Figma has opened a whole new level of possibilities when creating UI designs, the performance and interface work so much better than Sketch. The collaboration within the app helps our team to easily work together, help each other or pick up someone else's design to carry it on. In short, we absolutely love Figma, because it just works!

Figma vs. Sketch: Getting Started

When using Figma for the first time, it’s hard to ignore how similar the interface is to Sketch, for us it was a welcomed feature as it felt like we were using an updated version of Sketch so the learning curve wasn’t too drastic.

When you open Figma app, you’ll be taken straight to the ‘recent’ section of the browser. Here you’ll see a few preloaded and fully editable files – you can copy any of these elements from these files into a new design if you wish.

There’s a few differences in terminology used also. In Sketch, you work with Artboards, where as you’ll work with Frames in Figma. What’s known as Symbols in Sketch is called Components in Figma. However this is just a matter of working and if, like us, you are familiar with Sketch, you’ll be able to jump right in to Figma and will find your way around in no time.

Figma vs Sketch: Platform & Performance

One of the main differences between the two tools is that Figma is browser based, where as Sketch is solely app based and is only currently available on Apple computers. When it comes to collaborations Figma takes a huge advantage, teams can work on a project at the same time seamlessly, we’ve tested this over the last 12 or so months and we’ve never had an issue with it, it’s brilliant.

Figma is available as a desktop app on both Mac and Windows computers, however it has to be noted that without internet connection you won’t be able to open a new file, but how often do designers work offline these days?

When comparing Figma and Sketch, you’d be forgiven for having some worries with the speed and reliability of a web-based tool and whether it will measure up in terms of power and performance, but again… we’ve been using Figma for over a year now and had no issues so far in terms of performance.

“Comparing Sketch and Figma is like comparing Notepad and Google Docs.” Creative Director, Unfold

Figma vs. Sketch: Features and Functionality

Now let’s jump in to some of the specific functions and features. As mentioned above, one area where Figma excels is the collaboration between teams. If you’re a UI designer working in a large team with many pieces of the puzzle, you’ll soon see that Figma is a great tool. It saves the need to communicate edits back and forth as each user can view them directly within the app, as and when they happen.

Not only is this a game-changer for remote teams, it also helps studios like ourselves to streamline the whole design process. Another advantage to Figma is that it is browser based, so if a developer wants to view a particular project there is no need to download an app to do so, they can simple log in to their Figma account right in their browser. Every project has its own URL, so file-sharing is quick and simple.

In terms of design tools, Figma offers a few features which are considerably better than the ones within Sketch. The grids and constraints allow for complete flexibility when it comes to creating fully responsive layouts. Sketch do offer this feature via their group resign feature but you’re only limited to four options, so it’s very basic.

Artboards/Frames

Both apps allow the user to create multiple artboards with custom grids, layouts and scaling contains within a single design file. The artboards in Sketch are pretty simple, each one represents a separate page. As a result, Sketch’s artboards are pretty standard.

Figma’s ‘Frames’ on the other hand, offer much more in terms of versatility. While Sketch only allows the user to create one dartboard per page, Figma encourages the use of multiple frames within another, which is known as nesting, Learn more about Frames. That means that designers can include separate frames for things like headers, footers, tabs, menus and lists etc. Since each frame is its own ‘artboard’ designers can explore using different grids and guides on each, allowing them to explore different possibilities per page.

Figma features we absolutely love ❤️

Now let's delve in to some of the features that Figma have that we can't get enough of. Where do we start, there are so many.

An all in one program to replace Sketch and Invision


An all in one program to replace Sketch and Invision

Figma has been built with the whole product design process in mind. To create and collaborate on a design file. Prototype micro interactions throughout. Share a link to your Figma design or prototype. Gather feedback from the comments. And grab all the snippets of code and specs for the development process.

Migrate your design files


Migrate your design files

Migration can be a pain. Luckily Figma has a built in feature that enables you to import your Sketch files straight in to the Figma app. The importer keeps all of your layers intact and even saves all of your symbols, transferring them to Figma components.

Design responsively with Auto Layout


Design responsively with Auto Layout

Figma's Auto Layout feature works so well, it allows us to concentrate more on the design than moving things around.

  • Buttons: Each button can resize based on the text size within and lists can rearrange themselves when items are moved around.
  • Stretch to fill: Auto Layout components stretch left and right or top and bottom for easier responsive designs.
  • Design and development: Auto Layout has a feature where padding, direction, and spacing settings can easily translate in to code, making the developer handoffs easier.
Automate your work using Plugins


Automate your work using Plugins

Remove repetitive task and bring in data with the use of Plugins.

  • Plugins for everything: Stock imagery, flow diagrams, icons, charts, color accessibility, and much more.
  • Easy development: If you can build a website, you can build a plugin.
  • Private plugins: Larger companies can develop and create plugins and keep them private within their organisation.


Design for the web made easy

Figma has been built with every aspect of the web in mind, this is why there are so many features all in one program.

  • A modern pen tool: Draw in any direction using Figma’s Vector Networks. With no need for connecting paths, or merging.
  • Instant arc designs: Design pie charts, graphs, and many more things with relative ease, using the Arc tool.

Learn more about Figma's pen & vector tools

Designer / Developer collaboration has never been easier


Designer/Developer collaboration has never been easier

Bring developers into your process early and often. Figma allows them to get the specs and assets they need with just a few clicks.

  • Unlimited viewers: Figma lets you invite as many team members as you want, and has the flexibility to add them as viewers or editors
  • Inspect design filed: Any viewers you add to your Figma file can grab snippets of generated code for CSS, iOS, and Android.
  • Easy export: Export any assets you like from the Figma file exactly as they appear in your design in any format you need and any size you need.

Conclusion

In short, we absolutely love Figma, it's fast, reliable, and is jam packed full of useful features which make designing an absolute breeze. Don't get me wrong, Sketch served a purpose and like I mentioned above, it was a significant upgrade from the programs we were using at the time. But it feels like it hasn't been able to keep up with the latest offerings which are seen in Figma. Who knows, maybe one day Sketch will have a huge upgrade which surpasses any of the existing software we use, but until then I think we're sticking with Figma.

Note: Assets used in the post are taken from Figma

Written by
Mike Ashurst
Hiya, I'm Mike - Web Designer at Shape. My articles usually consist of design related stuff.

Related Blogs

Follow Us On Social Media

© MadeByShape Ltd 2022. Web Design Manchester
All Rights Reserved. Privacy Policy