Ingest style tokens from Figma file

[GLips]

It would be nice to be able to ingest variables from Figma and create or update tokens—CSS variables, Tailwind configs, etc—in code. Will require a new endpoint.

[VienLi]

I am trying to restore the figma design more perfectly and extract the design specifications.

1. Compress simplifiedResponse and extract common layout and style as variables.
2. Extract vector elements that are not easy to implement in code and convert them into image nodes.
   Still learning....

{
  "name": "UI",
  "nodes": [
    {
      "id": "0:91",
      "name": "Create Video",
      "type": "TEXT",
      "textStyle": "style_P40VP0",
      "fills": "fill_HCLAPB",
      "text": "Create Video",
      "size": {
        "width": 88,
        "height": 18
      }
    }
  ],
  "globalVars": {
    "fill_HCLAPB": [
      {
        "rgba": "rgba(255, 255, 255, 1)"
      }
    ],
    "style_P40VP0": {
      "fontFamily": "Merriweather",
      "fontWeight": 700,
      "fontSize": 20,
      "lineHeight": "25.139999389648438px",
      "textAlignHorizontal": "LEFT",
      "textAlignVertical": "TOP"
    },
    "childrenToParents": {
      "vector_ACAEHB": [
        "0:96"
      ],
      "vector_BB8S9B": [
        "0:103"
      ],
      "vector_6FR6P5": [
        "I0:108;2552:17336",
        "I0:108;2552:19136",
        "I0:108;2552:19676",
        "I0:108;2552:20144",
        "I0:108;2552:20561",
        "I0:108;2552:21026",
        "I0:108;2552:21482",
        "I0:109;2552:17336",
        "I0:109;2552:17961",
        "I0:109;2552:19136",
        "I0:109;2552:19676",
        "I0:109;2552:20144",
        "I0:109;2552:20561",
        "I0:109;2552:21026",
        "I0:109;2552:21482",
        "I0:110;2552:17336",
        "I0:110;2552:17961",
        "I0:110;2552:19136",
        "I0:110;2552:19676",
        "I0:110;2552:20144",
        "I0:110;2552:20561",
        "I0:110;2552:21026",
        "I0:110;2552:21482",
        "I0:111;2552:17336",
        "I0:111;2552:17961",
        "I0:111;2552:19136",
        "I0:111;2552:19676",
        "I0:111;2552:20144",
        "I0:111;2552:20561",
        "I0:111;2552:21026",
        "I0:111;2552:21482"
      ]
    }
  }
}

[GLips]

Neat @Li-vien—I see some of the changes you're working on in your fork. Looks promising, as long as AI agents are able to keep track of references to more global CSS values rather than in-line with the various layout elements.

[GLips]

@Li-vien are you working on code that can be merged back into the main repo? I'd welcome contributions!

Otherwise I'll probably tackle this in the next week or so.

[VienLi]

There are a lot of customized modifications in my branch, wait for me to sort it out...

[Sidnioulz]

@GLips I have a proposal which I believe would solve this issue better than using Figma variables alone.

Figma variables only provide code syntax for native CSS, swift and kotlin, and so teams that use e.g. tailwind, PandaCSS, SCSS or more exotic options have to resort to codegen plugins or to not having variable mapping.

However, tools like Style Dictionary and Terrazzo already map Figma names to exact code identifiers. I'm working with these tools' maintainers to produce a JSON report of available tokens that would map the "designName" (exact Figma variable syntax e.g. bg/primary) and "codeName" (exact code to use e.g. theme('bg.primary') for CSS-in-JS or bg-primary for Tailwind).

I have my own uses for such a report (search index building, doc generation), but I'd be curious to know if you have a way to identify such a file, possibly provided by a NPM package, and make use of it to translate tokens in your MCP?

If so, my goal would be to agree on an output format with the token tool maintainers (knowing I have a go from Terrazzo already) and I'd be happy to contribute integrating it to your MCP too.

[wobba]

Will this work be able to extract layout styles like below, as seems this is not coming thru today from my testing. Ref'ing a component which has the following style did not crate it the same.

[Sidnioulz]

In this instance it would be the same. My proposal would only translate Figma variables to code. Your example shows hardcoded values so these would not change. I suppose the MCP should already provide those values?

[GLips]

Yes, @Sidnioulz's assumption is mine as well. If autolayout or padding information wasn't picked up properly, that's a bug.

@wobba if you're having an issue extracting layout data (regardless of if it's a Figma value, style, or variable), I'd appreciate if you could file an issue with an example design that demonstrates the problem.

[GLips]

My proposal would only translate Figma variables to code.

Crucially, this proposal would make the names of variables accessible via the MCP. The values should already be provided today. The issue is in helping the coding agent on the other end—the one doing the implementation—to be aware of extant variables in the codebase and reduce code duplication, increase consistency, better support future maintainability, etc.

[Sidnioulz]

Relevant RFC I've posted that would allow me to move forward with this proposal: style-dictionary/style-dictionary#1479

[wobba]

Thank you @GLips. I'll test some more on my prompts and see what it fetches of styles and log a separate issue with details and possible repro.

The one I example I tried it did not pull the flex styles as an example. I've just gotten started with the server to see how it can move design over to react components following the designers redlines.