Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lostcount of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two of the most tedious parts of my design work: sourcing imagery and organizing layers.
I integrated an AI image generation feature that lets me create visuals from a text prompt using models like DALL-E 3, right on the canvas. It’s been incredibly useful for rapid moodboarding or creating custom visuals without relying on stock photos or jumping over to Photoshop.
Another time-saver is the AI Layer Rename feature. It analyzes the visual content to turn a messy layer panel (we’ve all been there) into something descriptive, like changing ‘Rectangle 12’ to ‘Mountain Sunset’. This doesn’t just make my files easier to navigate; it’s the foundation for the Smart Template system.

Moving Beyond ‘Lorem Ipsum’ with Smart Templates

One of my biggest pet peeves is designing with placeholder text. That’s why I focused on building a robust template system that allows me to create and apply realistic, reusable content libraries for text, images, and icons. It makes a huge difference in maintaining consistency and realism.
I can create named lists for things like customer names or product descriptions. I can build image templates for hero shots and avatars, and even standardize my icon sets to adapt to light/dark mode. Applying these with a single click transforms a static wireframe into a much more believable, data-rich mockup.

(IMAGE)
This is a look at my own library of text and image templates. Having these ready to go means I can populate entire pages consistently in seconds.

Automating Content with Smart Matching and Modifiers
Here’s where things get really powerful. The template system isn’t just a static library; it’s an automation engine that uses layer names to apply content intelligently.
For example, if I name a text layer ‘customer-names’, the plugin automatically fills it from the right template. For more granular control, I can use Layer Name Modifiers to add logic directly into the layer name itself. Something like `customer-names:text:upper` will replace the text and convert it to uppercase, without me needing to open a single settings panel.

Working at Scale: Bulk Updates and Smart Selections
My design files, like many others, are often massive. I needed tools to manage that complexity and perform bulk operations that would otherwise mean hours of tedious, manual clicking.
The Smart Auto-Selection feature has been a huge help. It can instantly select all matching elements across a file — every button label, for instance. From there, the Content Management panel gives me a structured list of all the text, so I can filter, sort, and perform batch updates. This has been incredibly valuable for copy reviews, localization, and preparing A/B tests.

Accelerating Prototyping and Data Population
Creating realistic and varied mockups is something I find crucial for compelling presentations. So, I built in features to help populate designs with diverse, believable data in seconds.
With Component Randomization, I can instantly vary properties across selected components to give each card a unique avatar, status, or name. And if I need to populate a design from a spreadsheet, I can just copy-paste a block of text, and the plugin automatically distributes it across my selection. It even handles overflow by creating new instances, so no data gets lost.

A Deep Integration for a Native Figma Experience
I believe a great plugin should feel like a natural extension of the application it lives in. I’ve tried to build Contently with this philosophy, integrating it as deeply as possible into Figma’s native UI and workflows.
I’ve exposed core functions as Quick Actions in Figma’s command palette (`Cmd+/`), so I can apply templates or select layers without opening the plugin panel. I also put common actions like shuffling content into the right-click context menu, right where I’d expect to find them.

The ability to name a layer ‘customer-names’ once and have it auto-populate every time is the kind of efficiency that lets me focus on the actual design, not manual data entry.
Feedback from a Senior UX Designer

(IMAGE)

An example of using Layer Name Modifiers like `:upper` or `:numbers`. This lets me control formatting directly from the layer name, which is a huge time-saver.

I also wanted this flexibility to extend to the platform level. That’s why I implemented multi-provider AI support, so you can bring your own API key. This avoids vendor lock-in and lets you choose the model that best fits your needs for cost, speed, and quality. I’ve made sure it’s compatible across Figma Design, FigJam, and Slides, using a freemium model that I believe is fair and sustainable — so far, I make no money out of it, sems like people take the free and run with it ;)

(IMAGE)
Here’s the Content Management panel, which gives me a bird’s-eye view of all text. It makes bulk edits and copy reviews so much more manageable.

