<-Back

Coding a Figma plugin with ChatGPT

I’m writing this because I’m hoping to encourage someone to try something similar. I also wanted to document my growth.

I was struggling to manage copy in my design files

A short word problem

Imagine a small feature launch has 5 new screens and that each screen contains 6 different text fields. Next, imagine you have 4 versions of that screen - one each for iOS, Android, web, and mobile web.

That’s 120 text fields you have to make sure are correct - And when you have to make changes to them, it becomes a nightmare of a task

Now imagine a project with 20+ screens. Good luck, kiddo.

Enter a coworker, wielding ChatGPT

One of my coworkers, Joe Fajnor, had recently ascended to designer godhood (in my eyes) by creating his own Figma plugin with some help from ChatGPT. As he was ascending he looked me in the eyes, handed me a glowing orb, and said “It is your turn, my son”…err something like that.

He encouraged me to try solving my problem with code, and gave me a tutorial on using ChatGPT. And then he left me to try it out on my own. On the sidelines he kept encouraging me.

🫤

At first I thought it would likely be impossible. “Other people solve problems with code,” I thought. “I’m just a designer.”

Enter me, failing over and over

I spent a lot of long nights asking ChatGPT to “help me fix this” or “what is this piece of code doing” and “help me modify this part.” Sometimes it would give me code that was simply wrong, and I would have to figure that out.

Similar to ‘Pinky and the Brain”, whenever the Brain’s (ChatGPT) overcooked plans didn’t work out, I was there to state the obvious and keep it on track.

Every time I saw progress (slow as it may have been), it pushed me to try new things and go further than I had previously. Even if it may have been 1am on a Saturday. I was hooked.

🧐

While coding with ChatGPT was difficult, it was easier than I expected, and certainly not impossible.

Then I succeeded

Eventually I made an MVP, got some kind friends and coworkers to test it, made another version, tested that version, and then finally published a third version of the plugin for use. The real success though, it what I learned by going through this process.

💪🏼

I felt like I had conquered the world

So what does the plugin do

The plugin creates a source of truth using Figma’s variables feature. You can then link any text layer to this source of truth so that when that source is updated, it updates all the text layers referencing it. Saves me LOADS of time.

If you’re curious, here’s a link to the Figma plugin I made.

What did I learn/gain?

  1. I’m more comfortable around code

This exercise didn’t teach me how to code - I still couldn’t sit down and write a program from scratch. But now I can intuit what written code is doing, OR at very least ask ChatGPT to explain it to me.
Better yet, it helped me better understand what my engineers deal with each day so I can design solutions that are better informed.

  1. Chunking down functionality in to smaller bits helped me stay motivated

At first i was trying to make one giant plugin that did all of these amazing things. Eventually I realized that ChatGPT does better when you give it fewer things to do at once. And so do I.
Chunking down into micro programs helped me make progress faster. While this lead to a lot of code restructuring towards the end of the process, it gave me momentum to push through any discouragement or times I was blocked.

  1. If I can create something like this, so can you

The most coding experience I had before this was a computer class I took in high school where we mostly just played Quake (shoutout to the Shadow Mountain High School CS class).

  1. Generative AI actually does deserve hype

I had written off “Ai” as an unknowable tech trend - It was a black box for smart people to figure out what to do with and then end the world or something - Thank you, Terminator. I still think that the biggest leaps in AI tech will be done by brighter minds than mine.
However, I’m realizing that Ai has many small yet impactful applications that we have only begun to imagine. And the best news is that you don’t have to be an engineering god to enrich your life using Ai.

My Advice

FRIK AROUND with AI, and end the world find out. Try something!

Thank you’s 🍻

Thanks to everyone who helped make this Plugin a reality. My coworkers and friends who were tortured by my incessant talking about it. Those who tested it for me. And special thanks to Joe for the encouragement and help along the way - it made all the difference. 🍻

602.814.1449

•

rbradleyjudd@gmail.com

