Support Design Tokens

[marlonmarcello]

Hey team! Don't know if this is the correct channel to ask this, and I apologize if it isn't, but are there any plans to support the Design Tokens Format being worked on by W3C and the design community?

I'd be great if we could have a schema and specification, like we do now for components, that could output the variables inside Figma with code connect.

[ptomas-figma]

Thanks for your comment! As of now, we don't have plans for supporting tokens as part of Code Connect. However, we shared an example of how to use the Variables REST API to do so here. This could run in parallel to Code Connect in CI for example. Would this work for your use case? If not, what'd you like to see in a Tokens integration?

[marlonmarcello]

Thanks so much for getting back to me! I poked around that repo and it's a great resource, thank you. I like the idea of running them in parallel too. Might create some custom scripts to do the same during development just make things a little nicer to use.

With regards to features for Tokens and Code Connect I had a few ideas.
It would be nice is this syncing process was seamless and we could used a .figma.tsx file to sort of define the tokens "schema". For example, for components we are able to point a Figma component property to a specific React component:

import React from "react"
import figma from "@figma/code-connect"

import { Button } from "./index"

figma.connect(
  Button,
  "figma-url",
  {
    props: {
      icon: figma.enum("Left Icon"),
    },
    example: (props) => <Button {...props} />,
  }
)

In this example the Left icon property becomes the icon prop.

It'd be great if we could do something similar with Tokens too through a definition file like this one. Imagine being able to do this:

figma.tokens(
  "radius",
  {
    "sm": (val) => convertToRem(val)
  }
)

This might be a silly example but, in this case the collection of variables named radius has an sm variable which we convert in code from a fixed value to a relative rem value.

Another great thing would be if Code Connect then used this to converted the tokens into different formats like CSS variables, Sass variables, etc.