Automation in design systems
Tools, plugins, and actions
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: The Design System Guide / Podcast / My Linkedin
Automating parts of your design system can improve consistency, efficiency, and collaboration across design and development. Below are some tools, plugins, and actions that can help streamline your workflows.
Figma Plugins
Here are some useful Figma plugins to automate design tasks:
Automater: A bunch of commands collected into a plugin (interactions, auto-layout, etc)
Builder.io: AI-Powered Figma to Code (React, Vue, Tailwind, & more) You can use this plugin to add Figma designs to lovable.dev (which is the fastest-growing AI “idea to app” startup in Europe at the moment)
Design Lint: Automatically checks for missing or inconsistent styles in your designs.
Contrast: Focuses on real-time contrast checks and accessibility improvements.
Measure: Helps inspect and measure components for spacing, size, and consistency.
Specs Plugin: Automates the creation of page and component specifications, which is helpful for audits and design critiques.
SupaPallete 5.0: The ultimate color palette generator for Figma (also for Figma Variables)
Automator: This plugin was helpful but was last updated last year. 🥲
Dev Handoff Tools
Specs Plugin: Automates the creation of page and component specifications, which is helpful for audits and design critiques. You open the plugin in Figma, click on the component, and automatically get the specs.
Zeplin: Bridges the gap between design and development by providing design specs, assets, and guidelines.
PerfectPixel (Chrome Extension): allows pixel-perfect overlays of design comps on live web pages for visual comparison.
Collaboration and Workflows
Airtable: Automate notifications, tasks, and roadmaps (via email, Slack, Teams, SMS).
Zapier: Automates workflows. You can connect practically any app.
Slack Integrations: Update team channels when critical tasks in GitHub, Figma, or Jira are updated.
AI-Assisted Content Creation via ChatGPT, Jasper, Claude, …
Design Tokens
Airtable: Manage and sync design system inventories, components, and values. My guide is available here.
Tokens Studio: Synchronizes design tokens between Figma and your codebase.
Style Dictionary: Helps transform design tokens across multiple platforms.
Documentation
FigMayo: Generates component documentation directly from Figma files.
Storybook: Automatically generates component documentation and a development environment.
Docusaurus: It creates and maintains documentation sites.
QA and Testing
Chromatic: Automates visual regression testing and review workflows.
Percy: Provides visual testing and review tools.
Cypress: Enables automated end-to-end and component testing.
Version Control and Synchronization
Kactus: Design version control without changing your tools. Manage changes, document work, and keep your team in sync.
Supernova: You can create versions of your design system and documentation in Supernova. A version is a snapshot of your design system content at one moment.
GitHub Actions Ideas
CI/CD Automation: Automate workflows for deployment, testing, and design token management.
Component Testing: Run unit tests and visual regression tests for components.
Design Token Validation: Triggers validation and builds when token files are updated.
Documentation Deployment: Deploy your documentation site when changes are made.
NPM Package Publishing: Publishes design system packages to NPM when a new release is created.
CI/CD Integration Ideas
Automatically syncing Figma assets to repositories.
Running accessibility and performance tests: Automated tests catch accessibility issues (Axe, Lighthouse) and performance slowdowns.
Linting (Code & Design): Linters check it all during pull requests—clean code, consistent design, every time. Done.
Jira Automation Ideas
Automated Reporting: Generate weekly status reports for completed features, pending tasks, and blockers.
Example Scenario: Every Monday, you want a report that includes completed features and components from the past week. Or blockers that need immediate attention.
Integration with GitHub Actions
Automatically create or update Jira tickets when design tokens or components are modified.
Link commits or pull requests to Jira issues for better traceability.
Example Scenario: Developers update the design tokens JSON in a GitHub repo. You want Jira to:
Detect the change.
Automatically create a Jira task to review and deploy the updated tokens.
Link any commits or pull requests to relevant Jira issues.
Figma/Jira Integration: Automate the creation and transition of tasks in Jira when designs are ready for review in Figma. Helpful instructions here.
🙋♀️🙋🏽♂️ Questions from the community
If you have any questions, email me or add them to the comment below. 🙌
💎 Community Gems
It’s time for design to think less and feel more
By embracing sensitivity over logic, designers can learn from old masters and create new solutions that reconnect to us being humans.
"Perhaps design thinking makes us confused. Design feeling is the right word."
➪ Naoto Fukasawa
🔗 Link
💎 Design System Contribution Figma Template by Chad Bergman
As a library maintainer, it can be helpful to provide your teams with considerations for assets created for and contributed to your design system libraries.
This template captures some common considerations found within multiple design systems and can be used as a checklist when accepting contributions to your libraries.
🔗 Link
🔖 Inclusive Design Toolkits and Templates — from audit templates and personas to workbooks and activity cards from Vitaly Friedman
🔗 Link
The AI Playbook for Design Systems: What Works, What Fails, and Why
🔗 Link
📹 How Mayo Clinic builds design systems with Taylor Cashdan
🔗 Link
❤️ People to follow
This week, I would like to introduce you to Amy Ogg, leader of the US Chapter of the Into Design Systems Conference and a seasoned product designer who specializes in building comprehensive design systems. Her expertise spans B2B and B2C products across startups, nonprofits, and enterprise organizations, where she combines her passion for design systems with mentorship and team building to deliver impactful solutions.