Improving our workflow with Figma plugins and AI
Reading time: 3 minutes.
Improving our workflow with Figma plugins and AI
Reading time: 3 minutes.
We use Figma on daily basis at work, and while Figma has a lot of nice built in features there are times when a designer needs to go beyond the basics to truly optimize their workflow. That's what sparked my interest in creating plugins internally for our team.
Figma plugins address this gap by enabling designers to save time, automate repetitive tasks, and add new functionality, thereby optimizing their workflows beyond Figma’s native capabilities.
We use Figma on daily basis at work, and while Figma has a lot of nice built in features there are times when a designer needs to go beyond the basics to truly optimize their workflow. That's what sparked my interest in creating plugins internally for our team.
Figma plugins address this gap by enabling designers to save time, automate repetitive tasks, and add new functionality, thereby optimizing their workflows beyond Figma’s native capabilities.
We use Figma on daily basis at work, and while Figma has a lot of nice built in features there are times when a designer needs to go beyond the basics to truly optimize their workflow. That's what sparked my interest in creating plugins internally for our team.
Figma plugins address this gap by enabling designers to save time, automate repetitive tasks, and add new functionality, thereby optimizing their workflows beyond Figma’s native capabilities.
Plugin #1: A plugin that creates Figma pages instantly
Plugin #1: A plugin that creates Figma pages instantly
Plugin #1: A plugin that creates Figma pages instantly
We follow a specific page structure in all our Figma files to ensure a clean and organized workflow, especially when multiple designers collaborate on the same file. However, creating these pages is a manual process, taking approximately 30 seconds each time a designer creates a new file.
What if we develop a plugin that generates those pages in an instant? While thirty seconds per file might not seem significant, consider the number of Figma files created per year. This could translate into hours saved by implementing a simple plugin.
We follow a specific page structure in all our Figma files to ensure a clean and organized workflow, especially when multiple designers collaborate on the same file. However, creating these pages is a manual process, taking approximately 30 seconds each time a designer creates a new file.
What if we develop a plugin that generates those pages in an instant? While thirty seconds per file might not seem significant, consider the number of Figma files created per year. This could translate into hours saved by implementing a simple plugin.
We follow a specific page structure in all our Figma files to ensure a clean and organized workflow, especially when multiple designers collaborate on the same file. However, creating these pages is a manual process, taking approximately 30 seconds each time a designer creates a new file.
What if we develop a plugin that generates those pages in an instant? While thirty seconds per file might not seem significant, consider the number of Figma files created per year. This could translate into hours saved by implementing a simple plugin.
How the plugin works
How the plugin works
How the plugin works
Using this plugin is straightforward. The designer simply runs the plugin, and the pages are generated instantly. The current page names are configured to match our existing workflow. However, we can easily modify the code to generate different names if needed.
Using this plugin is straightforward. The designer simply runs the plugin, and the pages are generated instantly. The current page names are configured to match our existing workflow. However, we can easily modify the code to generate different names if needed.
Using this plugin is straightforward. The designer simply runs the plugin, and the pages are generated instantly. The current page names are configured to match our existing workflow. However, we can easily modify the code to generate different names if needed.
Plugin #2: A plugin that rewrites the content for you, using AI
Plugin #2: A plugin that rewrites the content for you, using AI
Plugin #2: A plugin that rewrites the content for you, using AI
When designing, we need to place placeholder content that makes sense to help the UX writer understand the flow. However, coming up with suitable text can be time-consuming. Many designers rely on ChatGPT to rephrase their content to fit a specific audience segment. We have three tones of voice: Neutral, Youth, and Formal (for the Corporate app).
Designers using ChatGPT often generate inconsistent output due to varying prompts. Some prompts work better than others, so we decided to create a plugin that unifies these prompts. This ensures consistency and keeps the workflow within Figma, making it more intuitive and eliminating the need for designers to use ChatGPT separately and copy-paste text each time.
When designing, we need to place placeholder content that makes sense to help the UX writer understand the flow. However, coming up with suitable text can be time-consuming. Many designers rely on ChatGPT to rephrase their content to fit a specific audience segment. We have three tones of voice: Neutral, Youth, and Formal (for the Corporate app).
Designers using ChatGPT often generate inconsistent output due to varying prompts. Some prompts work better than others, so we decided to create a plugin that unifies these prompts. This ensures consistency and keeps the workflow within Figma, making it more intuitive and eliminating the need for designers to use ChatGPT separately and copy-paste text each time.
When designing, we need to place placeholder content that makes sense to help the UX writer understand the flow. However, coming up with suitable text can be time-consuming. Many designers rely on ChatGPT to rephrase their content to fit a specific audience segment. We have three tones of voice: Neutral, Youth, and Formal (for the Corporate app).
Designers using ChatGPT often generate inconsistent output due to varying prompts. Some prompts work better than others, so we decided to create a plugin that unifies these prompts. This ensures consistency and keeps the workflow within Figma, making it more intuitive and eliminating the need for designers to use ChatGPT separately and copy-paste text each time.
How the plugin works
How the plugin works
How the plugin works
The designer needs to simply select a text layer, choose the audience segment, click on 'Rewrite' and the plugin will rewrite the text for them. The above example if using the plugin to rewrite the content for the 'PRIME' segment which is a youth banking app for University students in Kuwait.
This plugin is our first using OpenAI and we're hoping that it opens the door to more opportunities for us to use AI to speed up our workflow and help designers focus more on UX.
The designer needs to simply select a text layer, choose the audience segment, click on 'Rewrite' and the plugin will rewrite the text for them. The above example if using the plugin to rewrite the content for the 'PRIME' segment which is a youth banking app for University students in Kuwait.
This plugin is our first using OpenAI and we're hoping that it opens the door to more opportunities for us to use AI to speed up our workflow and help designers focus more on UX.
The designer needs to simply select a text layer, choose the audience segment, click on 'Rewrite' and the plugin will rewrite the text for them. The above example if using the plugin to rewrite the content for the 'PRIME' segment which is a youth banking app for University students in Kuwait.
This plugin is our first using OpenAI and we're hoping that it opens the door to more opportunities for us to use AI to speed up our workflow and help designers focus more on UX.
Ending note
Ending note
Ending note
Utilizing Figma plugins effectively removes mundane tasks from designers’ workloads, allowing them to focus on creative design and solving user problems. And with advancements in AI, building a Figma plugin doesn’t require extensive coding knowledge, I developed my plugin with basic TypeScript knowledge. The key is to communicate with your team, understand their pain points, and identify opportunities for workflow improvements.
Feel free to check out the plugin in Figma's community.
Utilizing Figma plugins effectively removes mundane tasks from designers’ workloads, allowing them to focus on creative design and solving user problems. And with advancements in AI, building a Figma plugin doesn’t require extensive coding knowledge, I developed my plugin with basic TypeScript knowledge. The key is to communicate with your team, understand their pain points, and identify opportunities for workflow improvements.
Feel free to check out the plugin in Figma's community.
Utilizing Figma plugins effectively removes mundane tasks from designers’ workloads, allowing them to focus on creative design and solving user problems. And with advancements in AI, building a Figma plugin doesn’t require extensive coding knowledge, I developed my plugin with basic TypeScript knowledge. The key is to communicate with your team, understand their pain points, and identify opportunities for workflow improvements.
Feel free to check out the plugin in Figma's community.