Streamlining Your Design System Documentation in Figma with ChatGPT and Figma Plugins

Maximizing Productivity with Figma Plugins and ChatGPT for creating Design System Documentation

It’s a tedious, time-consuming, and often uncomfortable process to write design system documentation.

Although creating design system documentation in the past with Illustrator or Photoshop (we called it a style guide then) was much more complicated than it is now, it can be easily done today with modern tools.

With the many tools available to us now, like Figma, Zero-Height and Supernova, we can create design system documentation much more quickly, and AI tools like ChatGPT can make the process even faster.

With this article, I’d like to share a technique that can be very useful when creating design system documentation in Figma. Using new plugins and AI tools can make the process extremely fast. I added two videos to the article to explain the process better.

Tools you can use to create design systems documentation

Design system documentation tools are applications or platforms that help designers, developers, and other stakeholders create, manage, and share design system documentation. These tools come in many forms and offer various features and capabilities to make one single source of truth for the information.

Some design system documentation tools are connected to the code and include design tokens, making keeping the design system in sync with the code easier. Supernova, for instance, connects the design system to the code and allows for easier updates.

Other tools are focused more on documenting design guidelines and principles. Zero-Height, for example, is a tool specifically designed to help teams create and maintain design system documentation.

With Zero-Height, you can document your design principles, UI components, and patterns in one place so you can share usage guidelines with your team to ensure consistency of visual language inside the app.

What are the advantages of using Figma for design system documentation?

Besides the tools I mentioned above, you can also create design system documentation inside Figma. Let’s see when it’s a good idea.

Faster to generate
Because Figma is a design tool, you can create your design system documentation directly within it without switching to another application. This means you can create, edit, and iterate your documentation faster and more easily.

With Figma, you can save money
Using Figma as a design system documentation tool is cost-effective if you have a limited budget. You can add all your information to Figma without paying for another tool.

Easy sharing
Figma makes sharing your design system documentation with your team members easy. You can give them access to the document, and they can leave comments, make suggestions, and collaborate in real time.

Quick to start
If you need to create design system documentation quickly, Figma can be a good starting point. Figma has a variety of templates and UI kits available in the Figma community, so you can get started with a pre-built design and customize it to your needs.

What are the disadvantages of creating design system documentation in Figma?

While Figma is an effective tool for creating design system documentation, it has drawbacks. Here are some disadvantages of creating design system documentation in Figma.

Figma is not a 100% interactive platform
While you can create a visual representation of your design system, it cannot be fully tested or interacted with in the same way that a live product can. This means some design aspects may not be fully realized until later in development.

Figma may not best fit a large design team or complex design systems
While it is an excellent tool for small teams, it can be challenging to scale up and manage as your team grows.

Additionally, it may not have all the specific features you need for managing complex design systems. For example, design token documentation isn’t available in Figma, making it difficult to manage complex design systems with multiple color palettes, typography, and other design tokens.

In addition, adding a code snippet for developers is uncomfortable within Figma.

Writing documentation is a time-consuming task

Design system documentation is essential for creating a consistent and efficient design process. However, writing documentation can be time-consuming and requires much effort and attention to detail. Here are some reasons why writing design system documentation can take up a significant amount of time:

Defining the exact needs
Even though the basics of a design system are common across many systems, it takes time to define the specific needs of each system.

This requires careful consideration of the design principles, components, and patterns that are unique to the system.

Reviewing the information and simplifying the text
Making text and information easy to understand for everyone can be tricky. Simplifying the text and reviewing it for clarity takes time, but it’s essential to make sure that the documentation is accessible to everyone on the team.

Regularly updating documentation
Design system documentation needs to be updated regularly as the design system evolves and changes over time.

This requires ongoing effort and attention to detail to ensure the documentation remains up-to-date and accurate.

In addition, you should notify the designers, developers, and product managers of each change.

Steps for creating design system documentation using Chatgpt and Figma plugins

I will explain step-by-step how to create design system documentation using ChatGPT and Figma plugins. It’s a simple process, and you’ll be able to understand how to make design system documentation in Figma Faster afterward.

Step 1: Gather information from websites and ChatGPT

Gather information from websites
The first step in creating a design system is to gather information about the UI components you wish to build.

Although you are a design system expert, reading documentation from different design systems such as Google Material Design, Apple UI guidelines, and more is essential. That way, you will be sure you cover all the important points you should add to the documentation.

It is also important to read information and articles from trusted sources. Mark the most important information for your design system once you have all the necessary information.

For example, if you build a button system with three sizes, you can consider explaining the difference between mobile and desktop component sizes.

Gather information from ChatGPT

Good idea is to ask ChatGPT what you need to include in the component you are building. For example, you can write:

I am a product designer who writes design system documentation about the button component. What do I need to include in the design system documentation?

Apart from that, if you have a specific question about a UI element, you can ask ChatGPT. For example:

I am a product designer who writes design system documentation. Can you explain the difference between the primary and secondary buttons?

Important point: Using ChatGPT for writing design system documentation has limitations
When creating design system documentation, ChatGPT can be a helpful tool for generating ideas and providing a starting point. However, it’s important to recognize the limitations of relying only on ChatGPT for this task.

Be aware that ChatGPT may sometimes invent things that are not correct. While AI is highly advanced, it can make errors and may provide suggestions that are not true. This can lead to confusion and errors in your documentation.

AI is based on data, so if the data is incomplete, the AI may make an incorrect prediction. Additionally, if the data sets used to train the AI are not sufficiently diverse, the AI may make assumptions that are not true in reality.

Therefore, it is recommended that you use ChatGPT as a starting point and verify the information it provides with other reliable resources, such as design system documentation and other articles.

This will help ensure your design system documentation is accurate, up-to-date, and reflects best practices in the user experience industry.

Step 2: Build the component

After gathering all the necessary information and writing the component specs, you can start building the component in the Figma component library.

Let’s take the example of a button component. You can create three types of buttons: primary, secondary, and ghost, and each of them can have four different states, including enabled, hovered, focused, and disabled. As needed, you can add other details, such as size and icons.

This is a more technical part; you should understand the component feature and auto layout well. If you want to learn more, check out these articles.

Step 3: Use Figma Plugins to create component specs quickly

Once you have built the component, you can use two Figma plugins to create the component specs faster.

You can use the EightShapes Specs plugin, which gives you all the specs like colors, sizing, and spacing inside the components. It also provides the anatomy of the component, such as its different states, properties, and where icons are located.

In addition to the EightShapes Specs plugin, you can use the DesignDoc plugin, which generates technical documentation for the component. The DesignDoc plugin, however, only provides information for one variant at a time, making it less sophisticated.

Step 4: Execute a prompt in ChatGPT to generate the design system documentation

Now that you’ve collected all the information about the component and created it in Figma, it’s time to write the documentation, and ChatGPT can speed it up.

Create a prompt with all the necessary information, like usage, overview, and best practices. Add specific information about your component, like sizing and colors, and execute it.

It is important to remember that you can create the best prompt, but you will always need to tweak the results and adapt them to your specific needs. It is not a copy-paste process.

Let’s take this prompt as an example:

I am a designer that works on the design system team. I need to write documentation for a button component for the design system.

Write design system documentation for the button component. In the documentation, please include the following information:

• Overview
• Anatomy
• Types
• States
• Best practices in a do and don’t format
• Accessibility information
• Write the documentation with H1,H2,H3,H4 etc…

Here, I add more information to help you make the documentation more accurate for my needs:

• White theme color is the only color used in the design system.
• The design system includes two types of buttons: Primary, Secondary.
• The buttons have four statuses: Default, Focused, Hover, and Disabled.
• Our system has two types of button sizes, Medium(40px) and Large(48px).

Pro tip: Create prompt templates to improve the efficiency of writing design system documentation

Prompt templates allow you to create high-quality design system documentation easily and quickly. Please remember that even though you use great prompt templates, you may need to modify them occasionally. It may be necessary to tweak the wording or add specific details.

For example, writing prompts for a checkbox is different from writing prompts for a button, not only because they are very different components but also because in the documentation of a checkbox, we usually want to add a section explaining the difference between a checkbox, a radio button, and a toggle button.

You can save these template prompts in tools such as Notion or Google Docs to access them easily and work faster in the future.

I created an app in Glide for my prompts. You can take a look below.

Step 5: Create the documentation

After studying the component, building it in Figma, creating the text for the documentation, and gathering all the technical information with the plugin, it is time to assemble everything.

Now, you can organize everything in Figma. Just create a frame with structure (header, titles, subtitles, and a place to add the visuals). It is like playing with Lego blocks; you add block by block and build the documentation.

Protip: If you want to work much more quickly, you can use the “HTML to Design” plugin to import the ChatGPT page into Figma. That way, you won’t need to move between tabs, and all the information will be in one place.

To summary

In this article, I wanted to show you how to create design system documentation in Figma quickly and easily using ChatGPT and Figma plugins.

At first, I shared some tools for making design system documentation. I explained that using Figma for design system documentation is a good idea because it’s fast, cheap, easy to share, and simple to start.

Then, I gave you a simple step-by-step guide to simplifying the process. This includes gathering information from reliable sources and ChatGPT, building components in Figma, creating specs with Figma plugins, generating a draft using ChatGPT, and finally, putting everything together in Figma to complete the documentation.

More resources

Check out these great articles and videos to learn more about ChatGPT and Figma plugins about design system documentation

👉 Learn AI for Product Design: Enroll in my Upcoming Course

In this context, I would like to mention that I plan to launch a workshop in the near future showcasing different uses for AI writing and image generator tools.

If you’re interested, please enter here.