My Philosophy on Workflow, Tools, and Privacy

I built this tool on principles of flexibility and user control. The ‘bring your own key’ model for AI is important to me because it means you control your own data and costs. I also made the analytics privacy-first and opt-in, so no usage data is collected without explicit consent. This was crucial for making it a trustworthy tool for both individual designers and larger teams.

My goal is to help bridge the gap between static design and dynamic content, pushing Figma beyond a drawing tool and closer to a true product development environment.
David Zerbe, Founder of uxact.ly & raiken.io

Who Might Find This Plugin Useful?
I designed this with a few people in mind: the solo designer who needs a quick AI-powered second opinion, the design system manager trying to enforce content consistency, and the product team that’s tired of the disconnect between design and copy.
My aim was to create more than just a content-stuffing tool. I wanted a comprehensive suite that would lead to a more integrated, intelligent, and efficient design process. By embedding these capabilities directly into Figma, I believe we as designers can build more realistic prototypes, collaborate more effectively, and ultimately, ship better products faster.

A Quick Look: AI-Powered Content
A toolkit I’ve put together to bring the power of generative AI directly into my design workflow.
This includes tools to generate text, get instant design feedback, and create images without leaving Figma. As I mentioned, it supports your own API keys for major AI providers, which I think is crucial for maintaining control over tools and data.

A Quick Look: Intelligent Templates
This system is my answer to moving beyond static placeholders with dynamic, reusable content.
It allows for automatically populating layers based on their names using Smart Templates. I’ve also included Layer Name Modifiers and Inline Placeholders for more precise control over formatting, all handled directly in the layer name.

A Quick Look: Workflow Automation
These features are all about eliminating repetitive tasks and making large-scale design files easier to manage.
Features like Smart Selection help grab hundreds of similar layers at once, while a centralized Content Panel helps manage all the copy. Component Randomization is there to instantly diversify mockups. My hope is that these tools save designers like me hours of manual work.

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lost count of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two of the most tedious parts of my design work: sourcing imagery and organizing layers.
I integrated an AI image generation feature that lets me create visuals from a text prompt using models like DALL-E 3, right on the canvas. It’s been incredibly useful for rapid moodboarding or creating custom visuals without relying on stock photos or jumping over to Photoshop.
Another time-saver is the AI Layer Rename feature. It analyzes the visual content to turn a messy layer panel (we’ve all been there) into something descriptive, like changing ‘Rectangle 12’ to ‘Mountain Sunset’. This doesn’t just make my files easier to navigate; it’s the foundation for the Smart Template system.

Moving Beyond ‘Lorem Ipsum’ with Smart Templates

One of my biggest pet peeves is designing with placeholder text. That’s why I focused on building a robust template system that allows me to create and apply realistic, reusable content libraries for text, images, and icons. It makes a huge difference in maintaining consistency and realism.
I can create named lists for things like customer names or product descriptions. I can build image templates for hero shots and avatars, and even standardize my icon sets to adapt to light/dark mode. Applying these with a single click transforms a static wireframe into a much more believable, data-rich mockup.

(IMAGE)
This is a look at my own library of text and image templates. Having these ready to go means I can populate entire pages consistently in seconds.

Automating Content with Smart Matching and Modifiers
Here’s where things get really powerful. The template system isn’t just a static library; it’s an automation engine that uses layer names to apply content intelligently.
For example, if I name a text layer ‘customer-names’, the plugin automatically fills it from the right template. For more granular control, I can use Layer Name Modifiers to add logic directly into the layer name itself. Something like `customer-names:text:upper` will replace the text and convert it to uppercase, without me needing to open a single settings panel.

Working at Scale: Bulk Updates and Smart Selections
My design files, like many others, are often massive. I needed tools to manage that complexity and perform bulk operations that would otherwise mean hours of tedious, manual clicking.
The Smart Auto-Selection feature has been a huge help. It can instantly select all matching elements across a file — every button label, for instance. From there, the Content Management panel gives me a structured list of all the text, so I can filter, sort, and perform batch updates. This has been incredibly valuable for copy reviews, localization, and preparing A/B tests.