<-Back

Coding a Figma plugin with ChatGPT

I’m writing this because I’m hoping to encourage someone to try something similar. I also wanted to document my growth.

I was struggling to manage copy in my design files

A short word problem

Imagine a small feature launch has 5 new screens and that each screen contains 6 different text fields. Next, imagine you have 4 versions of that screen - one each for iOS, Android, web, and mobile web.

That’s 120 text fields you have to make sure are correct - And when you have to make changes to them, it becomes a nightmare of a task

Now imagine a project with 20+ screens. Good luck, kiddo.

Enter a coworker, wielding ChatGPT

One of my coworkers, Joe Fajnor, had recently ascended to designer godhood (in my eyes) by creating his own Figma plugin with some help from ChatGPT. As he was ascending he looked me in the eyes, handed me a glowing orb, and said “It is your turn, my son”…err something like that.

He encouraged me to try solving my problem with code, and gave me a tutorial on using ChatGPT. And then he left me to try it out on my own. On the sidelines he kept encouraging me.

🫤

At first I thought it would likely be impossible. “Other people solve problems with code,” I thought. “I’m just a designer.”

Enter me, failing over and over

I spent a lot of long nights asking ChatGPT to “help me fix this” or “what is this piece of code doing” and “help me modify this part.” Sometimes it would give me code that was simply wrong, and I would have to figure that out.

Similar to ‘Pinky and the Brain”, whenever the Brain’s (ChatGPT) overcooked plans didn’t work out, I was there to state the obvious and keep it on track.

Every time I saw progress (slow as it may have been), it pushed me to try new things and go further than I had previously. Even if it may have been 1am on a Saturday. I was hooked.

🧐

While coding with ChatGPT was difficult, it was easier than I expected, and certainly not impossible.

Then I succeeded

Eventually I made an MVP, got some kind friends and coworkers to test it, made another version, tested that version, and then finally published a third version of the plugin for use. The real success though, it what I learned by going through this process.

💪🏼

I felt like I had conquered the world

So what does the plugin do

The plugin creates a source of truth using Figma’s variables feature. You can then link any text layer to this source of truth so that when that source is updated, it updates all the text layers referencing it. Saves me LOADS of time.

If you’re curious, here’s a link to the Figma plugin I made.

What did I learn/gain?

  1. I’m more comfortable around code

This exercise didn’t teach me how to code - I still couldn’t sit down and write a program from scratch. But now I can intuit what written code is doing, OR at very least ask ChatGPT to explain it to me.
Better yet, it helped me better understand what my engineers deal with each day so I can design solutions that are better informed.

  1. Chunking down functionality in to smaller bits helped me stay motivated

At first i was trying to make one giant plugin that did all of these amazing things. Eventually I realized that ChatGPT does better when you give it fewer things to do at once. And so do I.
Chunking down into micro programs helped me make progress faster. While this lead to a lot of code restructuring towards the end of the process, it gave me momentum to push through any discouragement or times I was blocked.

  1. If I can create something like this, so can you

The most coding experience I had before this was a computer class I took in high school where we mostly just played Quake (shoutout to the Shadow Mountain High School CS class).

  1. Generative AI actually does deserve hype

I had written off “Ai” as an unknowable tech trend - It was a black box for smart people to figure out what to do with and then end the world or something - Thank you, Terminator. I still think that the biggest leaps in AI tech will be done by brighter minds than mine.
However, I’m realizing that Ai has many small yet impactful applications that we have only begun to imagine. And the best news is that you don’t have to be an engineering god to enrich your life using Ai.

My Advice

FRIK AROUND with AI, and end the world find out. Try something!

Thank you’s 🍻

Thanks to everyone who helped make this Plugin a reality. My coworkers and friends who were tortured by my incessant talking about it. Those who tested it for me. And special thanks to Joe for the encouragement and help along the way - it made all the difference. 🍻

602.814.1449

•

rbradleyjudd@gmail.com

