Why I’m switching from Sketch to Figma
By: Holly Sunderland
Tags: Figma, Web Design, Design, Tools, Prototyping

When approaching a web design task Sketch has been my tool of choice for some time, I find it a lot more efficient than Photoshop and using Sketch has sped up the way I work when tackling designing a website. This said I have now ditched Sketch for a new tool and that’s Figma.

Designing in Figma is very similar to sketch, however there are a couple of features that I preferred in Figma that I have listed below.

Place image: This allows you to place an image within a shape but when resizing it will act as a mask. This is so useful when designing for web so i can pin my images for example “Left align” so when resizing I get an accurate representation of where the image will lie.

Vector tool: I come from an illustrator background (Adobe Illustrator is my jam) so using the vector tool in Figma has been a dream! The ability to connect more than two strokes to a node has made it easy peasy to draw complex shapes and symbols.

Smart grid: This is cool for when I hide my layout grid I can still see a dashed line to help me butt my edges. I found it less intrusive than alternatives like smart guides in Adobe.

Frames: These are Figma’s version of “art boards”, the reason I like them is it’s a smoother process to create new sized frames especially for creating overlays when prototyping.

Shortcuts: The main shortcut I use in web design is arranging the elements in my layers, bringing to the front and sending to back, in Sketch it was quite a long shortcut to remember (Control + Alt + Cmd + Down/Up arrow) where as in Figma it’s the same as Photoshop (Cmd + [ / ] ) quick and easy to remember, especially if you’re used to the adobe shortcuts.

These are just a few design features I like about Figma, but the options available for prototyping in Figma are what convinced me to switch from Sketch.

Prototype view in Figma.

I’ve watched only two tutorials and I find I can do more with my prototypes than ever before, not only this but it’s quick too! Here are a few of my favourite features that I found most useful when prototyping.

Overlays: Having the ability to manually place or pin my overlays, as well as “switch” with another overlay. This saves time creating loads of screens when I can just apply smaller frames to my designs.

Manual overlay in Figma.

Horizontal and vertical scrolling: This is a big one for me, a lot of my current workload involves horizontal scrolling or map navigation and Figma is more than prepared to make prototyping these features easy and simple using the “Overflow behaviour” feature.

Triggers: The option to click or hover! Again this is so useful when taking my prototypes to the next level.

Transitions: Figma has a range of transitions you can apply, the interesting part for me is you have the ability to control the duration speed of your transitions.

Duplicate Files: A simple feature but when prototyping I regularly try out a couple of options for the user journey.

Prototype original linked up.

Being able to duplicate my prototype file once I’ve linked up all my frames means I can then add in the alternative journey frames whilst keeping the linked up transitions from my original prototype. This wasn’t an option when prototyping in Marvel App and meant I had to start from scratch for every journey.

Duplicated Prototype, still linked as previous.

The wide range of possibilities for prototyping make it a lot easier for me to show my functioning design ideas in Figma than previous prototyping tools such as Marvel App.

This brings me to my final selling point of Figma and that’s collaboration, you can share a link to show updates with your team, they can then comment or edit from the link, this is really useful when working with a library of components it’s great to be able to update the files across the teams to maintain consistency as well as getting feedback as you work.

Additionally Figma works on both Mac and Pc, oh and did I mention it’s FREE? So it’s a great tool for designers who are starting out in webdesign.

Overall I’m excited to start using Figma as my “go to” web design tool, I will give updates on any challenges I have or if I end up swapping it out for a new tool later down the line. Thanks for reading :)