{"id":509,"date":"2025-08-06T10:00:00","date_gmt":"2025-08-06T10:00:00","guid":{"rendered":"http:\/\/www.guupon.com\/?p=509"},"modified":"2025-08-07T14:19:55","modified_gmt":"2025-08-07T14:19:55","slug":"automating-design-systems-tips-and-resources-for-getting-started","status":"publish","type":"post","link":"http:\/\/www.guupon.com\/index.php\/2025\/08\/06\/automating-design-systems-tips-and-resources-for-getting-started\/","title":{"rendered":"Automating Design Systems: Tips And Resources For Getting Started"},"content":{"rendered":"<p>              <title>Automating Design Systems: Tips And Resources For Getting Started<\/title><\/p>\n<article>\n<header>\n<h1>Automating Design Systems: Tips And Resources For Getting Started<\/h1>\n<address>Joas Pambou<\/address>\n<p>                  2025-08-06T10:00:00+00:00<br \/>\n                  2025-08-07T14:02:50+00:00<br \/>\n                <\/header>\n<p>A design system is more than just a set of colors and buttons. It\u2019s a shared language that helps designers and developers build good products together. At its core, a design system includes <a href=\"https:\/\/www.smashingmagazine.com\/2024\/05\/naming-best-practices\/\">tokens<\/a> (like colors, spacing, fonts), <a href=\"https:\/\/www.smashingmagazine.com\/2022\/12\/anatomy-themed-design-system-components\/\">components<\/a> (such as buttons, forms, navigation), plus the <a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/designing-web-design-documentation\/\">rules and documentation<\/a> that tie all together across projects.<\/p>\n<p>If you\u2019ve ever used systems like <a href=\"https:\/\/m3.material.io\/\">Google Material Design<\/a> or <a href=\"https:\/\/polaris-react.shopify.com\/\">Shopify Polaris<\/a>, for example, then you\u2019ve seen how design systems set <strong>clear expectations for structure and behavior<\/strong>, making teamwork smoother and faster. But while design systems promote consistency, keeping everything in sync is the hard part. Update a token in Figma, like a color or spacing value, and that change has to show up in the code, the documentation, and everywhere else it\u2019s used.<\/p>\n<p>The same thing goes for components: when a button\u2019s behavior changes, it needs to update across the whole system. That\u2019s where the right tools and a bit of automation can make the difference. They help reduce repetitive work and keep the system easier to manage as it grows.<\/p>\n<p>In this article, we\u2019ll cover a variety of <strong>tools and techniques for syncing tokens, updating components, and keeping docs up to date<\/strong>, showing how automation can make all of it easier.<\/p>\n<h2 id=\"the-building-blocks-of-automation\">The Building Blocks Of Automation<\/h2>\n<p>Let\u2019s start with the basics. Color, typography, spacing, radii, shadows, and all the tiny values that make up your visual language are known as <strong>design tokens<\/strong>, and they\u2019re meant to be the single source of truth for the UI. You\u2019ll see them in design software like Figma, in code, in style guides, and in documentation. <a href=\"https:\/\/www.smashingmagazine.com\/2024\/05\/naming-best-practices\/\">Smashing Magazine has covered them<\/a> before in great detail.<\/p>\n<p>The problem is that they <strong>often go out of sync<\/strong>, such as when a color or component changes in design but doesn\u2019t get updated in the code. The more your team grows or changes, the more these mismatches show up; not because people aren\u2019t paying attention, but because <strong>manual syncing just doesn\u2019t scale<\/strong>. That\u2019s why <strong>automating tokens<\/strong> is usually the first thing teams should consider doing when they start building a design system. That way, instead of writing the same color value in Figma and then again in a configuration file, you pull from a shared token source and let that drive both design and development.<\/p>\n<p>There are a few tools that are designed to help make this easier.<\/p>\n<h3 id=\"token-studio\">Token Studio<\/h3>\n<p><a href=\"https:\/\/tokens.studio\/\">Token Studio<\/a> is a Figma plugin that lets you manage design tokens directly in your file, export them to different formats, and sync them to code.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/1-token-studio-figma.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"503\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/1-token-studio-figma.png\" alt=\"Token Studio\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/1-token-studio-figma.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"specify\">Specify<\/h3>\n<p><a href=\"https:\/\/specifyapp.com\/\">Specify<\/a> lets you collect tokens from Figma and push them to different targets, including GitHub repositories, continuous integration pipelines, documentation, and more.<\/p>\n<figure class=\"video-embed-container break-out\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<h3 id=\"design-tokens-dev\">Design-tokens.dev<\/h3>\n<p><a href=\"https:\/\/design-tokens.dev\/\">Design-tokens.dev<\/a> is a helpful reference if you want tips for things like how to structure tokens, format them (e.g., JSON, YAML, and so on), and think about token types.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/2-design-tokens-dev-screen.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"370\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/2-design-tokens-dev-screen.png\" alt=\"Design-tokens.dev screen showing the output of named design tokens generated by the system.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/2-design-tokens-dev-screen.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"namedesigntokens-guide\">NameDesignTokens.guide<\/h3>\n<p><a href=\"https:\/\/namedesigntokens.guide\/\">NamedDesignTokens.guide<\/a> helps with naming conventions, which is honestly a common pain point, especially when you\u2019re working with a large number of tokens.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/3-token-configuration.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"644\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/3-token-configuration.png\" alt=\"Token configuration\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/3-token-configuration.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Once your tokens are set and connected, you\u2019ll spend way less time fixing inconsistencies. It also gives you a solid base to scale, whether that\u2019s adding themes, switching brands, or even building systems for multiple products.<\/p>\n<p>That\u2019s also when naming really starts to count. If your tokens or components aren\u2019t clearly named, things can get confusing quickly.<\/p>\n<p><strong>Note<\/strong>: <em>Vitaly Friedman\u2019s \u201c<a href=\"https:\/\/www.linkedin.com\/posts\/vitalyfriedman_how-to-name-things-httpslnkdineirqgv9a-activity-7338149568607363073-j0\">How to Name Things<\/a>\u201d is worth checking out if you\u2019re working with larger systems.<\/em><\/p>\n<p>From there, it\u2019s all about components. Tokens define the values, but components are what people actually use, e.g., buttons, inputs, cards, dropdowns &mdash; you name it. In a perfect setup, you build a component once and reuse it everywhere. But without structure, it\u2019s easy for things to \u201cdrift\u201d out of scope. It\u2019s easy to end up with five versions of the same button, and what\u2019s in code doesn\u2019t match what\u2019s in Figma, for example.<\/p>\n<blockquote><p>Automation doesn\u2019t replace design, but rather, it connects everything to one source.<\/p><\/blockquote>\n<p>The Figma component matches the one in production, the documentation updates when the component changes, and the whole team is pulling from the same library instead of rebuilding their own version. This is where real collaboration happens.<\/p>\n<p>Here are a few tools that help make that happen:<\/p>\n<table class=\"tablesaw break-out\">\n<thead>\n<tr>\n<th>Tool<\/th>\n<th>What It Does<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a><\/td>\n<td>Lets you design using real code components. What you prototype is what gets built.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/www.supernova.io\/\">Supernova<\/a><\/td>\n<td>Helps you publish a design system, sync design and code sources, and keep documentation up-to-date.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/zeroheight.com\/\">Zeroheight<\/a><\/td>\n<td>Turns your Figma components into a central, browsable, and documented system for your whole team.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"how-does-everything-connect\">How Does Everything Connect?<\/h2>\n<p>A lot of the work starts right inside your design application. Once your tokens and components are in place, tools like Supernova help you take it further by extracting design data, syncing it across platforms, and generating production-ready code. You don\u2019t need to write custom scripts or use the Figma API to get value from automation; these tools handle most of it for you.<\/p>\n<p>But for teams that want full control, <a href=\"https:\/\/www.figma.com\/developers\/api\">Figma does offer an API<\/a>. It lets you do things like the following:<\/p>\n<ul>\n<li>Pull token values (like colors, spacing, typography) directly from Figma files,<\/li>\n<li>Track changes to components and variants,<\/li>\n<li>Tead metadata (like style names, structure, or usage patterns), and<\/li>\n<li>Map which components are used where in the design.<\/li>\n<\/ul>\n<p>The Figma API is <strong>REST-based<\/strong>, so it works well with custom scripts and automations. You don\u2019t need a huge setup, just the right pieces. On the development side, teams usually use Node.js or Python to handle automation. For example:<\/p>\n<ul>\n<li>Fetch styles from Figma.<\/li>\n<li>Convert them into JSON.<\/li>\n<li>Push the values to a design token repo or directly into the codebase.<\/li>\n<\/ul>\n<p>You won\u2019t need that level of setup for most use cases, but it\u2019s helpful to know it\u2019s there if your team outgrows no-code tools.<\/p>\n<ul>\n<li>Where do your tokens and components come from?<\/li>\n<li>How do updates happen?<\/li>\n<li>What tools keep everything connected?<\/li>\n<\/ul>\n<p>The workflow becomes easier to manage once that\u2019s clear, and you spend less time trying to fix changes or mismatches. When tokens, components, and documentation stay in sync, your team moves faster and spends less time fixing the same issues.<\/p>\n<h2 id=\"extracting-design-data\">Extracting Design Data<\/h2>\n<p><strong>Figma<\/strong> is a collaborative design tool used to create UIs: buttons, layouts, styles, components, everything that makes up the visual language of the product. It\u2019s also where all your design data lives, which includes the tokens we talked about earlier. This data is what we\u2019ll extract and eventually connect to your codebase. But first, you\u2019ll need a setup.<\/p>\n<p>To follow along:<\/p>\n<ol>\n<li>Go to <a href=\"https:\/\/figma.com\">figma.com<\/a> and create a free account.<\/li>\n<li>Download the Figma desktop app if you prefer working locally, but keep an eye on system requirements if you\u2019re on an older device.<\/li>\n<\/ol>\n<p>Once you\u2019re in, you\u2019ll see a home screen that looks something like the following:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/4-figma-dashboard.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/4-figma-dashboard.png\" alt=\"Figma dashboard showing a left sidebar navigation for exploring design files and a grid of thumbnail images on the right for previewing specific files.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/4-figma-dashboard.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>From here, it\u2019s time to set up your design tokens. You can either create everything from scratch or <a href=\"https:\/\/www.figma.com\/templates\/\">use a template from the Figma community<\/a> to save time. Templates are a great option if you don\u2019t want to build everything yourself. But if you prefer full control, creating your setup totally works too.<\/p>\n<p>There are other ways to get tokens as well. For example, a site like <a href=\"https:\/\/namedesigntokens.guide\/\">namedesigntokens.guide<\/a> lets you generate and download tokens in formats like JSON. The only catch is that Figma doesn\u2019t let you import JSON directly, so if you go that route, you\u2019ll need to bring in a middle tool like Specify to bridge that gap. It helps sync tokens between Figma, GitHub, and other places.<\/p>\n<p>For this article, though, we\u2019ll keep it simple and stick with Figma. Pick any design system template from the Figma community to get started; there are plenty to choose from.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/5-collection-figma-templates.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"480\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/5-collection-figma-templates.png\" alt=\"Showing a collection of Figma templates contributed by community members.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/5-collection-figma-templates.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Depending on the template you choose, you\u2019ll get a pre-defined set of tokens that includes colors, typography, spacing, components, and more. These templates come in all types: website, e-commerce, portfolio, app UI kits, you name it. For this article, we\u2019ll be using the <a href=\"https:\/\/www.figma.com\/community\/file\/1055785285964148921\"><strong>\/Design-System-Template&ndash;Community<\/strong><\/a> because it includes most of the tokens you\u2019ll need right out of the box. But feel free to pick a different one if you want to try something else.<\/p>\n<p>Once you\u2019ve picked your template, it\u2019s time to download the tokens. We\u2019ll use <strong>Supernova<\/strong>, a tool that connects directly to your Figma file and pulls out design tokens, styles, and components. It makes the design-to-code process a lot smoother.<\/p>\n<h3 id=\"step-1-sign-up-on-supernova\">Step 1: Sign Up on Supernova<\/h3>\n<p>Go to <a href=\"https:\/\/supernova.io\">supernova.io<\/a> and create an account. Once you\u2019re in, you\u2019ll land on a dashboard that looks like this:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/6-supernova-dashboard.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"373\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/6-supernova-dashboard.png\" alt=\"Supernova dashboard in an empty state. There is navigation in the left sidebar and a summary of activity in the main content showing no design tokens, components, assets, or documentation.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/6-supernova-dashboard.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"step-2-connect-your-figma-file\">Step 2: Connect Your Figma File<\/h3>\n<p>To pull in the tokens, head over to the <strong>Data Sources<\/strong> section in Supernova and choose <strong>Figma<\/strong> from the list of available sources. (You\u2019ll also see other options like Storybook or Figma variables, but we\u2019re focusing on Figma.) Next, click on <strong>Connect a new file,<\/strong> paste the link to your Figma template, and click <strong>Import<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/7-supernova-figma.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"384\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/7-supernova-figma.png\" alt=\"Supernova dashboard to connect Figma files\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/7-supernova-figma.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Supernova will load the full design system from your template. From your dashboard, you\u2019ll now be able to see all the tokens.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/8-supernova-figma.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"380\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/8-supernova-figma.png\" alt=\"Supernova dashboard with tokens\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/8-supernova-figma.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"turning-tokens-into-code\">Turning Tokens Into Code<\/h2>\n<p>Design tokens are great inside Figma, but the real value shows when you turn them into code. That\u2019s how the developers on your team actually get to use them.<\/p>\n<p><strong>Here\u2019s the problem<\/strong>: Many teams default to copying values manually for things like color, spacing, and typography. But when you make a change to them in Figma, the code is instantly out of sync. That\u2019s why automating this process is such a big win.<\/p>\n<p>Instead of rewriting the same theme setup for every project, you generate it, constantly translating designs into dev-ready assets, and keep everything in sync from one source of truth.<\/p>\n<p>Now that we\u2019ve got all our tokens in Supernova, let\u2019s turn them into code. First, go to the <strong>Code Automation<\/strong> tab, then click <strong>New Pipeline<\/strong>. You\u2019ll see different options depending on what you want to generate: React Native, CSS-in-JS, Flutter, Godot, and a few others.<\/p>\n<p>Let\u2019s go with the <strong>CSS-in-JS<\/strong> option for the sake of demonstration:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/9-supernova-code-automation-screen.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"383\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/9-supernova-code-automation-screen.png\" alt=\"Supernova Code Automation screen showing options for creating a new pipeline that pulls information from other services to produce code documentation.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/9-supernova-code-automation-screen.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>After that, you\u2019ll land on a setup screen with three sections: <strong>Data<\/strong>, <strong>Configuration<\/strong>, and <strong>Delivery<\/strong>.<\/p>\n<h3 id=\"data\">Data<\/h3>\n<p>Here, you can pick a theme. At first, it might only give you \u201cBlack\u201d as the option; you can select that or leave it empty. It really doesn\u2019t matter for the time being.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/10-supernova-code-automation-screen.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"377\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/10-supernova-code-automation-screen.png\" alt=\"Supernova Code Automation screen\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/10-supernova-code-automation-screen.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"configuration\">Configuration<\/h3>\n<p>This is where you control how the code is structured. I picked <strong>PascalCase<\/strong> for how token names are formatted. You can also update how things like spacing, colors, or font styles are grouped and saved.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/11-supernova-code-automation-screen-configuration.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"380\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/11-supernova-code-automation-screen-configuration.png\" alt=\"Supernova Code Automation screen showing configuration of tokens\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/11-supernova-code-automation-screen-configuration.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"delivery\">Delivery<\/h3>\n<p>This is where you choose how you want the output delivered. I chose <strong>\u201cBuild Only\u201d<\/strong>, which builds the code for you to download.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/12-supernova-code-automation-screen-delivery.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"375\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/12-supernova-code-automation-screen-delivery.png\" alt=\"Supernova Code Automation screen where you choose how you want the output delivered\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/12-supernova-code-automation-screen-delivery.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Once you\u2019re done, click <strong>Save<\/strong>. The pipeline is created, and you\u2019ll see it listed in your dashboard. From here, you can download your token code, which is already generated.<\/p>\n<h2 id=\"automating-documentation\">Automating Documentation<\/h2>\n<p>So, what\u2019s the point of documentation in a design system?<\/p>\n<p>You can think of it as the <strong>instruction manual<\/strong> for your team. It explains <em>what<\/em> each token or component is, <em>why<\/em> it exists, and <em>how<\/em> to use it. Designers, developers, and anyone else on your team can stay on the same page &mdash; no guessing, no back-and-forth. Just clear context.<\/p>\n<p>Let\u2019s continue from where we stopped. Supernova is capable of handling your documentation. Head over to the <strong>Documentation<\/strong> tab. This is where you can start editing everything about your design system docs, all from the same place.<\/p>\n<p>You can:<\/p>\n<ul>\n<li>Add descriptions to your tokens,<\/li>\n<li>Define what each base token is for (as well as what it\u2019s <em>not<\/em> for),<\/li>\n<li>Organize sections by colors, typography, spacing, or components, and<\/li>\n<li>Drop in images, code snippets, or examples.<\/li>\n<\/ul>\n<p>You\u2019re building the documentation inside the same tool where your tokens live. In other words, there\u2019s no jumping between tools and no additional setup. That\u2019s where the automation kicks in. You edit once, and your docs stay synced with your design source. It all stays in one environment.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/13-supernova-code-automation-screen-documentation.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/13-supernova-code-automation-screen-documentation.png\" alt=\"Supernova Code Automation screen where you automate documentation\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/automating-design-systems-tips-resources\/13-supernova-code-automation-screen-documentation.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Once you\u2019re done, click <strong>Publish<\/strong> and you will be presented with a new window asking you to sign in. After that, you\u2019re able to access your live documentation site.<\/p>\n<h2 id=\"practical-tips-for-automations\">Practical Tips For Automations<\/h2>\n<p>Automation is great. It saves hours of manual work and keeps your design system tight across design and code. The trick is knowing when to automate and how to make sure it keeps working over time. You don\u2019t need to automate everything right away. But if you\u2019re doing the same thing over and over again, that\u2019s a kind of red flag.<\/p>\n<p>A few signs that it\u2019s time to consider using automation:<\/p>\n<ul>\n<li>You\u2019re using <strong>the same styles across multiple platforms<\/strong> (like web and mobile).<\/li>\n<li>You have a <strong>shared design system<\/strong> used by more than one team.<\/li>\n<li><strong>Design tokens change often<\/strong>, and you want updates to flow into code automatically.<\/li>\n<li>You\u2019re <strong>tired of manual updates<\/strong> every time the brand team tweaks a color.<\/li>\n<\/ul>\n<p>There are three steps you need to consider. Let\u2019s look at each one.<\/p>\n<h3 id=\"step-1-keep-an-eye-on-tools-and-api-updates\">Step 1: Keep An Eye On Tools And API Updates<\/h3>\n<p>If your pipeline depends on design tools, like Figma, or platforms, like Supernova, you\u2019ll want to know when changes are made and evaluate how they impact your work, because even small updates can quietly affect your exports.<\/p>\n<p>It\u2019s a good idea to check <a href=\"https:\/\/www.figma.com\/developers\/api#changelog\">Figma\u2019s API changelog<\/a> now and then, especially if something feels off with your token syncing. They often update how variables and components are structured, and that can impact your pipeline. There\u2019s also an <a href=\"https:\/\/www.figma.com\/release-notes\/\">RSS feed for product updates<\/a>.<\/p>\n<p>The same goes for <a href=\"https:\/\/updates.supernova.io\">Supernova\u2019s product updates<\/a>. They regularly roll out improvements that might tweak how your tokens are handled or exported. If you\u2019re using open-source tools like <a href=\"https:\/\/v4.styledictionary.com\">Style Dictionary<\/a>, keeping an eye on the GitHub repo (particularly the Issues tab) can save you from debugging weird token name changes later.<\/p>\n<p>All of this isn\u2019t about staying glued to release notes, but having a system to check if something suddenly stops working. That way, you\u2019ll catch things before they reach production.<\/p>\n<h3 id=\"step-2-break-your-pipeline-into-smaller-steps\">Step 2: Break Your Pipeline Into Smaller Steps<\/h3>\n<p>A common trap teams fall into is trying to automate <em>everything<\/em> in one big run: colors, spacing, themes, components, and docs, all processed in a single click. It sounds convenient, but it\u2019s hard to maintain, and even harder to debug.<\/p>\n<p>It\u2019s much more manageable to split your automation into pieces. For example, having a single workflow that handles your core design tokens (e.g., colors, spacing, and font sizes), another for theme variations (e.g., light and dark themes), and one more for component mapping (e.g., buttons, inputs, and cards). This way, if your team changes how spacing tokens are named in Figma, you only need to update one part of the workflow, not the entire system. It\u2019s also <strong>easier to test and reuse smaller steps<\/strong>.<\/p>\n<h3 id=\"step-3-test-the-output-every-time\">Step 3: Test The Output Every Time<\/h3>\n<p>Even if everything runs fine, always take a moment to check the exported output. It doesn\u2019t need to be complicated. A few key things:<\/p>\n<ul>\n<li><strong>Are the token names clean and readable?<\/strong><br \/>\nIf you see something like <code>PrimaryColorColorText<\/code>, that\u2019s a red flag.<\/li>\n<li><strong>Did anything disappear or get renamed unexpectedly?<\/strong><br \/>\nIt happens more often than you think, especially with typography or spacing tokens after design changes.<\/li>\n<li><strong>Does the UI still work?<\/strong><br \/>\nIf you\u2019re using something like Tailwind, CSS variables, or custom themes, double-check that the new token values aren\u2019t breaking anything in the design or build process.<\/li>\n<\/ul>\n<p>To catch issues early, it helps to run tools like <a href=\"https:\/\/eslint.org\">ESLint<\/a> or <a href=\"https:\/\/stylelint.io\">Stylelint<\/a> right after the pipeline completes. They\u2019ll flag odd syntax or naming problems before things get shipped.<\/p>\n<h2 id=\"how-ai-can-help\">How AI Can Help<\/h2>\n<p>Once your automation is stable, there\u2019s a next layer that can boost your workflow: AI. It\u2019s not just for writing code or generating mockups, but for helping with the small, repetitive things that eat up time in design systems. When used right, AI can assist without replacing your control over the system.<\/p>\n<p>Here\u2019s where it might fit into your workflow:<\/p>\n<h3 id=\"naming-suggestions\">Naming Suggestions<\/h3>\n<p>When you\u2019re dealing with hundreds of tokens, naming them clearly and consistently is a real challenge. Some AI tools can help by suggesting clean, readable names for your tokens or components based on patterns in your design. It\u2019s not perfect, but it\u2019s a good way to kickstart naming, especially for large teams.<\/p>\n<h3 id=\"pattern-recognition\">Pattern Recognition<\/h3>\n<p>AI can also spot repeated styles or usage patterns across your design files. If multiple buttons or cards share similar spacing, shadows, or typography, tools powered by AI can group or suggest components for systemization even before a human notices.<\/p>\n<h3 id=\"automated-documentation\">Automated Documentation<\/h3>\n<p>Instead of writing everything from scratch, AI can generate first drafts of documentation based on your tokens, styles, and usage. You still need to review and refine, but it takes away the blank-page problem and saves hours.<\/p>\n<p>Here are a few tools that already bring AI into the design and development space in practical ways:<\/p>\n<ul>\n<li><a href=\"https:\/\/uizard.io\/\"><strong>Uizard<\/strong><\/a>: Uizard uses AI to turn wireframes into designs automatically. You can sketch something by hand, and it transforms that into a usable mockup.<\/li>\n<li><a href=\"https:\/\/www.animaapp.com\/\"><strong>Anima<\/strong><\/a>: Anima can convert Figma designs into responsive React code. It also helps fill in real content or layout structures, making it a powerful bridge between design and development, with some AI assistance under the hood.<\/li>\n<li><a href=\"https:\/\/www.builder.io\/\"><strong>Builder.io<\/strong><\/a>: Builder uses AI to help generate and edit components visually. It&rsquo;s especially useful for marketers or non-developers who need to build pages fast. AI helps streamline layout, content blocks, and design rules.<\/li>\n<\/ul>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>This article is not about achieving complete automation in the technical sense, but more about using <strong>smart tools to streamline the menial and manual aspects of working with design systems<\/strong>. Exporting tokens, generating docs, and syncing design with code can be automated, making your process quicker and more reliable with the right setup.<\/p>\n<p>Instead of rebuilding everything from scratch every time, you now have a way to keep things consistent, stay organized, and save time.<\/p>\n<h3 id=\"further-reading\">Further Reading<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/thedesignsystem.guide\/\">Design System Guide<\/a>\u201d by Romina Kavcic<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2025\/05\/design-system-in-90-days\/\">Design System In 90 Days<\/a>\u201d by Vitaly Friedman<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p class=\"text-justify mb-2\" >Automating Design Systems: Tips And Resources For Getting Started Automating Design Systems: Tips And Resources For Getting Started Joas Pambou 2025-08-06T10:00:00+00:00 2025-08-07T14:02:50+00:00 A design system is more than just a set of colors and buttons. It\u2019s a shared language that helps designers and developers build [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-509","post","type-post","status-publish","format-standard","hentry","category-accessibility"],"_links":{"self":[{"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/posts\/509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/comments?post=509"}],"version-history":[{"count":1,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/posts\/509\/revisions"}],"predecessor-version":[{"id":510,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/posts\/509\/revisions\/510"}],"wp:attachment":[{"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/media?parent=509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/categories?post=509"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.guupon.com\/index.php\/wp-json\/wp\/v2\/tags?post=509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}