Accelerating Prototyping and Data Population
Creating realistic and varied mockups is something I find crucial for compelling presentations. So, I built in features to help populate designs with diverse, believable data in seconds.
With Component Randomization, I can instantly vary properties across selected components to give each card a unique avatar, status, or name. And if I need to populate a design from a spreadsheet, I can just copy-paste a block of text, and the plugin automatically distributes it across my selection. It even handles overflow by creating new instances, so no data gets lost.

A Deep Integration for a Native Figma Experience
I believe a great plugin should feel like a natural extension of the application it lives in. I’ve tried to build Contently with this philosophy, integrating it as deeply as possible into Figma’s native UI and workflows.
I’ve exposed core functions as Quick Actions in Figma’s command palette (`Cmd+/`), so I can apply templates or select layers without opening the plugin panel. I also put common actions like shuffling content into the right-click context menu, right where I’d expect to find them.

The ability to name a layer ‘customer-names’ once and have it auto-populate every time is the kind of efficiency that lets me focus on the actual design, not manual data entry.
Feedback from a Senior UX Designer

(IMAGE)

An example of using Layer Name Modifiers like `:upper` or `:numbers`. This lets me control formatting directly from the layer name, which is a huge time-saver.

I also wanted this flexibility to extend to the platform level. That’s why I implemented multi-provider AI support, so you can bring your own API key. This avoids vendor lock-in and lets you choose the model that best fits your needs for cost, speed, and quality. I’ve made sure it’s compatible across Figma Design, FigJam, and Slides, using a freemium model that I believe is fair and sustainable — so far, I make no money out of it, sems like people take the free and run with it ;)

(IMAGE)
Here’s the Content Management panel, which gives me a bird’s-eye view of all text. It makes bulk edits and copy reviews so much more manageable.

My Philosophy on Workflow, Tools, and Privacy

I built this tool on principles of flexibility and user control. The ‘bring your own key’ model for AI is important to me because it means you control your own data and costs. I also made the analytics privacy-first and opt-in, so no usage data is collected without explicit consent. This was crucial for making it a trustworthy tool for both individual designers and larger teams.

My goal is to help bridge the gap between static design and dynamic content, pushing Figma beyond a drawing tool and closer to a true product development environment.
David Zerbe, Founder of uxact.ly & raiken.io

Who Might Find This Plugin Useful?
I designed this with a few people in mind: the solo designer who needs a quick AI-powered second opinion, the design system manager trying to enforce content consistency, and the product team that’s tired of the disconnect between design and copy.
My aim was to create more than just a content-stuffing tool. I wanted a comprehensive suite that would lead to a more integrated, intelligent, and efficient design process. By embedding these capabilities directly into Figma, I believe we as designers can build more realistic prototypes, collaborate more effectively, and ultimately, ship better products faster.

A Quick Look: AI-Powered Content
A toolkit I’ve put together to bring the power of generative AI directly into my design workflow.
This includes tools to generate text, get instant design feedback, and create images without leaving Figma. As I mentioned, it supports your own API keys for major AI providers, which I think is crucial for maintaining control over tools and data.

A Quick Look: Intelligent Templates
This system is my answer to moving beyond static placeholders with dynamic, reusable content.
It allows for automatically populating layers based on their names using Smart Templates. I’ve also included Layer Name Modifiers and Inline Placeholders for more precise control over formatting, all handled directly in the layer name.

