Ryan G. Wilson UX Leader

Toggle main menu

Figma Plug-In


A Figma plug-in that automates HTML/CSS style guides

Hosted style guide hero image for Figma Plug-In


One problem I've always wanted to solve since I started designing websites in the 1990s was to reduce the work for visual designers. I have always wanted to figure out a method to get the style guide information out of the design tool and automatically generate a living style guide - AND - for the design program to update the style guide automatically when there is an update to the design file. Enter AtoMagic.

Working with a Developer friend, I was able to create a plugin that begins to automate style guides.


Product Owner, Product Designer


One Year


Research, User Testing, Figma, Documentation


Problem Statement

Creating and maintaining an HTML and CSS style guide for each project is a repetitive and time-consuming task. However, a living style guide is valuable as a source of truth for the project and a hand-off tool for developers. Many newer visual designers are coming into the practice without a background in front-end code. Automating style guides from a design file alleviates the need for a web, visual, or UX designer to create and maintain a style guide and removes the need to know how to write HTML or CSS.



Automating the style guides from a design file was a problem I had been thinking about for about twenty years. I had tried to find solutions during that time, but tooling was always the limitation. So when I started using Figma, I saw a potential answer.

I have over 25 years of experience with web design - writing HTML and CSS and style guide best practices. I follow Brad Frost's Atomic Design methodology, so I saw that the MVP for the plugin would need only to utilize base-level Atoms of design.

I created mockups in Figma for the elements I intended to target in the living style guide. Then I made a static HTML and CSS style guide in parity with the mockup layout in Figma. With these two files, the Figma design file and the living style guide, I could visually communicate what I wanted to achieve with a plugin.

Consulting with a Developer friend, we began researching the Figma API to see what was possible, what we could control, and what would not be possible now. Then, using the files I created, my friend could wire up a functional proof of concept. Using this POC I ran two rounds of user testing with users familiar with using Figma.

  • Research
  • User Flows
  • Sketches
  • Wireframes
  • Proof of concept
  • User Testing


The results of the testing were very positive. In both testing rounds, all users could complete all tasks. After testing, the users with web design backgrounds commented that they couldn't wait to get their hands on a copy. There is a unique need for a product like this for users who don't want to create their project style guides manually. And for users who don't know how to code, they can now provide a living style guide to engineers without needing to know code.


The Figma plugin, AtoMagic, is currently in development, and I hope to have it live in the Figma Community later this year. While still in development, I have identified the need for a product that can automatically generate and maintain a living style guide from a Figma design file. I am very proud of the upcoming MVP.

Sidenote – The etymology of the name comes from "Atom", The smallest building block matter. In relation to HTML, atoms are base-level tags as laid out in Brad Frost's Atomic Design + "Magic", wondrous happenstance that surprises and delights, also similar to "Automatic", Happens without direct interaction = "AtoMagic".



I have created the ability to control a living HTML/CSS style guide from a Figma design file. As you change and update your baseline styles like color, typography, scale, and border, the plugin communicates with the hosted living style guide in real-time, allowing you to see changes in the style guide within seconds.


  • Was able to find a solution to a problem I have been trying to tackle for over 20 years
  • The product has been impressive to everyone that I have demoed it to
  • I have had multiple users from the tests that I ran reach out and let me know they are eager for AtoMagic to be available


What would I do differently?

I was a late adopter of Figma. When Figma first came out, I did not immediately see the value of a web-based design tool. I wish that I had engaged with Figma earlier. If I had, I think I would have identified this solution sooner, and the plugin would have been in the Figma Community already.

How did I grow?

One of the lessons from this project is that, no matter how long you have been trying to approach a problem, don't give up. AtoMagic wasn't possible until the tooling allowed for it. So if I had given up on the idea when there was no solution in 1997, 2002, or 2007, ... I wouldn't be building towards a product that I'm proud of today.