Table of Contents Hide
- Maximizing Productivity with Figma Plugins and ChatGPT for creating Design System Documentation
- Tools you can use to create design systems documentation
- What are the advantages of using Figma for design system documentation?
- What are the disadvantages of creating design system documentation in Figma?
- Writing documentation is a time-consuming task
- Steps for creating design system documentation using Chatgpt and Figma plugins
- Step 1: Gather information from websites and ChatGPT
- Step 2: Build the component
- Step 3: Use Figma Plugins to create component specs quickly
- Step 4: Execute a prompt in ChatGPT to generate the design system documentation
- Step 5: Create the documentation
- To summary
- More resources
- 👉 Learn AI for Product Design: Enroll in my Upcoming Course
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.
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.
Read the full article here