← Back

Coding a Figma plugin with ChatGPT

I’m writing this because I’m hoping to encourage someone to try something similar. I also wanted to document my growth.

I was struggling to manage copy in my design files

A short word problem

Imagine a small feature launch has 5 new screens and that each screen contains 6 different text fields. Next, imagine you have 4 versions of that screen - one each for iOS, Android, web, and mobile web.

That’s 120 text fields you have to make sure are correct - And when you have to make changes to them, it becomes a nightmare of a task

Now imagine a project with 20+ screens. Good luck, kiddo.

Enter a coworker, wielding ChatGPT

One of my coworkers, Joe Fajnor, had recently ascended to designer godhood (in my eyes) by creating his own Figma plugin with some help from ChatGPT. As he was ascending he looked me in the eyes, handed me a glowing orb, and said “It is your turn, my son”…err something like that.

He encouraged me to try solving my problem with code, and gave me a tutorial on using ChatGPT. And then he left me to try it out on my own. On the sidelines he kept encouraging me.

🫤

At first I thought it would likely be impossible. “Other people solve problems with code,” I thought. “I’m just a designer.”

Enter me, failing over and over

I spent a lot of long nights asking ChatGPT to “help me fix this” or “what is this piece of code doing” and “help me modify this part.” Sometimes it would give me code that was simply wrong, and I would have to figure that out.

Similar to ‘Pinky and the Brain”, whenever the Brain’s (ChatGPT) overcooked plans didn’t work out, I was there to state the obvious and keep it on track.

Every time I saw progress (slow as it may have been), it pushed me to try new things and go further than I had previously. Even if it may have been 1am on a Saturday. I was hooked.

🧐

While coding with ChatGPT was difficult, it was easier than I expected, and certainly not impossible.

Then I succeeded

Eventually I made an MVP, got some kind friends and coworkers to test it, made another version, tested that version, and then finally published a third version of the plugin for use. The real success though, it what I learned by going through this process.

💪🏼

I felt like I had conquered the world

So what does the plugin do

The plugin creates a source of truth using Figma’s variables feature. You can then link any text layer to this source of truth so that when that source is updated, it updates all the text layers referencing it. Saves me LOADS of time.

If you’re curious, here’s a link to the Figma plugin I made.

What did I learn/gain?

  1. I’m more comfortable around code

This exercise didn’t teach me how to code - I still couldn’t sit down and write a program from scratch. But now I can intuit what written code is doing, OR at very least ask ChatGPT to explain it to me.
Better yet, it helped me better understand what my engineers deal with each day so I can design solutions that are better informed.

  1. Chunking down functionality in to smaller bits helped me stay motivated

At first i was trying to make one giant plugin that did all of these amazing things. Eventually I realized that ChatGPT does better when you give it fewer things to do at once. And so do I.
Chunking down into micro programs helped me make progress faster. While this lead to a lot of code restructuring towards the end of the process, it gave me momentum to push through any discouragement or times I was blocked.

  1. If I can create something like this, so can you

The most coding experience I had before this was a computer class I took in high school where we mostly just played Quake (shoutout to the Shadow Mountain High School CS class).

  1. Generative AI actually does deserve hype

I had written off “Ai” as an unknowable tech trend - It was a black box for smart people to figure out what to do with and then end the world or something - Thank you, Terminator. I still think that the biggest leaps in AI tech will be done by brighter minds than mine.
However, I’m realizing that Ai has many small yet impactful applications that we have only begun to imagine. And the best news is that you don’t have to be an engineering god to enrich your life using Ai.

My Advice

FRIK AROUND with AI, and end the world find out. Try something!

Thank you’s 🍻

Thanks to everyone who helped make this Plugin a reality. My coworkers and friends who were tortured by my incessant talking about it. Those who tested it for me. And special thanks to Joe for the encouragement and help along the way - it made all the difference. 🍻

602.814.1449

•

rbradleyjudd@gmail.com