Figma vs Sketch | MultipleMedia | Web in Montréal
Read about our 20 years!

Figma or Sketch

Interface Design has changed a lot in recent years. For a long time, Photoshop was the reference for UI Designers but it became unpractical regarding the workflow of a production team. Sketch then appeared with new assets: cheap, very fluid, allowing to prototype and design within the same space. The competitors of Sketchs then flocked, from Flinto to Invision Studio. However, it is Figma who made a remarkable entrance. SO, what to choose between Figma and Sketch? What are their strengths and weaknesses?

Figma

 

FIGMA AND SKETCH: A COMMON TOOL UX / UI

In my opinion, the major interest of these new tools is that it offers the possibility of being used in the UX / UI workflow. UX designer and UI designer have a common tool that allows everyone to continue working on their issues. UX is working on design. The UI starts from this version to create a new design. The time saved and the graphic consistency gained is then important.

These two tools offer the possibility of prototyping all the interactions of an interface. This makes it easy to show a user's journey as real as possible before the site is coded.

Another important asset is the incorporation of plugins at the heart of these tools. One of the best known is Zeplin. The designer can send his models made sketches and Figma on Zeplin, which will give all CSS and HTML specifications to developers. There are also plugins to easily pass mockup responsive (auto-layout) or to insert directly random content in his models. (Craft, Unsplash)

Figma and Sketch are inexpensive tools (about $ 99 for the year for Sketch and $ 12 / month for Figma for the professional offer). The advantage is that they are updated regularly offering new features. How to choose between Sketch and Figma, on what are they different?

FIGMA VS SKETCH

  • Speed ​​and Performance: FIGMA

Sketch is faster at startup but appears slower once the file is started. It takes more RAM on your computer because of the regular auto-save.

Thus, the Zoom / Dézoom, the vector paths and the launch of the prototype are done a little faster on Figma.

  • Cost: FIGMA

Figma has a free offer while a year-round license is mandatory on Sketch ($ 99).

The free offer nevertheless has the disadvantage of not being able to work in a team on the same file (which is, we will see it after, the big advantage of Figma)

  • Plugins: SKETCH

Figma does not support plugins embedded directly as sketch, however, there is the possibility to export his models on Zeplin.

Sketch is clearly the leader in this area, many useful plugins can be integrated directly into the interface Sketch, They can really gain in efficiency.

  • Symbols vs Components: SKETCH

They are called symbol on Sketch and Component on Figma. These are powerful graphics that can be reused on several models in a dynamic way. So Symbols or components? Equality is not far but the symbols in Sketch offer more possibility. Especially at the level of overides, the use of plugins dedicated to the organization of symbols is also a big plus for Sketch. (Symbol Organizer). In short, I think Sketch is more solid to mount a Design system.

  • Collaboration: FIGMA

Figma offers real-time collaboration on projects while Sketch is still working on this feature. It is a great differentiating asset for Figma, it is very convenient when several designers are working on the same project, there is no waste of time and no risk of not taking the right file

  • Vector tools: BOTH

Figma as Sketch offers quality vector manipulations. I personally find it easier to sharpen the angles on Sketch, the display is more convenient but Figma offers the same possibilities.

Figma

 

  • Supported files: SKETCH

Sketch supports more formats than Figma for export, including PDFs, although they are not optimized in terms of weight.

Sketch:

  • PNG
  • JPG
  • TIFF
  • WebP
  • PDF
  • EPS
  • SVG

Figma:

  • PNG
  • JPG
  • SVG

 

  • Responsiveness: BOTH

Both offer similar possibilities in responsive. Figma natively offers responsive features that are more powerful than Sketch, but incorporating the auto-layout plugin in sketch can alleviate this problem.

Figma

  • Prototyping: SKETCH

Figma as Sketch are not the best tools for prototyping (Invision Studio and Adobe XD have more features in this area). Both have the basic features: Link between artboards, basic transitions. However, Sketch stands out thanks to the integration of prototyping plugins (Marvel, Invision)

  • Share and comments: FIGMA

Finally it is Figma who wins this last point. It is very easy to share a project and give rights for each user (have the right to edit / read right). For sketch it is only possible to share read-only via Sketch Cloud. Regarding comments, Figma also wins the round since it allows to put comments to a precise location of the mockup, Sketch just displays the comments as a result of a sidebar.

 

General conclusion

It is difficult to make a categorical choice between Sketch and Figma since both tools offer two interesting environments. I really like Sketch for plugins like Craft / Zeplin / Auto-Layout that save a lot of time on projects. On the other hand, I often work with Figma for a few months for its accessible side, I can open my models from any place, whether at home or other. Sharing my files with my colleagues is also easier. Sentimentally, I would vote Sketch that revolutionized the interface design but Figma is not far!

WebP, the image format you need to use !

Research

April 30, 2019

What image format should be used on your website in 2019?   When you hear the terms "jpeg", "png", "gif", "svg", etc... you know that we are …

UX Design, TOP 5 of the Best Mobile Applications.

Research

March 26, 2019

Here is our TOP 5 of the Best Mobile Applications regarding the UX Design.   1- City Mapper: the ultimate urban mobility!   - The most recent …

By: Jean-Philippe Talamon, UX/UI Designer and
Jean-Philippe Georges, Marketing and Communication Manager

BIG DATA, 3 Key Elements

Research

March 20, 2019

Data governance No artificial intelligence without data! I will say even more, no good I.A. without the necessary amount of data. Then there arises the problem of …

By: Jean-Philippe Georges, Marketing and Communication Manager