A Quick Look: Workflow Automation
These features are all about eliminating repetitive tasks and making large-scale design files easier to manage.
Features like Smart Selection help grab hundreds of similar layers at once, while a centralized Content Panel helps manage all the copy. Component Randomization is there to instantly diversify mockups. My hope is that these tools save designers like me hours of manual work.

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lost count of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two of the most tedious parts of my design work: sourcing imagery and organizing layers.
I integrated an AI image generation feature that lets me create visuals from a text prompt using models like DALL-E 3, right on the canvas. It’s been incredibly useful for rapid moodboarding or creating custom visuals without relying on stock photos or jumping over to Photoshop.
Another time-saver is the AI Layer Rename feature. It analyzes the visual content to turn a messy layer panel (we’ve all been there) into something descriptive, like changing ‘Rectangle 12’ to ‘Mountain Sunset’. This doesn’t just make my files easier to navigate; it’s the foundation for the Smart Template system.

Moving Beyond ‘Lorem Ipsum’ with Smart Templates

One of my biggest pet peeves is designing with placeholder text. That’s why I focused on building a robust template system that allows me to create and apply realistic, reusable content libraries for text, images, and icons. It makes a huge difference in maintaining consistency and realism.
I can create named lists for things like customer names or product descriptions. I can build image templates for hero shots and avatars, and even standardize my icon sets to adapt to light/dark mode. Applying these with a single click transforms a static wireframe into a much more believable, data-rich mockup.

(IMAGE)
This is a look at my own library of text and image templates. Having these ready to go means I can populate entire pages consistently in seconds.

Automating Content with Smart Matching and Modifiers
Here’s where things get really powerful. The template system isn’t just a static library; it’s an automation engine that uses layer names to apply content intelligently.
For example, if I name a text layer ‘customer-names’, the plugin automatically fills it from the right template. For more granular control, I can use Layer Name Modifiers to add logic directly into the layer name itself. Something like `customer-names:text:upper` will replace the text and convert it to uppercase, without me needing to open a single settings panel.

Working at Scale: Bulk Updates and Smart Selections
My design files, like many others, are often massive. I needed tools to manage that complexity and perform bulk operations that would otherwise mean hours of tedious, manual clicking.
The Smart Auto-Selection feature has been a huge help. It can instantly select all matching elements across a file — every button label, for instance. From there, the Content Management panel gives me a structured list of all the text, so I can filter, sort, and perform batch updates. This has been incredibly valuable for copy reviews, localization, and preparing A/B tests.

Accelerating Prototyping and Data Population
Creating realistic and varied mockups is something I find crucial for compelling presentations. So, I built in features to help populate designs with diverse, believable data in seconds.
With Component Randomization, I can instantly vary properties across selected components to give each card a unique avatar, status, or name. And if I need to populate a design from a spreadsheet, I can just copy-paste a block of text, and the plugin automatically distributes it across my selection. It even handles overflow by creating new instances, so no data gets lost.

A Deep Integration for a Native Figma Experience
I believe a great plugin should feel like a natural extension of the application it lives in. I’ve tried to build Contently with this philosophy, integrating it as deeply as possible into Figma’s native UI and workflows.
I’ve exposed core functions as Quick Actions in Figma’s command palette (`Cmd+/`), so I can apply templates or select layers without opening the plugin panel. I also put common actions like shuffling content into the right-click context menu, right where I’d expect to find them.

The ability to name a layer ‘customer-names’ once and have it auto-populate every time is the kind of efficiency that lets me focus on the actual design, not manual data entry.
Feedback from a Senior UX Designer

(IMAGE)

An example of using Layer Name Modifiers like `:upper` or `:numbers`. This lets me control formatting directly from the layer name, which is a huge time-saver.

I also wanted this flexibility to extend to the platform level. That’s why I implemented multi-provider AI support, so you can bring your own API key. This avoids vendor lock-in and lets you choose the model that best fits your needs for cost, speed, and quality. I’ve made sure it’s compatible across Figma Design, FigJam, and Slides, using a freemium model that I believe is fair and sustainable — so far, I make no money out of it, sems like people take the free and run with it ;)

(IMAGE)
Here’s the Content Management panel, which gives me a bird’s-eye view of all text. It makes bulk edits and copy reviews so much more manageable.

