feat(design-system): setup Figma Code Connect CLI [AR-71339]#553
feat(design-system): setup Figma Code Connect CLI [AR-71339]#553iromanchuk-dn wants to merge 5 commits into
Conversation
✅ Deploy Preview for drivenets-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| export default { | ||
| example: | ||
| structure === 'icon-only' |
There was a problem hiding this comment.
just curious... so we define examples here (hard code) and in the stories? 🤔
There was a problem hiding this comment.
Great question!
I had a debate over this half of the day yesterday.
Here is my conversation with LLM: https://chatgpt.com/share/e/6a351ac3-55ec-832e-b54d-fb7ed40f2a75
TLDR: we keep figma.ts files small and simple, for complex examples like DsTable we rely on Storybook.
I've implemented ds-status-badge-v2 docs via "Figma Code Connect + Storybook integration" and via ".figma.ts" file. "Figma Code Connect + Storybook integration" is very limited, I could not map "icon-only" boolean React prop to "structure=='icon-only'" property in Figma, also stories that render all possible component variants at once are not suitable for Figma Code Connect. Comparing the code of 2 approaches I could clearly see that .figma.ts is better, despite it looks like a duplicated at first glance. Moreover, Figma MCP contains skill that help you write figma.ts file, so it's even easier to maintain separate files than inside storybook.
| ? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />` | ||
| : figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`, | ||
| imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"], | ||
| id: 'ds-status-badge-v2', |
There was a problem hiding this comment.
curious, what happens if we change the name and ID? In figma everything just updates, si?
There was a problem hiding this comment.
Yes, every time figma publish command runs, it overwrites everything
There was a problem hiding this comment.
why do we need a release for this?
There was a problem hiding this comment.
let's separate this into 2 workflows
- pull_request - validation (
figma-code-connect-validate.yml) - push: main - publish (
figma-code-connect-publish.yml)
| paths: &figma_paths | ||
| - packages/design-system/**/*.figma.ts | ||
| - packages/design-system/figma.config.json | ||
| - packages/design-system/package.json | ||
| - .github/workflows/figma-code-connect.yml |
There was a problem hiding this comment.
Instead of having a list here, let's move this to a turborepo task, so it'll be cached
| - name: Publish Code Connect files | ||
| run: pnpm --filter @drivenets/design-system figma:publish | ||
| env: | ||
| FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }} |
There was a problem hiding this comment.
Let's talk about this, we'll need to define it. We might need to involve other people for this.
| @@ -0,0 +1,10 @@ | |||
| { | |||
| "codeConnect": { | |||
| "include": ["**/*.figma.ts", "**/*.stories.tsx"], | |||
There was a problem hiding this comment.
| "include": ["**/*.figma.ts", "**/*.stories.tsx"], | |
| "include": ["**/*.figma.ts"], |
| "importPaths": { | ||
| "src/components/*": "@drivenets/design-system" | ||
| }, |
4 participants
Figma Code Connect setup
@figma/code-connectdevDependency and scripts inpackages/design-system/package.json:figma:validate— parse/check mappings locallyfigma:publish— publish to Figma Dev Modefigma.config.json— scans*.figma.ts/*.stories.tsx, maps imports to@drivenets/design-system, React/JSX labeltsconfig.json— includes@figma/code-connect/figma-typesfor editor/type supportCI
.github/workflows/figma-code-connect.yml:FIGMA_ACCESS_TOKENsecretBefore merge
FIGMA_ACCESS_TOKENGitHub Actions secret (Figma PAT with Code Connect write + file content read) so the publish job can run after merge.First component mapping
ds-status-badge-v2.figma.ts— maps the FigmaDsStatusBadgeV2component to React code, handlingphase,variant,size,structure(icon+text / icon-only / text-only), and dynamic label