Not a Developer? Let AI Build Figma Plugins for You | Figma Bites

Описание: This video is for designers that want to build their own Figma plugins or perhaps work at a company with a lengthy approval process for using existing Figma plugins. You’ll learn how to use AI to help you build your own plugin with zero coding experience.

DOWNLOAD LINKS:
Figma - https://www.figma.com/downloads/
Visual Studio Code - https://code.visualstudio.com/download

DEMO FILE:
https://www.figma.com/community/file/...

PROMPT 1:
I want to make a Figma plugin that will have a custom UI. I’ll be writing in javascript. When you give me code snippets, can you include the entire code for whatever file I need to update? Example: If you are giving me a change to the javascript file, give me the full javascript code instead of just the part that changes. This will help me out.

My plugin is called “Burgerator” and it will randomly create a burger illustration based on some parameters I provide. There will be main components in the file to represent all the possible parts of a burger. Here is a list of the components by name:

Top Bun
Bottom Bun
Meat Patty
Cheese Slice
Onion Slice
Bacon Strip
Lettuce
Tomato
Pickle
Fried Egg
Grilled Mushroom
Ketchup
Mustard
Mayo

In my UI, I want a checkbox for each of the options. Based on what I check, I then want to be able to click a button to generate a random hamburger from the components I checked.

Top Bun should always be first and bottom bun last Don’t include those in the checkboxes. For each checked item, create a random amount of instances of the component between 1 and 3. Then stack them all together in an Auto Layout with 0 space between each one

PROMPT 2:
Ok that seemed to work and for the auto layout, I need the frame to have the width resizing set to “Hug”

PROMPT 3:
Nice, that worked. Now I want to clean up the UI of the plugin a bit. Can you update the UI to: give me a taller UI window so we don’t have to scroll, to include some CSS styling to make a nice rounded purple button with white text that gets darker purple when we click it, to change all of the words to a sans-serif font, and to make the checkbox text smaller.

PROMPT 4:
This looks good but the plugin isn’t any taller. Can we set it to 500px tall?


===
ABOUT FIGMA BITES
===

Figma Bites is a video series that aims to teach you how to speed up your Figma workflow.

📺 Who is the Audience? 📺

Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your Figma workflow today.

👔 Why this format? 👔

We’re all busy working on making the world better for our users and making changes to our workflow can take us out of that focus. Our hope is that these short videos will be easily digestible when you’ve only got a few minutes to learn something new. The topics will be small enough to learn quickly and add to your workflow without trying to boil the ocean.

⏳ When do new videos come out? ⏳

We’re planning to release a new video every other week on Tuesdays. We can’t promise to hit this 100% of the time but will do our best to go no longer than 1 month between videos if things get busy.