My Dear Friends of Figma in Hi there welcome to part three of the build your first plugin series in this video we are going to get our environment set up and ready for us to start building a figma plugin if you are entirely new to plugins and would like an overview of basic programming concepts check out parts 1 and 2 before watching the rest of this video.
We’ll be following figma’s plug-in setup guide so it’ll be helpful to have it open as we go through this tutorial check out the link in the description below up next we’re going to install visual studio code the development environment we’ll use to build our plugin node.js a way for us to run javascript outside of.
The browser and use tools like npm typescript a programming language built on top of javascript and figma’s typings file which provides assistance while using figma’s plugin api by the end of the setup guide we’ll have a sample plugin that opens a modal asks the user for a number and creates that many rectangles on the canvas.
First we need to install visual studio code if you already have it on your computer you can skip to the next step otherwise pause the video and go to code.visualstudio.com to download visual studio once your download is complete let’s launch visual studio and take a look vs code may ask you for a few additional.
Setup steps like choosing a theme and browsing language extensions we don’t need to worry about this for now so you can click on get started in the top left corner to go to the welcome screen on the welcome screen you’ll see a start menu where we can create a new file open an existing file or run a specific command let’s create a new file to get a.
Better look at our editor vs code will open a new tab this is the text editor where we’ll do a majority of our work when we start writing code to the left you’ll see a sidebar with a few different icons let’s click on the first icon it looks like two pieces of paper on top of each other.
This is our explorer from here we can open code folders and view the structure of those projects visual studio is an integrated development environment meaning it combines several commonly used developer tools into one convenient interface underneath the explorer are icons for search source control run and debug and.
Extensions we won’t be using these ide features but feel free to explore if you want to continue familiarizing yourself with visual studio we’re going to download the dependencies needed to build our plugin a dependency is a library or piece of code needed in order for a different.
Part of the project to work for example a car needs four wheels in order to run without one of the wheels our car wouldn’t get us anywhere or a house of cards if we take one of the cards away the whole thing collapses one way to manage these dependencies is through the use of a tool called npm or.
Node package manager originally javascript was a language designed for web and could not run outside of a web browser nodejs is an environment that allows us to do this npm is the default package manager for node.js npm is both a command line tool and an.
Online repository of open source node.js projects instead of manually including dependencies into our project npm makes it easy to install these dependencies using scripts for example a library like typescript has hundreds of files and dependencies if we were to include these dependencies.
Manually it would take us forever and it’s likely that we’ll make a mistake along the way instead we can use a single npm script to install the entirety of typescript which saves us time and leaves less room for error in order to use npm we first need to download node.js go to nodejs.org and click on downloads.
Choose and download the installer for your operating system once the file is downloaded open it to start the node.js setup wizard if you’re on windows when you get to the part of the node setup that asks about tools for native modules check the box to automatically install the necessary tools then hit next in the following.
Screen click install once the installation is complete hit finish we can verify that node was properly installed by checking it in visual studio’s built-in terminal a terminal is a text-based interface where we can do things like execute programs or type in commands to tell our.
Computer to perform certain actions open up a new terminal window by clicking terminal in the top menu and selecting new terminal then type node and hit enter you’ll see a line that will tell you which version of node.js you’ve installed if you are not seeing this message try restarting visual studio and running this command.
Again hit ctrl c twice to exit node now that you have node installed we have access to npm which allows us to install typescript if you’re a windows user keep watching for mac os skip ahead to this timestamp while in visual studio hit ctrl shift p and in the search bar that pops up type in terminal select default profile then.
Select the matching option a new menu pops up listing our options for a default terminal profile select command prompt to use npm we’ll need to open up a new terminal window from here we can install typescript using npm by typing this line of code in the command line and hitting enter.
You may be asked for a password once you run this script typically this is the same password you use to log into your computer keep in mind that once you start typing in your password you may not see anything being typed out don’t worry the terminal is still reading your input if the installation is successful you’ll.
See something like this to check that everything works you can run this command to see the version of typescript you just installed awesome you’re almost ready to start building your first plugin from here on out figma will need to read our code saved as a local file to do this we’ll need the figma desktop app which you can.
Download from figma.com downloads once that’s done log into the desktop app and create a new design file now select plugins from the menu then under development select new plugin this will bring up the create a plugin modal since we’re building this plugin for figma only we’ll select figma design let’s name this my first plugin and hit.
Next you’ll see three options for creating a new plugin empty run once and with ui and browser apis the sample plugin we’re using requires an interface so we’ll create it with the ui and browser apis hit save as to save it anywhere on your disk.
Moving forward it might be helpful to create a dedicated folder for your plugins to make them easy to find later now that our sample plugin is saved let’s take a look at the underlying code we can do this by opening up the folder in visual studio go to file open folder then select the folder you saved when you created a new.
Plugin a modal may pop up asking if you trust the authors of the files in this folder check the box and click yes i trust the authors to proceed under explorer a new drop-down directory is available under the same name as the folder we opened if you expand this you’ll notice that a.
Few files already exist in our project take a look at the manifest.json file a manifest is a json file that specifies metadata about our project like its name and version in the sample plugin we have a field in the manifest called editor type that is currently set to figma as we mentioned earlier this plugin is designed for.
Figma only and not fig jam in the manifest you’ll see a reference to the ui.html file let’s open it up remember that html is responsible for the structure of our interface this is where we indicate labels buttons and fields that will be in our ui notice that there are already a few things written out for the sample plugin.
Finally let’s open up the code.ts file you guessed it this is where our typescript will go this file is going to be responsible for adding logic and functionality to our plugin you should see some pre-written typescript in here for a plugin to create rectangles you might notice that there are a few.
Errors in our code highlighted by visual studio to fix this we need to install figma’s typings file into a project think of the typings file as an assistant while you use the figma api while the api documentation is there for you to reference as you build your plugin the typings file contains annotations that can assist you while.
Writing code by providing api suggestions and letting you know when you’ve missed an edge case open up a new terminal and run this script in the command line if the installation was successful you’ll see something like this that should have fixed the errors in our typescript file.
If we take a look at our explorer again you’ll see a new directory called node modules this is where the typings library is saved in the index file are the annotations we mentioned earlier for the figma plugin api feel free to take a look if you’re interested in how the types are defined but make sure not to change anything.
Here with our dependencies set up all that’s left for us to do is to make sure that our typescript compiles to javascript in order for our plugin to run you might have noticed in the manifest.json file that the main field references a javascript file instead of the typescript file we looked at earlier since figma plugins run in the browser.
And browsers only support javascript the main field in our manifest will always point to a javascript file compilation is the process responsible for making sure that our typescript gets turned into usable javascript that allows our plugin to run our plugin code will continuously change and evolve as we build it.
Having to go through the compilation process every time that we save a new change to our file can become tedious instead we should set up our project to watch for changes in code.ts then automatically compile into code.js by hitting ctrl shift b in windows or command shift b for mac then selecting watch tsconfig.json.
Now we’re ready to run the sample plugin go back to the design file we created in the figma desktop app navigate to plugins and under development select the name of your sample plugin a modal will pop up with an input for the number of rectangles you want to create for now we can stick with a default of five rectangles and hit.
Create to run the plugin you should see that five orange rectangles have been created in the canvas great your environment is set up and ready for building plugins let’s make a few test changes in code.ts and rerun our plugin in code.ts on line 20 we’ll find the.
Code that creates a rectangle let’s modify this by replacing figma dot create rectangle with figma dot create ellipse save your changes then go back to figma and rerun the plugin what do you notice has anything changed now on line 22 in code.ts you’ll see something that says rect.fills with type.
And color values passed in let’s change the rgb values to 0 0 and 0. how are our shapes different as you can see changing the code in our typescript file also changes the way that our plugin behaves using the plugin api we are able to interact with objects that exist on the.
Canvas or create new ones entirely congratulations on getting your development environment set up and ready to go in the next video we’ll start building your own plugin and learn more about how to use figma’s plugin api i can’t wait for us to get started see you there
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Written Guide: https://bit.ly/3NMWQfe The Petma Design File: …
Figma Official Channel,build,your,first,Design tips, whiteboard, Figma tutorial, Config, Config 2022, design system, plugin, plugin tutorial, what are plugins, coding, Figma coding, typescript, making a plugin, figma plugin tutorial, how to make a figma plugin, API, API tutorial, Figma API, product:figma_design, audience:developer, language:english, format:standard, produced_by:product_education, theme:development, event:none, series:build_your_first_plugin, type:outcome_tutorial, level:beginner, primary_feature:plugins, secondary_feature:,