Jump to content

Design & UX

Why we switched from Sketch to Figma

Check out our 3 reasons why

Figma vs sketch

Recently our design and development team moved from Sketch to Figma for 3 reasons; unification of tools, its powerful collaboration features and price.

Who we are

We’re a digital studio currently consisting of two designers and eight developers. In recent years, we’ve been embracing the surge of new design tools that have taken user interface design to a new level. Thankfully, gone are the days of using non-web specific tools like Photoshop to create Interface designs.

Over the last few years, we have been using Sketch and have loved a lot of its features (what a jump up from Photoshop it’s been!). However, in recent months we’ve been transitioning to Figma. Why? We’re always striving to improve collaboration between our designers and developers and from a business point of view, we need to get the best tool we can for our investment.

Here are 3 reasons why Figma is currently our go to ahead of our previous design tool, Sketch.

Enabling us to have one unified tool

When using Sketch before its prototyping features, InVision was our go-to to communicate designs with our clients. We utilised the commenting features for feedback, which truly changed the way we communicated design. Sketch now provide ‘Sketch Cloud’, however, this initially felt disconnected from the app itself so we chose to remain with InVision.

We previously stored our files on our company server, which didn’t play well with Sketch version control, so we began looking at services such as Abstract/Kactus/Plant to use. Not only did this inflate our monthly costs, but it meant that there were several places to go for our designers.

  • Sketch for design
  • InVision for prototyping and client comments
  • Abstract/Kactus/Plan for version control

Introducing Figma: Because it’s a cloud-based design tool, all design files are stored within Figma and not locally. This has really centralised the way we store our design projects, with all clients files accessible to the design team in one unified place.

We didn’t have to worry about storing files on our server and therefore, we could utilise the version control found within Figma.

Prototyping: Prototyping (like Sketch) is built into Figma but it feels more integrated into the design file. There’s commenting features within the final prototype and to take that to the next level, comments can be made directly on artboards – which we will come onto a bit later. Its prototyping features are improving all of the time, although it’s still not quite as powerful as InVision we’re able to produce high-level prototypes for usability testing and client reviews.

Figma has enabled us to confidently move away from our previous tools to make a financial saving and has provided us with a way to streamline our many tools to just one. No more logging into multiple services or asking clients to go here there and everywhere.

figma squares

Figma’s collaboration is unrivalled by Sketch

This really was the biggest one for us and to be honest, it’s something we had never really considered as a possibility in Sketch or any other design tool. Design files were always worked on in a silo by one designer. If another designer needed to jump in during the project, we would need to ensure the file was closed by the other designer to avoid any nasty conflicts. Alternatively, we’d duplicate the file and work in tandem. This was eventually made simpler by libraries but it was something we just got by with and naturally, it wasn’t the ideal way of working to keep consistency.

figma-comments-1

Introducing Figma: It allows multiple editors in one single file! When we first heard of this, it was spooky. Damn, we thought. It would mean other designers (as editors) or developers (as viewers) could visit the file and watch, move around or even design at the same time, on the same page! It required a mind-shift and since we started working collaboratively within Figma, we haven’t looked back.

More transparency: There’s a whole lot more transparency with the work we produce now. Designers, developers, project managers and clients all have access earlier on and can all see the process. No longer do they just view the finished, polished prototypes and never before did a project manager or client go near our Sketch files.

From a client perspective, we can now get on the phone and invite them to the artboards and talk them through decisions or talking points and even make live tweaks to demonstrate. If we’re not there, they can leave a comment directly for us to pick up (although this level of transparency might not be for every team or client).

Developers can get a greater understanding of the design by moving around in the file. They don’t have to duplicate it (previously they did this with Sketch files) through fear of accidentally editing something.

Designers can now work more closely together, learn from each other and even design pages together based off pre-existing design systems or even just flesh out new ideas in tandem. The possibilities seem endless with the collaboration feature found in Figma, which has proved to be the real ah-ha moment and something we would likely look for in future design tools.

Figma trumps Sketch on pricing

With two designers and eight developers all requiring access to original design files, we had to purchase 10 seats for Sketch which costs around $79 per seat (billed annually). That’s $790 a year for the product team. (priced on 10th May 2019) After a year, we chose to only renew the designer seats and leave the developers on their existing version but they quickly faced inconsistencies with layout due to the out-dated versions of Sketch conflicting with the new. At the time this was (Sketch 50.2 and Sketch 52.5).

sketch and figma pricing

Introducing Figma: This is free for anybody to view a design file, inspect elements and save out assets – this is all our developers need to do. It’s also free for one designer to work on up to 3 projects, which is a great starting point to trial it for a while. A full editing licence costs $180 (billed monthly) per user for a year, which totalled to just $360 for our two designers. A saving of $430 between Sketch and Figma because of it’s free to view model!

Final Thoughts

The pace and quality of design tools being released have meant quick shifts from one to another and at the moment, Figma provides something unique that has fundamentally changed the way we approach design and collaboration. So for now, our loyalty lies with Figma.

We would love to hear your thoughts. Send us a tweet, as it would be great to continue the conversation and get insight from other teams about how you work between design and development.