Introduction

The RIP proposal for Design Assets Synchronisation and Consolidation aimed to synchronise the currently developed storybook components into Figma design system library and setup a system so that the design & developer collboration is made possible in a decentralized manner.

During the Season 6 cohort period I was able to take up the task and sync developed components from Storybook into the Figma. Currently we have almost all the components from Storybook synced into new Figma file that needs to be published to make it available across all the guild members.

The next task was to look into a solution and prepare a detailed documentaion on how to keep the file continously updated and maintain collaboration when any other guild members wants to contribute into the design system.

For this part I made some brainstorming and research on what could be a possible way for any other guild members to contribute into the design system. So, I prepared a detailed documentation and made a PR to the RaidGuild Handbook GitHub with much details and screenshots for anyone to take reference and follow the steps to either use or contribute towards the design system.

For the next part of the project that was to develop a solution on updating the Figma & Storybook components automatically I did some of my research and was not able to find a solution which can handle updates on both the sides. But, I was able to find a solution that can update Figma components if any changes is done in the Storybook components. The details can be found here.

Challenges

The current solution can help us to keep our Figma library updated automatically when any changes is done in the Storybook component. But we cannot update Storybook component automatically if any changes is done in the Figma as it would require the code to be automatically updated for the changes to take effect in the Storybook.

In the normal world the ideal flow is:

• a designer takes up the required scope
• does some research & brainstorm
• creates a design mockup
• iterate on the designs (if required)
• hand overs the design to the developers for its development

Rather than a developer jumping into front-end design first and then a designer maintaining the design files based on the developed components which is not an ideal flow to collaborate on projects.

Proposed solution

By the time we find a solution where we can automatically update Storybook by making changes to Figma. I would like to propose an ideal workflow that guild members can follow and will also help us to maintain the designer and developer collaboration in an efficient way.

1. Encourage guild members to go through the handbook documentation to learn about the collaboration process.
2. A designer takes up the task or propose any changes that he thinks is required into the design system library.
3. Prepare new designs or components.
4. Review the final designs from the member responsible for design system management.
5. Prepare a documentaion on the design made or any changes propsoed to the existing design (this can also be done through GitHub issues).
6. Hand over the designs along with documentation to the developer.
7. Once the development has been done the Figma component can be linked with the Storybook component (like in the current design file).

Note: We can still integrate the avialable plugin as a part of one way automation to update Figma components if any changes has been done from Storybook in an urgent basis. This will also let designers know what changes were made in the code that updated the Figma component.

If the proposed soltuion and integration is approved by the Guild members, following things will be required for the final release:

• Signup for plugin feature early access
• Access to Storybook for integration
• Some rework on existing Figma file for integration
• Paid Figma plan to publish library
• A developer support (optional)
• A guild members taking responsibility to look after the design system in a certain period of time

Design Asset Synchronisation from Figma to Storybook

Using the Token Studio plugin the design system components have been updated that also generates JSON code which is then used in the storybook to synchronise Figma designs with the code.

Steps to setup and use Token Studio Plugin

1. Get edit access for the Design system Figma file
2. Go to Figna plugins and Search for Token Studio
3. After you run the plugin it will ask to enter credentials to be able to pull design tokens
4. Credential is basically a personal access token code of the GitHub repo in which the token have been stored
5. You can request for access token from a Guild member responsible for managing the GitHub repo for the design system
6. Once the access token is provided you will see an option to pull tokens from GitHub to Figma
7. Finally you can see all the design tokens in the Plugin that can also be used to design new components
8. Use the tokens to design new components

Note: Codes are generated and synced only for the Tokens and not for the components.

How to Push and Pull tokens from Figma to GitHub and vice-versa.

1. If you have added a new token or updated an existing token in the design system file you will have to push those changes into the code for synchronisation in the Storybook
2. First select the Styles & variables option to create new styles in the Figma file from the tokens
3. Select the style type that you have added/updated
4. Then click on Create to add those styles in the Figma
5. Next, Click on Apply to Document button to apply the latest changes in the Figma file (this will update all the components)
6. In the left bottm you can select the GitHub branch to push changes
7. Click on Push icon to send the changes into GitHub code
8. Similarly if a dev notofies about changes done from the code side in the tokens you can select the Pull icon to update those changes into the Toekn studio and follow the steps from 2-5 above to apply changes in the Figma file/components.

Loom video links

• Setup and use Token Studio plugin
• Create a new Token using plugin
• Create component from tokens
• Push changes to GitHub
• Pull updates from GitHub