The home24 Figma case
Part 1: The investigation
As companies grow, the need for changes in team organization and tooling increases. Especially in the last few years, the pandemic has demanded workers and managers to rethink the way they work. This applies to home24, and specifically to the UX team that almost doubled its size while working remotely in 2022. This meant a challenge in the organization, but also an opportunity to rethink the design processes.
Our tools and file setup were not working for the bigger remote team. In this scenario, we started an investigation on migrating to Figma. If you are considering migrating your team, this series of articles will break down our experience.
Our initial setup
The initial setup of home24’s UX team consisted of Sketch for designing, InVision for prototyping, and Zeplin for handoff. It is a solid setup, but we have had a couple of problems with combining three tools. First, they all have to be managed and kept up to date with the design changes, and second, sometimes bugs happened when exporting files between them.
Our main design tool, Sketch, also isn’t meeting our needs. Sketch has no version control on the files, the files’ size can get very large, and the management of design systems is difficult. The lack of version control meant a lot of new files as versions, with no real structure behind it, and the need to break the work into different files due to the size created noise in the organization.
Concerning the design system, we encountered problems, especially with the inflexible symbols and no built-in design system management tool. Symbols were frequently broken due to how inflexible they are, and we had no way of knowing when or why this was happening.
Still, the situation was manageable and we had to make sure that migrating would not only solve these issues but achieve more benefits. That’s why I started to look at the differences between the initial setup and Figma, and into the value that Figma brings to the table. The reasoning behind choosing Figma for this investigation is that it is currently the most popular tool in the market built for the entire product design workflow.
The promise of Figma
Platform and collaboration
Figma was born web-based and works on web browsers. This means that there are no constant software updates and no need to download and save files. If you need to work offline, the native app is also available and your file will sync as soon as you are connected again.
It was also born collaborative, with multiplayer collaboration, live share, and built-in commenting. Multiplayer collaboration means multiple people can work on a file, and you see each other’s cursors. Live share is the ability to follow someone’s screen by clicking on their avatar. Finally, anyone with a link can comment anywhere in the design, and it is possible to tag people and mark comments as solved.
Figma vs. Sketch
Figma and Sketch are both vector graphics editors, and Figma’s UI looks very similar to Sketch’s and it has all the drawing tools that Sketch has. Despite the visual similarity, Figma and Sketch differ in many ways.
Version History
As mentioned in the initial setup, our team had issues with the lack of version control on files. Figma has a version history that allows you to go back to previous states, until the very creation of the file. In the version history, you can save particular milestones, navigate in the versions and restore previous versions. It also has a notes functionality that can be used to communicate what changed from one version to another.
Frames vs. Artboards
Sketch uses artboards, while Figma uses frames. But Figma’s frames are more powerful than artboards: frames have a few additional properties like a background fill, multiple layout grids, the ability to clip or unclip nested content and be nested within each other. The constraints are at the frame level, and this means it is possible to create responsive screens.
Components vs. Symbols
Similar to Symbols in Sketch, Figma has Components. The difference is that they are more flexible and easier to design with. Unlike Sketch, in Figma, you can access and modify the properties of any layer in a component without detaching it from the master. Accessing components in Figma is also easier: you can find and see components as a list of thumbnails. There is no symbols page in Figma, meaning it lets you manipulate your components directly on the canvas, in context.
Components in Figma also have a Variants feature. Variants bring a range of new possibilities to components and scalable design systems because it allows you to combine variants into a single component with custom properties and values. These can simplify asset libraries and make picking the right variant easier.
Libraries
Both Sketch and Figma have libraries, but Figma libraries work a little differently. It allows components to be accessed across different files and projects, and you can also specify exactly which components you want to publish. When you publish or make changes to a shared component in Figma, everyone instantly sees the new component in the Team Library. When anyone else updates a component in another file, you receive a notification and can decide whether to apply the changes to your own instances.
Styles
The styles also work a little differently from Sketch. In Figma, you can create four different types of styles — grid, color, text, and effect — that can be used locally and/or published to a Team Library. This modular approach is more flexible and makes it easier for designers to adapt styles across use cases.
Figma vs. InVision
Concerning prototyping, Figma has a built-in prototyping feature that’s very similar to InVision. When comparing the two of them, it is a matter of convenience: with InVision, you will have to switch from various tools, import/export files you want to work on, while in Figma the workflow is more streamlined.
Another difference between Figma and InVision is the style of collaboration. As explained before, Figma offers a real-time collaborative experience, while InVision has a somewhat isolated design workflow, with changes introduced upon feedback.
Figma vs. Zeplin
Figma also can be used for the handoff, as it has an inspection panel similar to Zeplin where developers can get all the information they need and also download the icons and images used in the project. But unlike Zeplin’s current plans, you don’t need a license for developers with view-only access to Figma — it’s free for view-only users. Please note that Zeplin used to be free for developers too, so check your contract if you already have one before making a decision.
One thing to take into consideration is that if Figma is used for handoff, there needs to be a clear organization of files marked as ready for development. If you rather not worry about having a ready for development structure, we would recommend sticking with Zeplin for the handoff. But in our investigation on how to better organize our files, we came to the conclusion that having a structure where we have the approved version of the files always available is actually beneficial to the UX design team as well.
Pricing
Pricing is a necessary piece of information when you consider migrating tools. After all, as a business, we need to make conscious choices regarding cost and benefits. To look at pricing, we need to consider all the tools that Figma could replace and make a package comparison.
First, there is Sketch costs 9 USD per seat per month. Then, Zeplin costs 12 USD per seat per month. Finally, InVision costs 20 USD per seat per month. In total, this package costs the UX department 41 USD per seat per month.
Figma’s organizational plan is a bit more pricey, costing 45 USD per seat per month. The difference in costs from the package is an additional 3 USD per seat per month, which could make a difference in the long term. The question is if the benefits are worth the extra cost.
How to migrate
So far, Figma not only solves our initial problems but also has a lot more to offer. But moving tools when you have an existing product is still stressful, and we had to think about how much work actually migrating would be.
Figma has an import feature that allows you to import Sketch files. But before you get excited about this possibility, remember the many differences between Sketch and Figma. The differences especially in styles, frames, and components make importing very untrustworthy. Not only are you likely to find bugs in the files, by importing something from Sketch you are not using Figma’s full capabilities. This does not mean that the import feature is useless, as you could use it to import assets.
The most reliable way to get your files in Figma is simple, but time and effort-demanding: creating everything from scratch. My advice for that is to start with a list of everything that needs to be migrated and use the migration as an opportunity to audit your components and screens.
The conclusion
Overall, Figma feels like a more evolved and unified tool with collaboration and productivity on their side. To help us in the decision-making process, we created a high-level comparison that you can check below:
The work to migrate is considerable, so the benefits versus effort have to be measured and thought of with care. To have a better notion of how all the features mentioned in this article would impact our workflow, we decided to contact Figma and set up a trial period for the team.
So stay tuned: the results of this trial period will be covered in Part 2 of this series. The second part will be published within the next two months.
References
- A Sketch user’s perspective on switching to Figma
- What to expect when moving from Sketch to Figma
- Migrating to Figma: the business case, the process, and the libraries
- Moving from Sketch to Figma: A case study of migrating Design Systems
- Switching from Sketch to Figma: A guide for designers
- How we migrated to Figma
- Migrating to Figma Checklist (Community file)
- Migrating to Figma: Taking the stress out of your move (Video)
