My Dear Friends of Figma in Hi again sophie here from figma’s product education team welcome back to the build your first plugin course in the previous video we saw a range of plugins that you can install from the figma community to customize and enhance your figma experience maybe you already have an idea for a plugin and you’re wondering how exactly.
Do we build a plugin in this series we are going to take you through the process of building a plugin that creates components for social media posts in a figma file to begin we’ll use figma’s plugin api to make sure our plugin can communicate with figma an api or application programming interface allows two.
Applications to talk to each other our plugin creates a request to figma and figma’s api delivers a response you can think of an api as a waiter at a restaurant first it takes an order from the customer which in this case is our plugin then the waiter takes that order to the.
Kitchen and makes sure that the specifications have been met before serving the order to the table in order to use figma’s plugin api we first need to learn how to talk to it this is done by referencing figma’s plugin api documentation in here you’ll find tons of information about how plugins work as well as a.
Reference to all the different components you can interact with using the api if you’re ever wondering can i do this with the plugin api the docs which we linked in the video description are a great place to start since the p in api stands for programming we need to use a programming.
Language to use it well actually a few different languages but don’t worry while it’s handy to have some basic knowledge of writing code it’s not a requirement we’ll teach you everything you need to know starting with a mini crash course on programming terminology if you have previous experience writing code you might want to skip ahead to the.
Next video where we’ll talk about environment setup think of our plugin structure like a house the programming languages we’ll use all work together to specify the way our house looks and how it works first we’ll need to write some typescript a programming language that is built on top of javascript while you.
Can also use javascript figma recommends writing your plugins with typescript typescript helps us write code with less bugs along with the added benefit of inline autocomplete with our preferred editor visual studio code our typescript code will make the plugin interactive and contain all of the logic of the.
Plugin if typescript was an element of a house it would be the ways in which you can interact with the home these are things like turning on a light or opening a door then we’ll use html which stands for hypertext markup language you don’t need to know what hypertext or.
Markup means just know that it will define the structure of the plugins interface if you choose to create one these are the labels fields and buttons that the user will see and interact with typing this creates a text input field for our plugin ui that a user can type into.
And adding this code above it gives that field a label so our user knows that this field is for their name each of these lines between the angled brackets are called tags here we have a label tag and an input tag back to our house here html would be the objects and.
Surfaces that you can interact with you can think of html as the structure of the house for example when you turn a light on html is the light switch itself or when you open a door you guessed it html is what gives us a door to open finally we’ll give the plugin some style using css.
Css is how we define the look of the interface we can style anything from the color or size of our label or text input or the font we want the interface to use we can even use css to change the position of those same elements in the ui css is usually the final touch to a.
Project wouldn’t a house be boring without some color maybe our door could be cornflower blue or the roof could be firebrick red css allows us to customize the way that we present our ui to users technically we could stop after writing only the typescript code and not use.
Html and css to build an interface not all plugins need a user interface let’s jump into a quick example to show you what we mean almost everything in javascript is an object much like objects that exist in the real world javascript objects have their own functions and properties what about something like a car.
Can you think of functions and properties associated with this object a car could have the properties make model and year as well as the function drive figma has its own global object conveniently enough this object is also named figma and has its own functions and properties that let us interact with.
The canvas using the plugin api we can tell the figma object to do many different things for example we can create a rectangle on the canvas by writing this statement take a closer look at this line of code from our car example and compare it to the one for creating a rectangle what do.
You notice this is called dot notation the dot is how we call a function that belongs to an object you may also have noticed the parentheses after the function name this is where we pass arguments into the function whether we pass arguments or not depends.
On how the function was defined we don’t need to worry about that right now so we’ll leave them empty the semicolon is how we end a statement in javascript this is one way we can separate the different parts of our code most of the time a basic program runs one statement at a time in the order that they were.
Written think of them as steps in a recipe a plugin can have any number of statements so it’s a good idea to separate them if you want to try writing your first statement and running it you can open figma’s developer tools in the desktop app by going to the plugins.
Menu and hovering over development click on open console and in the console tab type in figma dot create rectangle then hit enter you’ll see that figma has created a rectangle just like if we had used the r shortcut and clicked on the canvas you can also make plugins for fig jam and can use fig jam only api functions.
Like this to create sticky notes nice we could wrap this up call it a day and publish this one line plugin to the community we didn’t even need to build a ui however we’re going to build something a bit more complex than this and see some of the cool things we can do if our.
Plugin did have an interface while we were able to test this one line of code in our developer tools we’ll actually need to set up a proper environment to build a plugin that uses all the tools we’ve just introduced there are a few ways to get our environment organized and ready for developing plugins.
In this beginner series we’ll keep it simple by following figma’s plug-in setup guide and use the structure already built into the sample project i’m sure you’re excited to start building your very first plugin now that we’ve gone through a brief overview of the process and tools we’ll.
Need head over to the next video and get your environment set up if you want to get a head start make sure to download bs code since this is the development environment we’ll be working in check out the link in the description below.
See you in the next video
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Written Guide: https://bit.ly/3zh31nI 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:,