Try   HackMD

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.

Video Guides for Token Studio Plugin
Google Drive Link

  • Setup and use Token Studio plugin - Watch video
  • Create a new Token using plugin - Watch video
  • Create component from tokens - Watch video
  • Push changes to GitHub
    When there is any chnages made to the tokens using the plugin you can push those changes to the GitHub repo using the Push to GitHub option in the plugin.
  • Pull updates from GitHub
    • When a changes have been made in the token repository code and pushed into the Github repo by someone you can pull those changes by selecting the Pull from GitHub option in the token studio plugin.
    • Next you can sync those changes to Figma file by simply selecting "Create Style & Variable" option in the plugin and the same will be updated in the Design system figma file.