My Philosophy on Workflow, Tools, and Privacy

I built this tool on principles of flexibility and user control. The ‘bring your own key’ model for AI is important to me because it means you control your own data and costs. I also made the analytics privacy-first and opt-in, so no usage data is collected without explicit consent. This was crucial for making it a trustworthy tool for both individual designers and larger teams.

My goal is to help bridge the gap between static design and dynamic content, pushing Figma beyond a drawing tool and closer to a true product development environment.
David Zerbe, Founder of uxact.ly & raiken.io

Who Might Find This Plugin Useful?
I designed this with a few people in mind: the solo designer who needs a quick AI-powered second opinion, the design system manager trying to enforce content consistency, and the product team that’s tired of the disconnect between design and copy.
My aim was to create more than just a content-stuffing tool. I wanted a comprehensive suite that would lead to a more integrated, intelligent, and efficient design process. By embedding these capabilities directly into Figma, I believe we as designers can build more realistic prototypes, collaborate more effectively, and ultimately, ship better products faster.

A Quick Look: AI-Powered Content
A toolkit I’ve put together to bring the power of generative AI directly into my design workflow.
This includes tools to generate text, get instant design feedback, and create images without leaving Figma. As I mentioned, it supports your own API keys for major AI providers, which I think is crucial for maintaining control over tools and data.

A Quick Look: Intelligent Templates
This system is my answer to moving beyond static placeholders with dynamic, reusable content.
It allows for automatically populating layers based on their names using Smart Templates. I’ve also included Layer Name Modifiers and Inline Placeholders for more precise control over formatting, all handled directly in the layer name.

A Quick Look: Workflow Automation
These features are all about eliminating repetitive tasks and making large-scale design files easier to manage.
Features like Smart Selection help grab hundreds of similar layers at once, while a centralized Content Panel helps manage all the copy. Component Randomization is there to instantly diversify mockups. My hope is that these tools save designers like me hours of manual work.

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lost count of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two of the most tedious parts of my design work: sourcing imagery and organizing layers.
I integrated an AI image generation feature that lets me create visuals from a text prompt using models like DALL-E 3, right on the canvas. It’s been incredibly useful for rapid moodboarding or creating custom visuals without relying on stock photos or jumping over to Photoshop.
Another time-saver is the AI Layer Rename feature. It analyzes the visual content to turn a messy layer panel (we’ve all been there) into something descriptive, like changing ‘Rectangle 12’ to ‘Mountain Sunset’. This doesn’t just make my files easier to navigate; it’s the foundation for the Smart Template system.

Moving Beyond ‘Lorem Ipsum’ with Smart Templates

One of my biggest pet peeves is designing with placeholder text. That’s why I focused on building a robust template system that allows me to create and apply realistic, reusable content libraries for text, images, and icons. It makes a huge difference in maintaining consistency and realism.
I can create named lists for things like customer names or product descriptions. I can build image templates for hero shots and avatars, and even standardize my icon sets to adapt to light/dark mode. Applying these with a single click transforms a static wireframe into a much more believable, data-rich mockup.

(IMAGE)
This is a look at my own library of text and image templates. Having these ready to go means I can populate entire pages consistently in seconds.

Automating Content with Smart Matching and Modifiers
Here’s where things get really powerful. The template system isn’t just a static library; it’s an automation engine that uses layer names to apply content intelligently.
For example, if I name a text layer ‘customer-names’, the plugin automatically fills it from the right template. For more granular control, I can use Layer Name Modifiers to add logic directly into the layer name itself. Something like `customer-names:text:upper` will replace the text and convert it to uppercase, without me needing to open a single settings panel.

