- A non-coder successfully used an AI coding assistant, Claude Code, to build a custom Figma plugin without any prior programming experience.
- The plugin automates the repetitive task of generating multiple ad variations with different headlines, drastically reducing the time required for marketing asset creation.
- This demonstrates that AI tools can significantly lower the barrier to entry for building custom solutions, allowing individuals to automate their work by clearly explaining the problem.
How Anthropic uses Claude in Marketing
- Manually creating multiple ad variations across different aspect ratios in Figma is a highly repetitive and time-consuming process for marketers.
- Individuals without coding experience can leverage AI coding assistants like Claude Code to build custom tools, such as Figma plugins, to automate such tasks.
- The process involves selecting a Figma frame, using the plugin to identify template components (e.g., headline, CTA), pasting desired headline variations, and generating new ad variants.
- The custom Figma plugin reduced the time spent on generating ad variations from approximately 30 minutes to just 30 seconds.
- To effectively use AI tools for automation, identify repetitive areas in your work, start with small and easy problems, and clearly articulate the challenge and desired solution.
- The primary skill needed to utilize AI coding assistants effectively is the ability to explain your requirements clearly and concisely, not extensive coding knowledge.
Figma — A collaborative web-based interface design and prototyping tool.
Figma plugin — An extension or add-on that provides additional functionality within Figma.
Claude Code — An AI coding assistant used to generate code and assist with software development tasks.
Terminal — A command-line interface (CLI) program used to interact with a computer's operating system by typing commands.
Frame — A container or artboard in Figma used to organize and design user interface elements.
Headline CTA — Refers to the main text (headline) and a Call To Action (CTA) button or text within a design template, prompting user interaction.
Ad variants — Multiple different versions or iterations of an advertisement, often created to test performance or target different audiences.
Aspect ratio — The proportional relationship between the width and height of an image or video, such as 16:9 or 1:1.
Paid social — A marketing strategy involving paid advertisements on social media platforms to reach specific audiences.
App store — A digital distribution platform, such as Apple's App Store or Google Play, where users can download mobile applications.
I've never written a single line of code before in my life. I literally had to Google how do I open terminal on Mac. My first reaction when we launched Claude Code was I have zero idea what this product is for. It just didn't really click in my mind. Some of the channels I work on include paid social but also the app store which involve visual creatives within Figma that our design team will help me build. But when it comes to creating multiple different variations, the usual process is I'll go into Figma, I'll take the existing frame, I'll copy and paste it a couple times, then I'll open up my Google doc, copy and paste the headline variations, and back and forth. Now, this process can get very, very repetitive when you're trying to do this across 10 different variations, across five different aspect ratios, and all that time adds up very, very quickly. So, I basically turned to Claude Code to help me create a Figma plugin where all I would have to do is copy and paste just once all the different variations and copy that I wanted to update. So, now let's switch gears to the Figma plugin that I built. In this project file, I have an example static image that I want to update the headlines for. The first thing I'll do is I'll select the frame and then I'll open up the Figma plugin that I previously created with Claude Code. I'll hit identify template components and you'll be able to see that the template is identified with the different portions of our frame including the headline CTA and then the code block. In this case, we'll just want to update the headlines. So, I'll leave that checked. I'll switch screens over to the list of headlines that I previously created. I'll copy it once, go back to Figma, and then I'll paste in all the headlines in my Figma plugin. And as soon as I hit generate ad variants, it'll generate all the different variations of my copy for me, each in its own individual frame. Now, this previously would have taken me maybe 30 minutes to repeat this process one by one across all the different ad specs that we had. But thanks to this Figma plugin, we're able to do this process in around 30 seconds. My advice would be if you want to try out a tool like Claude Code is to just think through what are the areas of your work that you've identified that are either repetitive or you think could automate and just start with a very very small and easy thing. You don't need to know how to code. All you need to know is to how to explain your challenge and what you're trying to solve for in a very clear and concise manner. So the gap between I wish this existed and wow, I can actually build this myself is actually much smaller than people realize.
TL;DR
- A non-coder successfully used an AI coding assistant, Claude Code, to build a custom Figma plugin without any prior programming experience.
- The plugin automates the repetitive task of generating multiple ad variations with different headlines, drastically reducing the time required for marketing asset creation.
- This demonstrates that AI tools can significantly lower the barrier to entry for building custom solutions, allowing individuals to automate their work by clearly explaining the problem.
Takeaways
- Manually creating multiple ad variations across different aspect ratios in Figma is a highly repetitive and time-consuming process for marketers.
- Individuals without coding experience can leverage AI coding assistants like Claude Code to build custom tools, such as Figma plugins, to automate such tasks.
- The process involves selecting a Figma frame, using the plugin to identify template components (e.g., headline, CTA), pasting desired headline variations, and generating new ad variants.
- The custom Figma plugin reduced the time spent on generating ad variations from approximately 30 minutes to just 30 seconds.
- To effectively use AI tools for automation, identify repetitive areas in your work, start with small and easy problems, and clearly articulate the challenge and desired solution.
- The primary skill needed to utilize AI coding assistants effectively is the ability to explain your requirements clearly and concisely, not extensive coding knowledge.
Vocabulary
Figma — A collaborative web-based interface design and prototyping tool.
Figma plugin — An extension or add-on that provides additional functionality within Figma.
Claude Code — An AI coding assistant used to generate code and assist with software development tasks.
Terminal — A command-line interface (CLI) program used to interact with a computer's operating system by typing commands.
Frame — A container or artboard in Figma used to organize and design user interface elements.
Headline CTA — Refers to the main text (headline) and a Call To Action (CTA) button or text within a design template, prompting user interaction.
Ad variants — Multiple different versions or iterations of an advertisement, often created to test performance or target different audiences.
Aspect ratio — The proportional relationship between the width and height of an image or video, such as 16:9 or 1:1.
Paid social — A marketing strategy involving paid advertisements on social media platforms to reach specific audiences.
App store — A digital distribution platform, such as Apple's App Store or Google Play, where users can download mobile applications.
Transcript
I've never written a single line of code before in my life. I literally had to Google how do I open terminal on Mac. My first reaction when we launched Claude Code was I have zero idea what this product is for. It just didn't really click in my mind. Some of the channels I work on include paid social but also the app store which involve visual creatives within Figma that our design team will help me build. But when it comes to creating multiple different variations, the usual process is I'll go into Figma, I'll take the existing frame, I'll copy and paste it a couple times, then I'll open up my Google doc, copy and paste the headline variations, and back and forth. Now, this process can get very, very repetitive when you're trying to do this across 10 different variations, across five different aspect ratios, and all that time adds up very, very quickly. So, I basically turned to Claude Code to help me create a Figma plugin where all I would have to do is copy and paste just once all the different variations and copy that I wanted to update. So, now let's switch gears to the Figma plugin that I built. In this project file, I have an example static image that I want to update the headlines for. The first thing I'll do is I'll select the frame and then I'll open up the Figma plugin that I previously created with Claude Code. I'll hit identify template components and you'll be able to see that the template is identified with the different portions of our frame including the headline CTA and then the code block. In this case, we'll just want to update the headlines. So, I'll leave that checked. I'll switch screens over to the list of headlines that I previously created. I'll copy it once, go back to Figma, and then I'll paste in all the headlines in my Figma plugin. And as soon as I hit generate ad variants, it'll generate all the different variations of my copy for me, each in its own individual frame. Now, this previously would have taken me maybe 30 minutes to repeat this process one by one across all the different ad specs that we had. But thanks to this Figma plugin, we're able to do this process in around 30 seconds. My advice would be if you want to try out a tool like Claude Code is to just think through what are the areas of your work that you've identified that are either repetitive or you think could automate and just start with a very very small and easy thing. You don't need to know how to code. All you need to know is to how to explain your challenge and what you're trying to solve for in a very clear and concise manner. So the gap between I wish this existed and wow, I can actually build this myself is actually much smaller than people realize.