Sync Variables to GitHub

Want to sync your Figma Variables with your codebase? In this video, we'll show you how to use our Variables GitHub Action example repo to sync your Figma Variables to your codebase and vice versa.
Timestamps:
0:00 - Introduction
1:35 - Figma to Tokens (Code)
4:09 - Tokens (Code) to Figma
5:09 - Run Actions Locally
6:11 - Modifications (Ways you can modify the example for your own needs)
Useful Links:
- Syncing design systems using Variables REST API Figjam: bit.ly/3qFOr7r
- Figma-provided Variables GitHub Action example repo: bit.ly/3R7qpM4
- Get Started with Variables Community File:
bit.ly/46KLamt
Other Useful Links:
- Figma Variables REST API Documentation: bit.ly/3Rc1TsW
- GitHub Actions Documentation: bit.ly/3GzAI6o
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/

[@robertbecker2771]

Sad to see the feature hidden behind the enterprise package. We have the organinzation plan and would love to use it. As we are proofing the value and implementation of a proper connected design system, it sad to see Figma puts a barrier like that into their tool. When you ramped up already from professional to organization and being so greedy to now have such valuable stuff behind another large package.
As much as I loved figma, I really hope there is another player focusing on devdesign from the get go and doesn't put it behind such packages…

[@SpaceFederation]

Exactly. Also the limitation to 4 Modes. We would need just one more to be able to use modes for our viewports.

[@brindo91]

This is so frustrating. I get why they lock certain features behind higher pay walls but this basically assumes that the only companies that are going to need Figma variables to be their single source of truth are huge companies on enterprise with hundreds of designers and it's just not the case. It penalises smaller companies. We're a design team of 5 and we have to use the Tokens Studio plugin to sync with GitHub.
Guess I'll wait to see if they allow exporting of tokens to a json file in the future...

[@AlexRest106]

I agree, these capabilities should really be enabled for Organization plans

[@TerekkiTerekki]

Yea 4 modes is a pain

[@crashmit9832]

@@brindo91 exporting to .json is possible through plugins - but sadly not automatically on library publish

[@BenBloodworth]

This is not a feature that should be locked behind your exorbitantly expensive “Enterprise” plan.
Shame on y’all for straying from championing design systems to extorting them for profit. Y’all need to realize that you’re using up all the faith and good will you had earned with this pay to play approach to critical features.

[@markgmcmanus]

Come on Figma allow everyone the ability to sync to Github, Enterprise is too expensive!

[@gavinstokes]

Hi, thanks for the tutorial, tried following along but i got the following error "Error: PERSONAL_ACCESS_TOKEN and FILE_KEY environemnt variables are required" whne I tried to run the workflow

[@maxkarkowski]

the repo you linked does not quite work locally.

[@dmitryzhukov3468]

For some reason it didn't work:
Got this error:
message: 'Invalid scope(s): files:read, file_comments:write, file_dev_resources:read, webhooks:write. This endpoint requires the file_read or file_variables:read scope'

[@jhoniemartinez]

Did you find a solution for this? I'm a figma admin and I can't get a response from the variables endpoint beyond this error.

[@Ashenbacken]

You hit their paywall mister, have to be enterprise to access the variable api

[@janpikl3518]

same problem

[@landsman737]

nice

[@MattanIngram]

We use units like rem, em, %, vh, and others that Figma doesn't support, so Figma is always out of sync with our design system. We also have variables that consume other variables for only part of the value (like box shadow color) which is another basic CSS variable feature Figma doesn't support.

[@12XFactor]

Would it be even possible to implement web units in Figma in a proper way? Figma is a web tool, but the canvas is probably a canvas graphic or SVG, right?
Until Figma doesn't support the same flexibility as sass, I'm recommending to focus on sync-able tokens if you really want to be synced with the Figma designs. For example, the color palette. And from code to Figma, I can imagine that the json files (or databases) containing the text contents in different languages could be synced to Figma for the designers.

[@MattanIngram]

@@12XFactor Yeah it's a canvas with a completely custom renderer (not SVG). Basically we just aren't going to sync anything with Figma because it is too incomplete.

[@mangoefromyoutubedotcom]

figma balls

[@yunis5097]

That’s exactly what I was looking for lmao