Working at Scale: Bulk Updates and Smart Selections
My design files, like many others, are often massive. I needed tools to manage that complexity and perform bulk operations that would otherwise mean hours of tedious, manual clicking.
The Smart Auto-Selection feature has been a huge help. It can instantly select all matching elements across a file — every button label, for instance. From there, the Content Management panel gives me a structured list of all the text, so I can filter, sort, and perform batch updates. This has been incredibly valuable for copy reviews, localization, and preparing A/B tests.

Accelerating Prototyping and Data Population
Creating realistic and varied mockups is something I find crucial for compelling presentations. So, I built in features to help populate designs with diverse, believable data in seconds.
With Component Randomization, I can instantly vary properties across selected components to give each card a unique avatar, status, or name. And if I need to populate a design from a spreadsheet, I can just copy-paste a block of text, and the plugin automatically distributes it across my selection. It even handles overflow by creating new instances, so no data gets lost.

A Deep Integration for a Native Figma Experience
I believe a great plugin should feel like a natural extension of the application it lives in. I’ve tried to build Contently with this philosophy, integrating it as deeply as possible into Figma’s native UI and workflows.
I’ve exposed core functions as Quick Actions in Figma’s command palette (`Cmd+/`), so I can apply templates or select layers without opening the plugin panel. I also put common actions like shuffling content into the right-click context menu, right where I’d expect to find them.

The ability to name a layer ‘customer-names’ once and have it auto-populate every time is the kind of efficiency that lets me focus on the actual design, not manual data entry.
Feedback from a Senior UX Designer

(IMAGE)

An example of using Layer Name Modifiers like `:upper` or `:numbers`. This lets me control formatting directly from the layer name, which is a huge time-saver.

I also wanted this flexibility to extend to the platform level. That’s why I implemented multi-provider AI support, so you can bring your own API key. This avoids vendor lock-in and lets you choose the model that best fits your needs for cost, speed, and quality. I’ve made sure it’s compatible across Figma Design, FigJam, and Slides, using a freemium model that I believe is fair and sustainable — so far, I make no money out of it, sems like people take the free and run with it ;)

(IMAGE)
Here’s the Content Management panel, which gives me a bird’s-eye view of all text. It makes bulk edits and copy reviews so much more manageable.

My Philosophy on Workflow, Tools, and Privacy

I built this tool on principles of flexibility and user control. The ‘bring your own key’ model for AI is important to me because it means you control your own data and costs. I also made the analytics privacy-first and opt-in, so no usage data is collected without explicit consent. This was crucial for making it a trustworthy tool for both individual designers and larger teams.

My goal is to help bridge the gap between static design and dynamic content, pushing Figma beyond a drawing tool and closer to a true product development environment.
David Zerbe, Founder of uxact.ly & raiken.io

Who Might Find This Plugin Useful?
I designed this with a few people in mind: the solo designer who needs a quick AI-powered second opinion, the design system manager trying to enforce content consistency, and the product team that’s tired of the disconnect between design and copy.
My aim was to create more than just a content-stuffing tool. I wanted a comprehensive suite that would lead to a more integrated, intelligent, and efficient design process. By embedding these capabilities directly into Figma, I believe we as designers can build more realistic prototypes, collaborate more effectively, and ultimately, ship better products faster.

A Quick Look: AI-Powered Content
A toolkit I’ve put together to bring the power of generative AI directly into my design workflow.
This includes tools to generate text, get instant design feedback, and create images without leaving Figma. As I mentioned, it supports your own API keys for major AI providers, which I think is crucial for maintaining control over tools and data.

A Quick Look: Intelligent Templates
This system is my answer to moving beyond static placeholders with dynamic, reusable content.
It allows for automatically populating layers based on their names using Smart Templates. I’ve also included Layer Name Modifiers and Inline Placeholders for more precise control over formatting, all handled directly in the layer name.

