figma
Support layer-walking and CSS extraction through the CLI or the REST API
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" ...
Hey @megadevgmbh, thanks for the report!
Wondering if you've seen Dev Mode MCP? This is a new product of ours aiming to enable developers to generate code based on their Figma selection. Do you think this could suit your use case? https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/
Thanks for the resources. I actually hadn't seen this before.
It seems that this is also somewhat limited for my purpose though, as it gives an LLM all the design context, but also no final code snippets, which I know Figma can generate because that's what we see in the Figma UI.
I know the MCP docs mention that there is an
interactive code representation with React and Tailwind
however we don't use either of those.
Furthermore, I believe that for the task at hand, AI is a little overkill anyways. What I want to accomplish can easily be done deterministicly with an automation script.
As I mentioned before, the REST API already provides the Figma layout styles, such as layoutSizingHorizontal: "HUG". All I need is either the generated CSS code as it is displayed in the Figma UI, or the mapping strategy that Figma UI uses itself, to map Figma properties (such as HUG) to CSS code.