• February 1, 2021

Making the Switch: How the RealSelf Design Team converted to Figma

Making the Switch: How the RealSelf Design Team converted to Figma

1024 682 Ward Vuillemot

Why Now?

Like many design teams, we’re constantly trying to improve our processes and workflows so that we can design faster and smarter. As designers, it’s important for us to keep up with the latest technological trends and not fall behind the curve. Only last year we switched to InVision, which was a big boon to us working more collaboratively within our team and with our partner teams. Even though it had only been a year, it’s become increasingly difficult to ignore Figma’s ever growing popularity, as it’s become clear that Figma is the design tool of the future.

Our Current Challenges

One of the biggest challenges we had with our previous design system was that we couldn’t afford to add InVision Studio to our already capped design tool budget. Instead, we developed a workaround process where the design team would meet every 2 weeks and assign a different designer to oversee the system changes in Sketch. The assigned designer would then upload the latest Sketch file into InVision so the engineers could access it and develop the changes. This cadence allowed us to keep track of design changes and additions, and allowed the responsibility to be evenly shared.

While our workaround process helped us get our design system developed, we did encounter several problems with this format:

Accidental Overwrites to the Sketch Style Guide 

Although we assigned new ownership of the file every 2 weeks, within a manual process like ours there’s nothing really to stop another designer on the team from forgetting to download the style guide to their desktop and accidentally overwriting the file. When this would happen, both designers would need to search through their versions to and reinstate the changes to a new version of the file. 

Lack of Transparency with Engineers

Since we kept our style guide “up-to-date” by uploading it into InVision on a biweekly cadence, there would be lapses in cross-team communication. This meant that anything added to the style guide within those 2 weeks would yet be visible to the engineers in InVision. This would sometimes cause communication challenges between designers and engineering teams, since they weren’t armed with the most up-to-date information about component styles.

Slow Processes

The process of making a design change in Sketch, then importing it through Craft to InVision, and then asking the developer to manually refresh InVision in their browser to finally view the change can be slow and cumbersome.  

No Single Source of Truth

We found ourselves still having to frequently sync about changes to design system components in order to ensure there was design consistency across the team.

Manual Design Checks

To help address the previous problem above, we established another manual process using a dedicated Slack channel. Designers would make design component requests in Slack, then other designers would comb through their mocks and comment on any styles that didn’t align to the design system. Depending on the scale of the project, this was a tedious process and misalignments that occured would be discovered when development was already underway. 

How We Made the Switch

We were allotted a 4 week period to test drive Figma before committing to the switch. 

We started by creating a Google doc containing a list of all the capabilities necessary to our workflow. 

For example:

We distributed tasks throughout the team based on everyone’s current projects or areas of expertise.

We created a temporary Slack channel for ongoing communication. Every Monday we would meet to discuss which items we tested the week prior, how it went + any interesting findings, and which tasks were up for the following week. 

This wound up being an efficient way to track and distribute tasks in a short period of time. Trello or Jira may have also been an effective way to manage duties, but both miss the ability to capture notes on the entire pilot.

The Migration

Our old design repository was a series of Google Drive folders organized by page type or use.

Another common way to organize files is by product team, however we decided against this route due to RealSelf’s adaptive culture and propensity for org changes. 

The Solve

Collaborative Design Files

Having the ability to collaborate within a single file by multiple designers means we no longer have to worry about overwriting each other’s files. Figma also offers versioning, so changes can be reverted if ever needed and everyone has access to the most current design.

Libraries & Components

Our old system of rotating style guide owners meant that there was a 2 week gap in what was being displayed in InVision and what was being developed. Also it took more time for all of the designers to discuss and make the changes in their project files. Because of Figma’s library and component structure, we can now make changes at the source and automatically update all of the design files. 

Live Changes

Now that we’re using Figma, we can make changes to designs on the fly that are immediately visible to the engineer or anyone with a viewer key. In fact, anyone viewing the file can watch you make the changes in real time, which has greatly improved collaboration between designers and engineers.

Storybook Integration

Integrating with Storybook is a game changer for the way we communicate with our engineers. Now they can compare the live component and the mock side-by-side. Differences between the two versions will ignite discussions between engineering and design teams, encouraging collaboration on uniting styles within the design system.

Design Lint

The Design Lint plugin eliminates the need for manually checking each other’s work. We added a swimlane in Jira dedicated to “Design Lint” so every project must go through this process prior to hand-off to dev. While this is a tedious part of the design process, it’s much faster and easier to use Design Lint because components are consistently kept up-to-date.

Features We Want

While we’re overall excited with Figma, there are a few things we’d love to see brought to Figma to make it perfect for us.

Slack Integration

Apparently this used to be an existing feature of Figma’s that they decided to no longer support. We often create temporary Slack channels for design reviews and our former InVision/Slack integration allowed the channels to serve as hubs for stakeholders to easily access monitor conversations outside of their own that occur in the designs. 

Dark Mode

Figma has a workaround for this, where you can set the background of your project file to any color of your choice. It’s not a perfect option though because the tool panels still appear in light colors and it isn’t a default for every new project file opened. 

Conclusion

It has now been 3 months since we’ve made the switch and things have been going swimmingly. We’ve eliminated manual processes and improved transparency into our projects. Creating prototypes has become more efficient, which allows us to gather customer insights more frequently. Collaboration between each other as designers had also improved, as well as with non-designers alike. We’re thoroughly enjoying Figma and have no desires to go back. 

Written by Jackie Delagrammatikas, Senior UX Designer at RealSelf.

In Jackie’s own words:

I’ve been a UX Designer for 7 years and have had the pleasure of working in many varied industries from ecommerce to government to entertainment to beauty. I’ve always thrived working in diverse, collaborative environments and working at RealSelf is no different. I continue to stay committed to crafting the best experiences for people.