A Quick Look: Workflow Automation
These features are all about eliminating repetitive tasks and making large-scale design files easier to manage.
Features like Smart Selection help grab hundreds of similar layers at once, while a centralized Content Panel helps manage all the copy. Component Randomization is there to instantly diversify mockups. My hope is that these tools save designers like me hours of manual work.

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lost count of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two of the most tedious parts of my design work: sourcing imagery and organizing layers.
I integrated an AI image generation feature that lets me create visuals from a text prompt using models like DALL-E 3, right on the canvas. It’s been incredibly useful for rapid moodboarding or creating custom visuals without relying on stock photos or jumping over to Photoshop.
Another time-saver is the AI Layer Rename feature. It analyzes the visual content to turn a messy layer panel (we’ve all been there) into something descriptive, like changing ‘Rectangle 12’ to ‘Mountain Sunset’. This doesn’t just make my files easier to navigate; it’s the foundation for the Smart Template system.

Moving Beyond ‘Lorem Ipsum’ with Smart Templates

One of my biggest pet peeves is designing with placeholder text. That’s why I focused on building a robust template system that allows me to create and apply realistic, reusable content libraries for text, images, and icons. It makes a huge difference in maintaining consistency and realism.
I can create named lists for things like customer names or product descriptions. I can build image templates for hero shots and avatars, and even standardize my icon sets to adapt to light/dark mode. Applying these with a single click transforms a static wireframe into a much more believable, data-rich mockup.

(IMAGE)
This is a look at my own library of text and image templates. Having these ready to go means I can populate entire pages consistently in seconds.

Automating Content with Smart Matching and Modifiers
Here’s where things get really powerful. The template system isn’t just a static library; it’s an automation engine that uses layer names to apply content intelligently.
For example, if I name a text layer ‘customer-names’, the plugin automatically fills it from the right template. For more granular control, I can use Layer Name Modifiers to add logic directly into the layer name itself. Something like `customer-names:text:upper` will replace the text and convert it to uppercase, without me needing to open a single settings panel.

Working at Scale: Bulk Updates and Smart Selections
My design files, like many others, are often massive. I needed tools to manage that complexity and perform bulk operations that would otherwise mean hours of tedious, manual clicking.
The Smart Auto-Selection feature has been a huge help. It can instantly select all matching elements across a file — every button label, for instance. From there, the Content Management panel gives me a structured list of all the text, so I can filter, sort, and perform batch updates. This has been incredibly valuable for copy reviews, localization, and preparing A/B tests.

Accelerating Prototyping and Data Population
Creating realistic and varied mockups is something I find crucial for compelling presentations. So, I built in features to help populate designs with diverse, believable data in seconds.
With Component Randomization, I can instantly vary properties across selected components to give each card a unique avatar, status, or name. And if I need to populate a design from a spreadsheet, I can just copy-paste a block of text, and the plugin automatically distributes it across my selection. It even handles overflow by creating new instances, so no data gets lost.

A Deep Integration for a Native Figma Experience
I believe a great plugin should feel like a natural extension of the application it lives in. I’ve tried to build Contently with this philosophy, integrating it as deeply as possible into Figma’s native UI and workflows.
I’ve exposed core functions as Quick Actions in Figma’s command palette (`Cmd+/`), so I can apply templates or select layers without opening the plugin panel. I also put common actions like shuffling content into the right-click context menu, right where I’d expect to find them.

The ability to name a layer ‘customer-names’ once and have it auto-populate every time is the kind of efficiency that lets me focus on the actual design, not manual data entry.
Feedback from a Senior UX Designer

(IMAGE)

An example of using Layer Name Modifiers like `:upper` or `:numbers`. This lets me control formatting directly from the layer name, which is a huge time-saver.

I also wanted this flexibility to extend to the platform level. That’s why I implemented multi-provider AI support, so you can bring your own API key. This avoids vendor lock-in and lets you choose the model that best fits your needs for cost, speed, and quality. I’ve made sure it’s compatible across Figma Design, FigJam, and Slides, using a freemium model that I believe is fair and sustainable — so far, I make no money out of it, sems like people take the free and run with it ;)

(IMAGE)
Here’s the Content Management panel, which gives me a bird’s-eye view of all text. It makes bulk edits and copy reviews so much more manageable.

