Build your first plugin: 4. Building Your Plugin

In this video series we'll learn together, and build a plugin that creates a customizable post for a social media app design. We'll start with a basic overview, go through an introduction to plugins and APIs, walk through how to set up your environment, take you step-by step-through building our first plugin and finally, show you how to publish to the community.

This video will show you how to build your plugin.

00:00 - Introduction
00:10 - Overview
00:23 - The Design File
00:45 - What Are We Building and Why?
01:43 - Card Components
02:23 - Third Party APIs
03:05 - Project Requirements
04:40 - Tom Lowry's UI Library
05:09 - Logic Overview
06:30 - Building UI
07:02 - Creating A Module
07:59 - Running The Plugin
08:50 - Creating Input Fields and Labels for Username, Name, and Description
10:20 - Adding Block Styling
10:34 - Switch
11:03 - Tom Lowry's UI Library
11:36 - Adding Classes
12:09 - Adding A Switch 12:10
12:38 - Adding Radio Buttons
13:26 - Adding the Submit Button
13:48 - UI Finishing Touches
14:39 - Adding Logic
14:47 - Event Listener
16:10 - Adding The Event Listener
16:49 - Checking The Event Listener
17:15 - Creating Constant Variables
18:05 - Logging The Variables
18:43 - Dark Mode Constants
19:18 - Adding Variant Values and Query Selector
20:03 - Logging The Variants
20:33 - Parent Post Message Method
22:25 - Running The Logs
22:47 - Closing The Plugin
23:13 - Dark Mode Conditional
24:10 - Figma API Reference
25:08 - Exploring Component Set Nodes and the Find One Method
26:26 - Exploring the Property Tags
27:08 - Adding The Find One Method to Code.TS
27:45 - Checking The Component Set Node Find One Method
28:00 - Default Variants
28:48 - Creating a Default Instance
29:21 - Adding a Create Instance to Code.TS
30:00 - Creating Variations
31:03 - Checking the Dark Mode Conditional
31:39 - Creating Other Variants
32:13 - Logging the Variants
32:31 - Nested If Else Statements
33:19 - Switch Case Statement
34:41 - Other Switch Cases
35:15 - Creating Variants
36:00 - Let Variable
37:15 - Completing The Switch Case Statements
37:30 - Creating the Instance of the Selected Variant
37:41 - Testing the Switch Cases
38:15 - Selecting the Text Nodes
39:45 - Checking the Text Node Logs
39:57 - Overwriting the Default Text
40:20 - Font Loading Error
40:50 - Loading the Font Family
41:55 - Testing the Text Overwrites
42:14 - Finishing Touches
42:54 - Scroll and Zoom Into View
44:30 - Wrapping Up

#Figma #FigJam #Plugin #Tutorial #NothingGreatIsMadeAlone

[Figma]

Also, at 13:00 the class names for the labels should be "radio__label" instead of "radio__button". Sorry for the confusion!

[calvintan]

For those having issue with the styles from figma-plugin-ds not showing up: An error in the Figma console log says "Refused to load the stylesheet because it violates the following Content Security Policy directive..." which means <link> tag is probably not going to work.

What can fix this: Open the css file via the CDN link, and copy the styles over into the <style> tag in your ui.html file as suggested by another comment.

[deepeebee]

Thank you for this tutorial. As of November 2023, and on a Mac, this needs quite a few changes to get around errors and issues with the external stylesheet from Tom. It took me a while to work this out (especially as a Figma plugin beginner), and it would be nice to see an updated version with all the fixes that Figma requires. For what it’s worth. ⭐

[CristianSerran]

For people having problem with the styles from figma-plugin-ds carrying through to figma from the <link> tag or a separate CSS file, I copied the entire thing into my <styles> tag inside the ui.html file ad it worked.
Hope that works for you also. Cheers!

[happygouki]

ty for the dora-like interactive pauses. I yell out the answers i can't help it 😀

[andikaleonardo]

I think the properties "value" inside element label in input div should be "placeholder". Is it right?

[diyar.]

Hey there, unfortunately I am not able to use the UI library within Figma -- it doesn't seem to apply the styling but I can see it on an external browser. Would really appreciate some help with this!

[colinkuntz]

A good challenge here is to try and remove the need for if and switch statements by using template literals to convert your imageVariant and darkModeState into a string representing your components name to be used when calling postComponentSet.findOne(). Also add a default checked state to one of your radio buttons to keep from getting errors for null values!

[patrickackom]

hi can you make a video on creating a plugin that works with images (like the unsplash). the docs is kinda confusing, thanks

[pedrambehnood]

Hey, Amazing tutorial!

This plugin only works on that specific Figma file. How can I make it in a way that I can use it in other files and yet get the same results?

[njbpokl]

I don't know why. Tom Lowry's UI library it not work in my file. is anybody know why?

[sravan]

<div>
<label>Username</label>
<input id="username" class="input__field" type="text">
</div>
assign ID to input rather than label. I am beginner and spent whole afternoon why my log is always showing null or undefined.

[jamesgrubb]

Thanks for this tut. Im getting a typescript error on Property 'createInstance' does not exist on type 'SceneNode'.
Property 'createInstance' does not exist on type 'ComponentSetNode'.

[Vignesh-hlbd]

My radio button value is showing "Null" everytime, can you explain why ?

[petroleum]

Hi dear figma
When i added style tags like video
My first style's color changed to red.
Now i wanna know how can i send photo and describe my issus completly🤗🙃

[andikaleonardo]

The radio button didn't work on me, is there any problem? But for the label, i've change it from radio__button to label in the <label> tag. Any help?

[ahmed]

I tried to use the styles from Github it doesn't work!!
I copied this 👇 to my html file, changed classes / modifiers and it doesn't change input field style!
<!-- Standard link tag-->
<link rel="stylesheet"

[ndbing_]

radio buttons don't appear (I copied your exact code)

[KamaleshwarMorjal]

Unable to try the call to `figma.root.findOne()` in console at @25:56 . `figma` is undefined. Please someone tell if I'm missing something obvious. Just checked that this works from within code.ts though.

[abdelmonemabbasy]

She became totally different person than the previous 3 lessons 😂