Export: add a Figma Variables JSON format
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 62/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- figma, typescript
- Domain
- design
Research direction
Start with the "Adding a new export format" section of CONTRIBUTING.md, then read the bootstrap format in lib/tokens/formats.ts to copy its structure. Add a Figma Variables format that emits variableCollections with Light and Dark modes, colors as r/g/b/a floats, and semantic colors as VARIABLE_ALIAS references. Done when lib/tokens/formats.test.ts passes with a schema check against the request shape in Figma's REST docs, and pnpm test is green.
Written by the indexing model from the issue text.
Description
Summary
Add a Figma Variables export: a JSON file in the shape of Figma's variables REST API (variableCollections with Light and Dark modes, variables for colors, spacing and radius) so it can be imported with a plugin or the API.
Where to look
- CONTRIBUTING.md, "Adding a new export format"
lib/tokens/formats.ts: thebootstrapandchakraformats are recent exampleslib/tokens/formats.test.ts- Figma's REST API docs for
POST /v1/files/:key/variables
Behaviour
- Colors as
{ r, g, b, a }floats; semantic colors as aliases (VARIABLE_ALIAS) to the base variables.
Acceptance criteria
- The output validates against the documented request shape (add a test with a small schema check).
- Light and Dark modes carry the right role colors.
Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build. See CONTRIBUTING.md and the first contribution walkthrough.
Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.
- Dominant language
- TypeScript
- Stars
- 11
- Forks
- 3
- Avg merge
- 5h 23m
- Merged PRs (30d)
- 74
Getting set up
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from yakew7/DesignHub
-
difficulty: easy enhancement good first issue help wanted testing v2.0.0
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
area: ui difficulty: easy enhancement good first issue help wanted v2.0.0
Difficulty 3/5 1-2 days Newbie friendliness 62/100
Maintainers usually reply within 1 day
-
area: projects difficulty: easy enhancement good first issue help wanted v2.0.0
Difficulty 3/5 1-2 days Newbie friendliness 66/100
Maintainers usually reply within 1 day
-
area: projects difficulty: easy enhancement good first issue help wanted v2.0.0
Difficulty 3/5 1-2 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
area: ui difficulty: medium enhancement help wanted v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 45/100
Maintainers usually reply within 1 day
All issues in yakew7/DesignHub
Similar issues
-
area: infrastructure bug priority: low
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
snapotter-hq/SnapOtter#4575 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
documentation server-memory v2
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
modelcontextprotocol/servers#5457 ·
Maintainers usually reply within 1 day
-
comp: ssr comp: zones type: feature version: current (v17+)
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
angular/angularfire#3836 ·
Maintainers usually reply within 3 days
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day