My Philosophy on Workflow, Tools, and Privacy

I built this tool on principles of flexibility and user control. The ‘bring your own key’ model for AI is important to me because it means you control your own data and costs. I also made the analytics privacy-first and opt-in, so no usage data is collected without explicit consent. This was crucial for making it a trustworthy tool for both individual designers and larger teams.

My goal is to help bridge the gap between static design and dynamic content, pushing Figma beyond a drawing tool and closer to a true product development environment.
David Zerbe, Founder of uxact.ly & raiken.io

Who Might Find This Plugin Useful?
I designed this with a few people in mind: the solo designer who needs a quick AI-powered second opinion, the design system manager trying to enforce content consistency, and the product team that’s tired of the disconnect between design and copy.
My aim was to create more than just a content-stuffing tool. I wanted a comprehensive suite that would lead to a more integrated, intelligent, and efficient design process. By embedding these capabilities directly into Figma, I believe we as designers can build more realistic prototypes, collaborate more effectively, and ultimately, ship better products faster.

A Quick Look: AI-Powered Content
A toolkit I’ve put together to bring the power of generative AI directly into my design workflow.
This includes tools to generate text, get instant design feedback, and create images without leaving Figma. As I mentioned, it supports your own API keys for major AI providers, which I think is crucial for maintaining control over tools and data.

A Quick Look: Intelligent Templates
This system is my answer to moving beyond static placeholders with dynamic, reusable content.
It allows for automatically populating layers based on their names using Smart Templates. I’ve also included Layer Name Modifiers and Inline Placeholders for more precise control over formatting, all handled directly in the layer name.

A Quick Look: Workflow Automation
These features are all about eliminating repetitive tasks and making large-scale design files easier to manage.
Features like Smart Selection help grab hundreds of similar layers at once, while a centralized Content Panel helps manage all the copy. Component Randomization is there to instantly diversify mockups. My hope is that these tools save designers like me hours of manual work.

Bridging the Design-Content Gap: My Journey with an AI-Powered Figma Plugin

I’ ve lost count of the hours spent toggling between Figma and a dozen other tabs for copy, data, and feedback. That constant context-switching was a major bottleneck in my workflow. Here, I’ll share how I’m integrating AI, smart templates, and automation directly into my design process to create a more unified and efficient environment.

(IMAGE)

Here’s the Contently interface, docked right inside Figma. My goal was to have all the content and AI tools I need accessible without ever leaving the design canvas.

Tackling the Fragmented Workflow Between Design and Content

For years, my design process felt fragmented. I’d be deep in Figma, but the actual content — the copy, the user data — lived in separate documents. This constant back-and-forth between tools wasn’t just annoying; it led to sync issues, inconsistencies, and a lot of wasted time.
This is the core problem I wanted to solve. It’s about bringing content creation and management directly into the design canvas. For me, it’s not just about filling text boxes; it’s about creating a single source of truth where design and content can evolve together, with a little help from AI and smart automation.

An AI Co-Pilot, Directly Inside My Design Process

What if you could write headlines, generate realistic user data, or get instant design feedback without leaving your file? This was the goal, and it’s what I’ve aimed to achieve with the plugin’s AI features.
I’ve integrated text generation that lets me use my preferred model (like GPT, Claude or even Local LLMs) to write or rewrite copy directly in a text layer. When I need a quick second opinion, I use an AI Vision Analysis feature that leverages Gemini’s multimodal capabilities to give me structured feedback on layout, accessibility, and visual hierarchy. It’s like having an instant design review on demand.

For me, eliminating the constant tab-switching between my design file and an AI chatbot isn’t just a small convenience. It’s a fundamental shift that helps me stay in the creative zone and maintain momentum.
A Fellow Product Designer’s Perspective

Beyond Text: Using AI for Visuals and Organization

Beyond text, I’ve found AI can help streamline two o