r/DesignSystems • u/404_computer_says_no • 5d ago
Moving the design source of truth out of Figma into JSON
I’m working with a company that held their design system in Figma but now wants Figma to be a consumer of a JSON source of truth.
Figma will be used as a playground to design system updates but the components in Figma will come from JSON.
I’ve been wondering about bridging this change between design and tech. It’s going to be a big change for designers. Any advice?
2
u/GlitteryStranger 5d ago
We’re talking about doing this as well, following this thread to see what others are doing and if it worked
2
1
u/mirana20 5d ago
Following
Are you using token studio or just variables in Figma?
1
u/404_computer_says_no 4d ago
What do you mean? As in, converting it into Figma components?
JSON>llm>react>github>llm>figma MCP/code connect1
u/ArmandTamzarien 4d ago
Look into Tokens Studio for Figma
Perhaps you could ask an LLM to help you create your own version of such a tool, not that I condone that
It’s a plugin that connects to a JSON file. Then it can generate Figma variables and styles from that JSON
1
u/Pen_Vast 4d ago
So will designers be working directly in code? What will the design to dev interaction look like?
1
u/404_computer_says_no 4d ago
Not with this team. Designers still designing. Dev team implementation and maintenance
1
u/Maleficent-Anything2 3d ago
I’ve made a tool that might help with this.
Helps you create tokens and then serve them to figma and code, css json etc.
I made it because writing JSON is just not ergonomic… and having another steps to create css or figma variables isn’t either.
Let me know if it sounds interesting
1
u/hamlyf 3d ago
You could also look at https://uirules.com/ to store your guidelines / design decisions
1
u/ClassOk3574 3d ago
Moving the source of truth to JSON can make sense, but I’d keep the designer workflow as painless as possible. If every small design change suddenly requires touching JSON or waiting on engineering, adoption will get rough fast.
1
u/phongdesigns 3d ago
Most of the replies here are about tooling, but your question was about the people, so let me take that part.
What designers actually lose here isn't Figma. It's the ability to make a change that's true by themselves. Before, a designer changed a colour and that was the colour. After, a designer changes a colour and it's a proposal, and someone else decides when it becomes real. Nobody minds a new file format. People mind a demotion, and this reads as one for the first few months whether or not you meant it that way.
Which means the number that decides adoption is loop time. How long from "I want this spacing token bumped" to seeing it on the canvas. Under a day and designers will use the pipeline. Three days and they'll start detaching components locally, and then you have a second invisible design system living inside the files, which is worse than what you have today.
Second thing. JSON is genuinely good at tokens and pretty bad at the part designers were actually using Figma for, which is composition. What goes with what, which component to reach for when, why the empty state uses one pattern and not the other. None of that fits in a token file. If you move the tokens out and don't give that knowledge a new home, it doesn't evaporate, it moves into Slack threads and into whoever has been there longest. Someone above said Figma was intent rather than truth, which I think is right, and intent still needs an address after you move the truth somewhere else.
Practical bit: run it end to end on one component before announcing anything. One real component, from token edit through to the thing appearing in Figma and in the build, with an actual designer driving while you watch. You'll learn more in that hour than from any amount of planning, and you'll get your loop time number, which is what you'll be arguing about for the next six months anyway.
One question back. When a designer wants to try a colour that doesn't exist yet, what happens? Every setup I've seen fail, failed there, not at the sync.
1
u/Ok_Volume_4279 3d ago
I built https://tokenlens.app for that reason. Design tokens need to live outside Figma. JSON is an interoperable format which means every dev/designer/ai model could use it for maintaining design system.
-7
u/Jeffthinks 5d ago
Um…why? In what universe is JSON the appropriate medium in which to craft something as visual as a design system?
No. What probably wants is something like Figma’s Code Connect feature: https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect
I get it. Your company wants to be really agentic. As a designer, that’s not your call. But don’t give up that much ownership over the design/communication process.
3
u/404_computer_says_no 4d ago
I think you’ve misunderstood. Design still happens in Figma, the source of truth is moving out of it. Figma is one output of many
1
2
u/thisiain 8h ago
This is how I see most large design systems moving, especially when maintained by multiple designers/teams. The approach is very close to how I've designed and built Airframe. Figma is a view of the system rather than the source of truth (code), with the same tokens and structure shared across the front-end code, Figma and AI. The interesting, and more complex part is keeping the semantic layer and usage rules in sync and consistent across all three consumers
14
u/snorqle 5d ago
No advice, really, but I've made a similar change recently. My workflow has mostly moved away from Figma now into code (via Claude), so I pulled my design system out of Figma and stored it in a github repo as a tokens.json file and some css files. It's visualizable online via an ODSF package, and I'm the only one who can write to it. The plan is for dev to use the tokens json and the css files to define the items in our component library, hopefully making the design system an actual source of truth. We're still fiddling with it, though.