DS: Figure out Storybook + Figma designs plug-in

[jessicashanshanhuang]

Figuring out how to incorporate Storybook + Figma plug-in

• could help streamline design tokens a lot faster
• need to understand what it is capable of

Currently: prepping pull request to merge design plugin changes to main

• let's start off with a simpler component from scratch (button?)

streetscape repo my current branch

[!IMPORTANT] Currently using designs-plugin branch, for documentation, check out designs plug in guide in design repo

[jessicashanshanhuang]

Background on Storybook and how components work

Why components should be used

what is a story

A story captures the rendered state of a UI component, there are example components that has a set of stories that show the states it supports (Button, Header, Page).

how to create a new story

• i can create stories (states) but can i create my own component outside of the example ones?

• seems like AE is currently using components from Chakra UI and then editing the stories in storybook

• looks like i am able to create template components: how to write stories, subcomponents and templates

  template component: it means you can more easily reuse the args to each story in a composite component. It also means that you can alter the args to the component with the Controls addon

• so it looks like the composite component is what i want to manipulate

  There are two basic levels of organization in Storybook: the component and its child stories. Think of each story as a permutation of a component. You can have as many stories per component as you need.

[jessicashanshanhuang]

Storybook + Figma Compatibility

storybook + figma, how it works

The design addon for Storybook allows you to embed Figma files alongside your code-based components in Storybook. Meanwhile, the Storybook plugin for Figma allows you to embed stories alongside your design components in Figma.

• is chromatic automatically installed with our stories?

storybook designs add on

we are using Storybook 7.6.20

• will need to run the older version of the plugin since the newest one is only compatible with v8
• v7 doc
• storybook designs doc page

for reference: workday's storybook design system, canvas

[jessicashanshanhuang]

was able to get the figma file to embed through design panel on a test button in storybook

[jessicashanshanhuang]

so looks like i am now able to embed figma files into storybook so when a user uses storybook to build a ui component, they can have a live design there.

the next step is to see if i can get the figspec compatibility to work which would allow someone to view the design token specs for the figma design within storybook

[jessicashanshanhuang]

got figspec to work, however unable to push changes to my branch since it does use my figma personal access token and github blocked the push (can bypass if i choose to unblock the secret)

[jessicashanshanhuang]

newest commit has figspec implementation. to use, edit the .env file to include your personal figma token before running dev

[jessicashanshanhuang]

next steps:

• it is possible to sync figma prototypes into storybook, though i'm not sure if that requires upgrading to storybook v8
• update: was able to get a working prototype onto storybook, look at latest commit on figma plugin branch
• damon working on creating a global figma access token for the figspec functionality
• something to look at is this design token automation with figma + github + storybook

questions: - will storybook version be upgraded anytime soon for streetscape?

[jessicashanshanhuang]

Design Token Plug-in

Syncing design tokens between figma + storybook

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.

update: looking more into this, might not be the direct solution i want since it seems there's no direct link from figma to storybook relating design tokens

[damonmcc]

to get npm install to work, I had to drop "@storybook/blocks": "^7.4.1", from package.json

will storybook version be upgraded anytime soon for streetscape?

seems worth trying in ur branch!

[damonmcc]

related to the .env, here are two examples of how AE handles that:

• https://github.com/NYCPlanning/ae-cp-map/blob/main/sample.env
• https://github.com/NYCPlanning/ae-zoning-api/blob/main/sample.env

you should probably change it to sample.env and add .env to the file .gitignore

[jessicashanshanhuang]

to get npm install to work, I had to drop "@storybook/blocks": "^7.4.1", from package.json

will storybook version be upgraded anytime soon for streetscape?

seems worth trying in ur branch!

sounds good! i think for figma designs plug in i didn't really run into that issue but i am currently running to issues with the design token plug ins so i'll see it that fixes that!

[jessicashanshanhuang]

Design Token Automation

• involves github sync with figma which requires a github personal access token
• need to look into more to see how to implement the pipeline

[damonmcc]

Design Token Automation

• involves github sync with figma which requires a github personal access token
• need to look into more to see how to implement the pipeline

@jessicashanshanhuang happy to help with that!

if other significant parts of Storybook + Figma compatibility are working though, might be nice to document/finalize those and break out token automation into it's own issue?

but if tokens are already an integral part of the DS in figma, could totally see why token automation should be an expectation of Storybook + Figma compatibility!

[jessicashanshanhuang]

Outcome

The storybook designs plug-in is implemented in the testing-figma-plugin branch, we are currently running the plug-in for storybook v7. The plug-in is capable of the following:

• able to now access figma wireframes and components through embedded figma file within storybook. when storybook is launch, click on storybook component, and click on the design section where the figma file lives
• able to inspect for css elements in the embedded figma file, use change figma parameter in your the respective storybook components stories tsx file to figspec and add personal figma access token in the sample.env file
• able to access figma prototypes within storybook through embedded figma file that shows the preview version of the prototype. Access the same way by going to a storybook component and clicking on the design section.

Next Steps: I will write a markdown on how to install and use the storybook designs plug in, potentially it will live in the design repo for now.

Next, we will explore the design token automation pipeline to sync simultaneously update design tokens between figma and storybook. Discussion related to this will be in a new git issue.

[jessicashanshanhuang]

updated markdown is in designs-plugin branch of our design repo! i will merge it to main soon after some small tweaks with formatting 🫡

[jessicashanshanhuang]

updated md is now in main of our design repo!

[jessicashanshanhuang]

reopened to initiate pull request for ae-streetscape

[!NOTE] the following changes will be on a new branch, designs-plugin in ae-streetscape

to-do:

• [x] link chakra ui kit components from figma to their respective storybook components
• [x] considering how a shared figma personal access token might simplify their use of the plugin
• [x] update designs plug-in documentation in design repo
• [x] rebase to reduce number of commits
• [x] comply with Conventional Commits requirement

[jessicashanshanhuang]

running to an error trying to commit changes, most likely error is coming from npx lint-staged?

[jessicashanshanhuang]

figma chakra ui kit is now linked with storybook components!

published in latest commit in designs-plugin

notes:

• will need to update the chakra ui kit to latest version and apply our styling we currently are curating in streetscape
• seems like current chakra ui kit from figma is from 2021? might need to do some research about current chakra tho not necessary for this pr
• linked almost every component, accordion did not have a respective figma component in our current figma chakra ui kit, the drawer seems to be wip for ae, some buttons do not have a link since they are more customize and doesn't seem to have a direct counterpart in figma

next steps: creating a shared personal access token

[jessicashanshanhuang]

update: shared figma access token on Design vault in 1Password, updated designs plug-in doc

@damonmcc will we need to rebase since designs-plugin branch in ae-streetscape are only two commits?

[jessicashanshanhuang]

PR initiated, waiting on review!

update: looks like there's some dependency issues, will debug

update 2: looks like we have some peer dependency issues, damon and i plan to create two prs: one to upgrade storybook to latest v7 and another to include the design plug with our upgraded version

[jessicashanshanhuang]

storybook v7 PR now ready to review

• Upgrading Storybook to latest version 7
• in drafts: Designs Plug In, adding figma embed files to storybook components, will rebase once v7 pr gets reviewed
• guide in design updated to reflect changes

[jessicashanshanhuang]

Update: Storybook upgrade pr in review

[jessicashanshanhuang]

Update: Storybook v7 Pr merged, last step is to finish up draft pr for designs plug-in