3 challenges that every design system faces and how we solved them using 3 different tools
We developed the Storybook app that uses the same components as the main Volvo Cars mobile app, Figma export and Figma docs scripts.
As an iOS developer in the Platform team at Volvo Cars, I’m working on implementing a design system to achieve the same look and feel across platforms and teams. But implementing the components themselves isn’t always the hardest part. There are many more challenges. I’ll tell you about three of them and three tools that help us deal with them.
3 challenges — 3 solutions
- Challenge 1: Naming differences between Figma, native iOS components, and our implementation.
Solution 1: Storybook app - Challenge 2: Duplicate resources (icons, illustrations and colors).
Solution 2: Figma export - Challenge 3: No global overview of components, no change notifications, difficult to understand what is implemented or up-to-date and what is not.
Solution 3: Figma docs
1. Storybook app
The main challenge
When creating a design system we needed a quick and convenient search for components for developers. The names of the components in Figma are the same for designers as well as for iOS and Android developers. So the names in Figma and in the code often do not match, and do not always meet the expectations of the developers.
For example, in Figma we have the Tab Bar component, more familiar to iOS developers as UISegmentedControl in UIKit or Picker in SwiftUI. Whereas our implementation is a custom view and is named SegmentedPicker. Another example is the Checkbox component from Figma, which in our implementation uses a native SwiftUI Toggle.
The solution
To solve this, we developed a separate app, called Storybook app, that uses the same components as the main Volvo Cars mobile app.
Key benefits of the solution:
- It allows developers to find components by name from Figma, by the name of the implementation, and by keywords. It also allows developers to configure components and copy the implementation into their code.
- It allows designers to review the implemented components. In the Storybook settings, you can change the color scheme, size category, and layout direction.
- It also helps my team to improve the quality of the components. When adding a new component to the Storybook, we sometimes notice flaws that we fix before the component is available to everyone.
2. Figma export
Our main app has a lot of icons, illustrations and colors. Their naming was a challenge for a long time. For example, developers created a duplicate color if they couldn’t find it among those already available by name. As a result, the app had lightBlack, almostBlack and mineShaft colors that were the same color.
Due to the large number of icons and illustrations, it was difficult to keep them up to date. Updating them manually was quite a challenge, especially considering the duplicates.
We solved this using Figma API. We have created a script that downloads colors, icons and illustrations from Figma, creates xcassets catalogs and extensions for ease of use. By using it, we got rid of the duplicates, the names now always match the names in Figma, and we are certain that our resources are up to date.
3. Figma docs
We used Figma to mark implemented components with a label. This didn’t allow a quick assessment of how many components are ready and how many are left. When a component was updated, this label was often forgotten to be removed. We weren’t sure that the implemented component was up to date, without looking into the code and comparing it to Figma.
When new components or icons were added, or existing ones were updated, we didn’t receive any notifications. Even though we had time to update them, we didn’t know it was necessary.
We solved this problem by creating an integration between Figma and Notion. With the Figma API, we load components and styles, and with the Notion API, we put them into the database. The script compares what was in Notion and what is in Figma and determines which components and styles were removed, added, or changed, and notifies us in Slack daily. The Slack notification contains a list of changes and messages from the designers who contributed them.
We also use Notion to mark which of the components are implemented. The script itself clears the Implemented checkbox when the component is updated. In addition, we have statistics and an excellent overview of our work.
That’s it!
Thanks for reading and I hope this article inspires you to create your own tools and automations.
