How to Use ChatGPT and Figma for Automated Text in UI Design

3 min read1 day ago

Intro

Less UI chores? Yes, please.

Integrating generative AI like ChatGPT with Figma can streamline repetitive tasks in UI design, such as populating date and time data dynamically.

Here’s how to achieve this.

My use case

I’m designing a UI for a concept mobile app, and one of the screens has a list of entries.

Every entry is a component instance.

The text content of every entry is therefore identical at first.

I manually updated the first 2 text fields, title & status, but I noticed that this process is becoming a chore and does not provide me with any further fun learning or challenge.

So I thought to speed things up by auto-generating this content.

Nowadays, with the power of generative AI, such as chatGPT, it is possible to quickly generate content like this, specific to our unique use cases.

Here’s how I did it:

I’m using “now” as the placeholder and I explain the pattern to match: part of the title with data to generate. In this case, this is a requirement. In another case, we may simply want random data with no pattern match.

ChatGPT understood correctly and generated data in the right format. In this case it provides a bit too much — also an extra “time” data field — but that’s ok, we just ignore it.

Now, time to copy paste the data into “Now” fields, and voila. Chore avoided:

This took considerably less time and effort to come up with data. Thanks, chat!

Key Takeaway

Use this approach to efficiently manage dynamic content in your UI designs, avoiding the extra hassle. Then you can stay focused on UI elements that are worth working on.

Benefits:

Efficiency: Save time by automating the generation and application of dynamic content.
Consistency: Ensure all date and time entries follow the same format and logic.
Personalized: You “show” exactly what you need.

A step further

If it’s worth your time, consider automating:

For repetitive tasks or large datasets, consider using Figma’s API or plugins to automate the integration.
Figma API: You can write a script to fetch data from ChatGPT and update Figma text layers programmatically.
Plugins: Use plugins like “Content Reel” to automate data population in Figma with pre-defined lists.