feat(design-system): setup Figma Code Connect CLI [AR-71339] - #553
Conversation
✅ Deploy Preview for drivenets-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
why do we need a release for this?
There was a problem hiding this comment.
Even though it's related to Design System it doens't affect the DS package itself, so I'll remove it.
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"], |
There was a problem hiding this comment.
It was intentional, we can define Figma Code Connect configuration via storybook files and probably will for complex components like Table.
There was a problem hiding this comment.
Let me remove it and add it back when we really need to define figma code connect via storybook files.
7edeebc
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-v2ds-button-v3ds-text-inputds-modal