Support layer-walking and CSS extraction through the CLI or the REST API
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- figma, typescript
- Domain
- developer-experience
Research direction
Start by reading the Code Connect CLI and REST API entry points, then review the Get File Nodes endpoint described in the issue and how it exposes node styling properties. The requested work spans layer traversal and access to generated dev-mode CSS, but the issue does not identify files or tests. Done means a CLI or REST API interface can walk a design node and its children and provide the CSS output.
Written by the indexing model from the issue text.
Description
Describe the feature you'd like:
TL;DR:
It would be amazing to have the functionality to automatically scaffold code from a Figma design by offering interfaces to walk layers in the design and extract generated dev-mode CSS code.
These interfaces could be offered in the code-connect CLI or the REST API.
Long version
I've been looking at a way to automate some tedious frontend-work recently. We use Figma a lot and I've been thinking to automate the process of extracting layers/nodes and CSS code for new designs.
The idea was to run a script, provide the Figma URL to a node of a design, and then have the script walk the node and its children, extracting the basic structure (and i.e. duplicating that in HTML) as well as extract the dev-mode CSS code and save that too.
The REST API is already part of the way there. We can use the Get File Nodes Endpoint to query information about a node and its children.
The queried information contains styling information as well, such as layoutMode, padding*, layoutSizing* and more, however there is no CSS code that comes with it. We would have to manually map all those different properties to CSS code.
The endpoint takes a plugin_data query parameter, however I didn't find any ID for the native CSS-code "plugin" ...
- Dominant language
- TypeScript
- Stars
- 1.6k
- Forks
- 126
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
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 figma/code-connect
-
normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffixOpen
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
figma/code-connect#419 ·
-
feature request
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
figma/code-connect#403 ·
-
feature request
Difficulty 5/5 Over a week Newbie friendliness 38/100
figma/code-connect#414 ·
-
feature request
Difficulty 4/5 3-5 days Newbie friendliness 48/100
figma/code-connect#413 · 1 comment ·
-
feature request
Difficulty 4/5 3-5 days Newbie friendliness 54/100
figma/code-connect#412 · 1 comment ·
All issues in figma/code-connect
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
jeanibarz/knowledge-base-mcp-server#1268 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
Koenkk/zigbee-herdsman-converters#13820 ·
Maintainers usually reply within 2 days
-
A live recovery copy treats a large whole number and text with the same digits as the same valueOpenbug sharing & sync
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
[prefer-expect-resolves] autofix leaves a stray ")" when the awaited expression is parenthesizedOpen
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
jest-community/eslint-plugin-jest#2052 ·