Skip to content

Support layer-walking and CSS extraction through the CLI or the REST API #305

@megadevgmbh

Description

@megadevgmbh

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" ...

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions