We migrated from Sketch to Figma (instead of Invision Studio, Framer X or Adobe XD) primarily because of collaboration and scalability. Plus there are several other smaller reasons. It was a pragmatic move for us and we’re happy we did it.
What works for us may not work you. To help you figure out whether it matters to you, here’s a brief description of what we do and how we work.
We are building the workspace for everything written: Smarkup. It’s a collaborative text editing software for creating, managing, and collaborating on notes, specifications, blog posts or knowledge bases. There’s a desktop app and web app built on Electron. Plus the regular stuff like website, newsletter, branding, design for marketing platforms. Mobile apps are in the pipeline too.
So it’s one digital product being under development for several years. Collaboratively. Our design system needs to be scalable, sustainable and must handle thousands of screens of UI. We do no prints, no illustrations.
I sit on two seats: the executive and the designer. I’ll do my best to give you my point of view from both of these seats.
Why would anyone want to leave Sketch?
Sketch is the king. Right? That’s what I thought until the first developer on Windows came along. Bummer. As you probably already know, there is no Sketch for Windows.
The best developer handoff is to have the dev open the file independently and mess around the screens, see how the screens are placed on pages, navigate the prototypes and so on. There is still no way to do this if the dev is on Windows. Yet. Abstract does not offer this type of browsing as well.
Sketch has recently raised 20M in funding, aiming to add collaboration features and to bring Sketch to the browser. However, that’s not going to save us today. Moreover, who knows how that will end up?
As I was googling around looking for a solution, and I bumped to Figma. After a short while, I realized that Sketch is not the only design tool of choice anymore.
Still, we had a complex design system built in Sketch. There were 1000+ screens. Building this from scratch again in another tool would cost a lot of time and it was still unclear whether it would be worth it.
Then I tried to import Sketch file into Figma and it blew my mind. That made me seriously consider moving to another design tool.
Comparing design tools
Moving to another design tool in our case is a huge thing. I had to make sure that it was really a step in the right direction.
Here are the primary things that we considered important for our case.
- The collaboration was the key aspect. The more people take part in the design process, the better the product will be. Feedback is critical and we want our design to be open to our entire team. Everyone in the team should be able to access any design, open it, look around and give feedback.
- Can it scale? At the time we had 1000+ artboards in Sketch (equivalent for “frame” in Figma). How would it work with 10x or 100x more? Will I be able to find what I’m looking for in such structure?
- Developer handoff. Is it easy for the developer to understand what needs to be done using the tool? Are there the necessary inspection tools?
- Can we rely on the tool? Can we entrust our business into the company that tool? Is there a strong community using the tool?
- Is this only a tool for UI designers? Or can it be used by anyone as an infinite collaborative whiteboard? What other use cases does the tool offer?
- Would a designer enjoy working with it? Does it allow productive workflows? Is it fast and furious? Is there a plug-in ecosystem? How big is it? (I’m an extreme productivity freak, I optimize for milliseconds, I worship automation).
- Accessibility from other platforms (Windows, Linux or the web).
This is my list of our problems with Sketch so we’re clear what are our reasons to leave.
- No collaboration.
- No convenient dev handoff for people on other platforms (Windows, Linux).
- Only for Mac.
- Sketch started to be painfully slow as our file grew (1000+ artboards).
- It’s necessary to create way too many styles because of the way styles are built in Sketch. It’s a mess that is hard to use and maintain.
- It’s hard to share designs with others.
- We used Abstract for versioning and for developer handoff (the front-end developer just pulled the last commit and opened it in Sketch, we didn’t find the Abstract’s inspection tools useful). Abstract is a good tool, but it’s way too complex compared to Figma. Plus it brings a lot of unnecessary extra steps into the workflow.
- We wouldn’t be able to use Sketch without the Runner plug-in. This is a bad sign to me because I think that the most useful features of a tool should be native.
- Plug-in ecosystem is huge!
- Community is great.
I’m so sorry to leave Sketch! Sketch reinvented design, but many of those things needed to be reinvented again.
To me, it seems that Figma did just that. Reinvented those part of design which Sketch got wrong.
- Collaboration in Figma is perfect. It matches all our requirements. It’s super-easy to share a design with anyone. You can copy a link to a page, frame or a prototype, send it, and anyone can open it in the browser or the desktop app. People can leave comments on the designs. Multiple people can edit one file at the same time. It is very well thought through.
- Powerful user management. You can set different permissions (can view / can edit) on the team level, project level and also file level.
- In Figma, there are good ways to organize the designs and make them easy to find and use by the rest of the team. We look at our designs as on a product, of which users are the rest of the team. It should be easy to use and navigate.
- It can scale very well. It allows you to create design systems that can easily scale while you can still find your stuff. The tool is built to handle even large organizations with different teams. The structure is like this: Organisation > Team(s) > Project(s) > Page(s) > Frame(s). You can have multiple teams and multiple projects inside them. Projects can have multiple files; files can have multiple pages, etc.
- Developer handoff is good. The front-end developer can independently look around the file just like the designer. He can inspect or export what he needs. There are however some small things that could be improved, like that way “view only” users see prototyping (more about that below), or that it’s not possible to inspect multiple text styles if they are in one layer. I expect this to get better over time.
- Figma is a tool that can be used by anyone as an infinite collaborative whiteboard with superpowers. It’s very simple to use. It’s not only for UI designers. This is a huge plus. Recently we have been dealing with an extremely complex specification of sharing features in our app. In the beginning, we were drawing diagrams on a whiteboard. Now it sounds like a joke. It was impossible. We moved it to Figma and things started to move forward.
- Figma is built for the web. We are building a very similar tool from the technical point of view. That’s a plus for us too.
- Can we rely on the tool? From what I have seen I think we can. The testimonials are solid, companies like GitHub use it. Community is big. Priority support is great.
- Price. It’s fantastic. You pay just for editors in your project. Everyone else with “view only” permission has a free account. Plus even the free viewers can create and edit their files outside the project (drafts) and collaborate.
Designers’ point of view
- Would a designer enjoy working with it? After some time spent with Figma, I can confirm it for myself. Yes, hell, yes, I love it! There were some significant quirks that I was bitching about in the beginning, but it was only a matter of a habit. Of course, there is still stuff to bitch about. There always will be. No matter what tool you are using.
- Speed. Only after I put my hands on Figma I realized how slow the Sketch is with large files. It is unbelievable how crazy fast Figma is. Kudos to the engineers, it’s a real marvel.
- Styles. The way styles work in Figma is so much better than how it works in Sketch. In Sketch, you need to have a separate style for each text alignment and also for each color. If you do the math, it’s crazy. In Figma it’s different. Here’s what I mean:
So Figma allows having less complexity in the file thanks to flexible styles. Fewer frames (artboards), fewer styles, fewer components (symbols).
- Multiple styles inside one text layer. This might seem small, but in our case it’s huge. We are building a text editor, so it’s convenient to be able to change color styles or text styles inside one text layer.
- Prototyping works great for us too. If you are familiar with how prototyping works in Sketch, check this out. Also, you can select and link layers inside components instead of creating hotspots.
- Importing Sketch files into Figma works surprisingly great. If it wouldn’t be there, I would probably be postponing the migration forever.
Some features that are in Sketch are missing in Figma. But there is a lot of cool features in Figma that are missing in Sketch too. To me, these outweighed what I was missing.
Bonus: you can even embed Figma files and frames on the web. Just like a YouTube video. That’s so cool!
Stuff that will get better over time
- Plug-in ecosystem. Figma has just opened its door for plug-ins. When I started using Figma, there were no plug-ins. This used to be a big downside. Sketch has a massive ecosystem of plug-ins. Nearly every time I had a problem, there was a plug-in that solved it. This seems to be coming to Figma too!
- Animations. If you look at Invision Studio, well, they got some serious animation features… There is no such thing in Figma. Not yet! They said that they are working on it, so I’m pretty excited about what will they bring to the table.
If you are not a designer or you are not trying to persuade one to use Figma, feel free to skip this. These are mostly related to the designer’s workflow.
There are a few features that I found missing when I started with Figma. After some time, I can confirm that it’s not a big deal at all. I just had to change my workflow a little.
- The first thing that I was thinking was, “How would I survive without Sketch Runner?” (it’s a plug-in for Sketch). It turned out that I didn’t really need it that much in Figma. Most of its functionality is built in. The rest of it I didn’t need. Anyway, I bet they will create Runner for Figma too.
- Swapping overrides in component instances keeps only text.Swapping a component at the moment resets everything except text (icons, color styles and so on). So if you have a button that contains a nested icon, the icon will reset if you swap the button. I hope they will fix this in the near future.
- Browsing prototype with “view only” permission. User “view only” permission can only play the prototype. So the developer can not currently see how the prototype works (what components point to what frames and so on). This would be very handy.
- Moving master components from file to file is not yet possible.There are workarounds for this, but sometimes it may require a lot of repetitive work. However, after some time with Figma, I came to a conclusion that it’s not a big deal for us. You just need to know what you are doing and think forward.
- At the time when I started with Figma, there was not the “Back” buttonwhich you have in Sketch when you go to the master symbol. I was bitching about this a lot, but as now I have all the components in a separate file (so it’s in a separate tab that is just a click away), I don’t need it that much (@figma it would be still nice to have it thought, wink, wink!) Actually, Figma has added the button there just few days ago. But it only works if the master component is inside the same file at the moment.
- Offline mode. If there are times when you need to work offline, Figma might not be the right choice. In our case, we are totally fine with how it works.
Invision Studio claims to be the world’s most powerful screen design tool. I object.
- No styles. Or at least not at the time when I was looking. That is a complete no-go. I can’t imagine building a design system without styles. That was a dealbreaker for us.
- Working with components seemed inconvenient. Every time I need to edit a component, it opens in a standalone canvas. This makes it hard to edit multiple components at once. Also, the workflow for adding components felt unfinished. There was no preview and no Runner-like workflow for searching and adding.
- No browser app.
- The tool is still relatively new. They have just launched their Windows client.
- The collaboration features seemed way less packed than in Figma.
- At the time when I was trying the import from Sketch, it was not nearly as good as with Figma. A lot of stuff was broken that I would need to fix.
- Accessibility. It’s for Mac and Windows. But I’m not sure about the web app (?).
- Animation features seem to be rich. But I haven’t properly try to animate in Studio yet, so I can’t give my word for it.
As you can see, there are not so many good things on this list. It’s not because there are not many good things about Invision Studio. I bet some features are way better in Invision Studio than in other apps. It’s just because I have stopped looking after I saw the dealbreakers.
Still, “the world’s most powerful screen design tool” sounds like an overstatement to me.
I didn’t evaluate Framer very deeply because I had a feeling that the tool is for something else. Like it’s not the right solution for the problems we had.
The tool didn’t seem to be built for collaboration. That was a dealbreaker to me, so didn’t go much further.
Maybe I don’t get it, I’m still confused. There was a lot of features we didn’t need (component store, the whole “development” section) and features that we need seemed missing. It also seems to be built around and tied to React, what might be an interesting thing for someone.
Pricing was costly. Unlike in Figma, there are no free “view only” seats. That makes a big difference.
I feel like I still need to explore Framer a lot more. We might find it useful for some stuff. But it wouldn’t solve the problems I was trying to solve now.
I must admit that I completely ignored Adobe XD and I wasn’t even considering it. I was working with it a few years ago, I remember that it was a kind of a gimmick so I have been ignoring it ever since. Now I see that a lot has changed.
- I wouldn’t feel confident with it because it’s under Adobe. I’ve have co-founded another business years ago (Mister Horse) which makes plug-ins for Adobe After Effects, so my experience with Adobe pretty rich. Adobe is a giant. Bugs take a long time to fix (if they are ever fixed at all), new features take ages to launch and they are frequently buggy and unfinished. The customer support sucks. However, I might be completely wrong about this regarding XD. I was talking to designers who use Adobe XD, they seemed to like it and they said that Adobe listens to its user base. Big brands use it as well. So please don’t rely on my opinion on this.
- When I tried to import our huge Sketch file, it failed. I wasn’t able to do it.
- I still don’t feel there is much hype around the tool. Most of the folks I respect work with Sketch or Figma.
- Some of the prototyping features are better than in other apps.Especially when prototyping for mobile. This is what I heard from multiple sources.
- Integration with the other Adobe apps is a great plus. I can imagine that it might be convenient, especially for production agencies. In our case it’s unnecessary.
Stuff that will get better over time
- No collaboration features yet. The website says “Live co-editing (coming soon)” among other stuff that is coming soon.
When I put it together, I still don’t feel like Adobe XD is closer to what we need than Figma.
Figma was a clear winner for us.
We’ve been with Figma for a few months already, and things are much better than before. The most significant benefit I see is the collaboration that it brought to our team. Scaling is now much easier as well, there’s no pain in it. It was a good move from both the executive and designer point of view.
The other company, Mister Horse, is now all-in Figma as well and it works great for everyone in the team.
Still, what works for us may not work for you. The best way is to try.