Streamline your design system processes with Coda + Figma
How to document, maintain, and collaborate on your design system from a single place, using Coda and Figma variables.
![](https://sanity-images.imgix.net/production/d78ab9e3881accc8f678c4a776ebd41d9d9c0a6d-5000x5000.png?w=1200&auto=format%2Ccompress)
![](https://sanity-images.imgix.net/production/3c5368a245f69b698aaf9d8452d61acaf368b350-512x512.png?w=500&auto=format%2Ccompress)
Jasmine Jones
Product Designer at Coda
Engineering · 5 min read
![](https://sanity-images.imgix.net/production/ef8f8be5790d3d67843229c1d27d027304221257-2732x1536.png?w=2000&auto=format%2Ccompress)
Document and track in a single place.
In case you’re not familiar, Coda is an all-in-one workspace that blends the flexibility and familiarity of docs with the structure of spreadsheets. It’s integrated with your other tools and enhanced with automations and AI. All of this makes it the perfect solution for design system documentation. With Coda, you can not only document all of your components, but do so within the structure of a database, making it really easy to search. You can also completely customize your documentation by creating tailored views and embedding additional component information, like Figma comments, data from Storybook, or other engineering resources. Here's our design system template so you can see what this looks like in action.![](https://sanity-images.imgix.net/production/c37be80945b2cf80bcac87bb7f6ffd08f0c43866-2732x1437.png?w=2000&auto=format%2Ccompress)
![](https://sanity-images.imgix.net/production/3c7931b402f26c083f5fa32ee176ae981b8c2b47-2733x1274.png?w=2000&auto=format%2Ccompress)
Manage your Figma variables from Coda.
In case you’re not already using variables in Figma, here’s a quick rundown: Variables are values, like colors or numbers, that can change depending on the context of a design, such as mobile and desktop versions.They save time and effort when building and updating designs, and also help ensure your designs stay consistent—when you update the value of a variable, designs across files can be updated accordingly. With our Figma Pack, you can pull in all of your Figma variable data into Coda, making it easy to add them into your design system documentation. You can create different views of different collections, such as color foundations or spacing, and customize them to display the information you care about. Hovering over each variable provides a preview, and you can open it up to see more details. Coda also pulls in your aliases from Figma.![](https://sanity-images.imgix.net/production/4eade708dbd39b0d695c80484eaa72953e65158d-2642x1457.png?w=2000&auto=format%2Ccompress)
Simplify your engineering handoffs.
Coda doesn’t only help with easy maintenance of your design system—it streamlines your engineering handoffs too. Often, engineers have to jump in and out of Figma to communicate with designers directly, but are doing much of their work in other tools like GitHub, Jira, and Slack. Important information ends up scattered across apps, so key details can get overlooked. Using Coda for our design system documentation has greatly reduced this risk, in particular due to two features: Packs, and automations. Packs are Coda’s integrations with other tools, like Slack and Github (and 500+ others!), and automations enable you to take the manual work out of repetitive tasks. These come together to connect workflows across tools, streamlining the handoff between designers and engineers. For example, when I make a change to a variable, an automation is triggered to notify our #design-system channel on Slack. Engineers are immediately aware that a variable has been updated, and can quickly see in Coda what’s changed.![](https://sanity-images.imgix.net/production/03ff47224f8026aa5a11be03bca0fe6812777c03-2642x1456.png?w=2000&auto=format%2Ccompress)
![](https://sanity-images.imgix.net/production/a7e2024950fc8b47422f721ce0dcccdb7ae9498b-2626x1436.png?w=2000&auto=format%2Ccompress)
Enhance your design system with AI.
One final benefit I want to highlight about using Coda for your design system documentation is that it gives you the power of Coda’s other features, like Coda AI. An example our Software Engineer Bharat Batra likes to show off is using Coda AI to generate new themes that you can then apply to your design system, like a holiday or Valentine’s color palette. Simply generate the theme and then apply to your Figma files automatically—magic!![](https://sanity-images.imgix.net/production/839907f3918f7da963cecff34cd8b9b8cdf1bde0-2642x1457.png?w=2000&auto=format%2Ccompress)