What is Ficus?

It’s an internal tool

This is an internal tool from Microsoft Design and not supported or warranted in any way. No guarantees are made that this will work for you or even continue to be accessible, or that it will continue to be developed.

It connects variables in Figma to tokens in GitHub

Ficus connects your variables in Figma to token JSON in GitHub. After initial setup:

1. Make a change to one or more variables in Figma: say, making Color/Red darker
2. Click the "Create a pull request" button in Ficus
3. Ficus opens a pull request on GitHub containing the exact changes made to your variables: in this example, changing Color.Red from #ff0000 to #990000.

With Ficus, designers can make changes that would have previously required manual handoff to an engineer, and those changes integrate with the same systems for reviews and versioning and so on that engineers are already using.

What Ficus isn’t

Ficus saves tokens in the W3C Design Token Community Group draft format. It doesn’t support other token file formats, does not work with design tools other than Figma, and does not work with tokens stored outside of GitHub. It does not transform token JSON into code (say, CSS variables).

How do I set it up?

• Preparing your GitHub repo to work with Ficus (mostly for engineers)
• Setting up Ficus and making your first pull request (mostly for designers)

Legal info

Ficus is © 2023-2024 Microsoft and developed by Microsoft Design. Terms of use. Privacy. Code on GitHub.