My Dear Friends of Figma in Foreign my name is Bettina I’m a product designer here at figma working on fake jam and this afternoon I’m your host for this room this is the last session of the last day it’s been an amazing time seeing everyone and hearing all these.
Interesting ideas let’s not lose momentum and give it up for our final speaker today we have Sawyer Hut one of figma’s software Engineers here to walk us through Dev mode plugins so everyone please welcome Sawyer hello everyone thank you for joining me closing out.
Config last day you got Brian chesky today you got me on the main stage but I’m so glad to be talking to you about customizing your team’s workflows with Dev mode plugins if you saw the previous session right before you may have seen all the amazing things you can do in Dev mode Jake showed you.
How to make plugins or well what plugins for devmode are and I’m here to show you how do you actually make these plugins for Dev mode um and it’s going to be pretty radical um yeah sweet um wait do it quicker thank you.
So I’m going to set the stage a bit first if you didn’t see that pass talk let me just go over Dev mode really briefly Dev mode of course Chris said it much better than I did it’s a place for developers in figma we have things like improved code generation we have things like improved inspection there’s a vs.
Code plugin devote has so many amazing things that you can plug directly into right into a developer’s workflow and there’s just it’s awesome like as a developer this is what I’ve wanted for so long in figma yeah Round of Applause for Dev mode uh yeah and I’m gonna say like the team.
Team’s incredible they’ve been working on it for so long and it’s just amazing to see this thing out there one of the things we had to like think about with Dev mode right is like you really have to go down and think about what is the workflow of a developer I know they touched on this a little bit in the session before but let me kind of.
Take you through this thought process what is the workflow of a developer and thinking of your normal developer right you may be thinking about someone dark room screens in front of them they’re probably at a computer but that’s maybe the only thing you can like say that all developers have in common right what.
Platform are they implementing code for right mobile web Vision Pro if you work at Apple hit me up I want that dev kit right you can be really using a figment design to implement a lot of different things next these each have a different set of languages right JavaScript typescript Swift kotlin.
Someone’s out there writing code enclosure think about that for a sec right yeah I know shout out to closure um your different programming editors as well all depends on the platform then think about all the different tools that exist.
There’s so many different ways that developers figure out what they’re actually building are they using slack teams they’re probably getting a design from figma if they’re in this conference most likely but then our little developer in front of a screen somewhere is surrounded by us like a sea of possible workflows and you know when.
We’re making Dev mode you realize that there isn’t a single developer workflow and we have to figure out how to make Dev mode flexible and how do we make Dev mode flexible and I 100 spoiled this in the title of my talk but it is via my good friend plugins um show hands who here has written a.
Figma plug-in before oh we got some figma plug-in people out there love the community you are what makes figma great thank you so much uh so plugins my tldr is that they’re basically little programs that run inside figma they’re written in JavaScript HTML.
Plain web Technologies and they’re kind of like any other web app except they can freely read from the figma document so you can figure out what current nodes are selected what layers exist Etc and really use that to augment your program so I’m going to say there’s going to be.
A little bit of code in this talk maybe a lot of bit of code I’m going to really walk you through how we would make a plug-in from scratch but this is our first little teaser let’s start off with a small figma plugin four lines of JavaScript I know it’s it’s humble but it does so much and if you’ve written some JavaScript before.
This doesn’t look too different than something you may be familiar with uh figma.current page the core of the figma plugin is this is going to get meta there’s an object called figma and this is a lot like window that would exist inside of a web browser you can access most of the API by using the stigma object.
So in this case I’m grabbing the current page so the page of the user is on I’m getting the selection and I’m just for looping over the nodes that a user has currently selected and for terminology sake a node in figma is what we would call a layer in the layers panel we try to align it kind of with how you describe it in a document.
An HTML document so I’m using a normal JavaScript 4 of Loop and I’m just console logging the area of each node so the one thing to get away from this is that plugins are just JavaScript and if you know some JavaScript you can probably start running a plugin so.
Plugins 101 that’s our first step let’s talk about plugins for Dev mode the big thing if you’ve written a plugin before for my fellow plug-in developers out there viewers can now run plugins for the first time previously before this point the only person like the only people who could run plugins had to be editors on a file.
They’d have full edit access and they had to have an editor c as a result but now developers can run plugins without having to actually worry about them modifying the whole document and messing it up for you you know and this means that we can really reach a brand new audience with plugins you can put these plugins directly in.
The dev handoff workflow and I think Jake showed some of these off in the last talk how you can actually augment the code that we generate which is like so powerful and you can really like help your developers out by doing this um so the other thing I want to point out is if you’ve seen a plug-in before.
Like a figment design plug-in they kind of live in these like floating modals if you’ve seen them if you’ve run a plug-in before you may have seen this these floating modals and they’re great but they feel a little detached from the actual you know editor they don’t feel like first party with Dev mode plugins we wanted them to feel way more.
Integrated into the actual experience and we’ve done this by actually letting them either as Jake showed off integrate directly in the code panel or they can actually take over that entire right hand panel with an iframe and then the final thing that’s new with devender plugins we have a if we have a whole host of new apis that will let you.
Build new features basically on top of the things that we’ve built and so you don’t have to start from zero when you’re doing things like generating code we have some things to help you get along your way and not have to re-implement everything we did from scratch.
Now I’m going to go ahead die actually show you a few Dev mode plugins in action this one it’s been shown off a lot but I worked on this so it’s near and dear to my heart this is the jira plugin and you can have a design selected select an issue link it view all the details about this jira.
Issue and other developers who go in here or designers can look and see what issues are attached to designs and conceptually this is a great use case for bringing external data from figma or outside of figma into figma so developers have all the contacts that they need next one this is from this is my.
Favorite plugin it’s anima we partnered with them and they built this amazing plugin and it will do full code generation right from Dev mode so you see I press this button down here it’s doing some work it’s taking its time and it’s going to open up a code sandbox within the entire basically almost like react site we see it’s rendered in HTML.
Over here it’s broken up into different components like that are super easy to read and you can actually see how you could actually slot this into like an actual app like they did such a good job this is like mind-blowing to me that like we actually have this capability in Sigma my Coker row hit made this next one it’s.
Maybe a little funkier sort of use case what if you could just talk to chat GPT right inside of Dev mode right you know maybe a little far-fetched but what if you could use the new open AI function function calling API and have it actually read about the current document you could really kind of make something really.
Powerful here so I’ve given you a few examples of plugins now is the Hands-On portion of this talk where I am actually going to go ahead and write a few plugins for you live unscripted I want you to see well it’s scripted um.
Uh I’m going to show you actually how we may do this sweet and we are cut into figma now so here’s figma you may have seen it before looks normal and I’ve been tasked I’ve been given this beautiful design truly best login page I’ve ever seen in my life never seen just the designers know.
Exactly what they’re doing and I need to go ahead and pop into Dev mode you’ve probably seen it we have this beautiful toggle up here on the upper right hand corner I click it everything turns green immaculate and let me give you a quick tour of Dev mode.
Before I get into the plugins I can go ahead go over here let’s click on this button for example and you’ll see we have this revamped inspect panel on the right hand side we can see things like component properties what their current values are we can see links to external resources we have some generated CSS over here.
We have things like color tokens extracted pretty nice I’ll give you also where where do these plugins live you saw some videos of them they live over here in this turn my brightness they live over here in this plugins tab which is now front and center in Dev mode.
I click this we can run that jira plugin I showed off earlier it’s from the published version and I can go ahead create an issue you know jira stuff but another thing I don’t know if this was highlighted earlier we actually have a new feature which is pinning plugins I.
Can actually go over here and save a plugin that I like and make it really easy to access later on so I mean these are already pinned letting go over here and it’s right up here click on it super sweet shortcut to get easy access to plugins and if I did want to pin a plugin I can go here on this more.
Options and rather than unpinning it you would pin it but it’s already pinned so pretty awesome okay design time I need to implement this design I need to use my code error I gotta make this beautiful modal login page modal whatever it is and going back over here one of the things that I love about Dev mode is I.
Have access to these developer resources these are links to things that will help me implement this design all right go ahead click on this and you’ll see I actually have the component documentation for this button I’m using shocker UI in this case and it has everything I need to get started I can import the button.
An example of using the button interactive example pretty nice but it would be much better if I could just view this documentation in line what I’m kind of thinking about this is meta you should try working at figma because you have to look at figma and sigma all the time but.
This this right hand panel I would love if I could just view the documentation right there without having to pop it open look at a different window it would just be so great right over there so I think this is a good idea of what to build for our first Dev mode plugin.
I’m going to go ahead and hop into that right now to create a Dev mode plugin right click anywhere on the canvas go to plugins development and you press a new plugin we’ll take you to this great wizard they’ll they’ll ask you what you want to make.
In this case I want to make an inspect plug-in those are those plugins that live over on the right hand side and I can go ahead and name this what I want in this case let’s call it DOC viewer and I can save it and it’ll show up in figma you may have seen the plugins tab.
I’ve already set this up so I’m not going to save it but we can just go over the plugin Tab and this is essentially what you’ll start out with go over to plugins I’ll go to Doc View and run it and it may be a little small but you see we have a beautiful hello world right there.
It’s small but it’s going to get a lot better in a second so why don’t we go ahead and dive into the code for this plugin one line I love it my favorite kind of programs um the only thing we’re doing is we’re calling this method figma.show UI and giving it hello world.
Frequent.show UI is in a way the heartbeat of a plugin it will let you pass some HTML and it Yeats it over in that right hand corner so any HTML you want it’ll show up there so that hello world is a little tiny let’s make it a bit bigger.
I’m gonna go in and let’s make it an H1 tag and so this is just an htl string I’ll save it I’ll go over and it’s a lot bigger now there’s something really subtle I just showed off here and if you’ve written a plugin before this is like brand new and one of my.
Favorite features we’ve added plugins hot reload by default now so previously yeah shout out to that the plugin developers are in like immense pan they’re like why’d it take you so long to do this um but I’m glad that we finally have this so I can quickly iterate on my plugin and see it update right in the.
Right hand panel okay we have a big Hello World we’re taking baby steps but let’s work up to something better how do we get that Dev resource in our in our code right now we’re just putting some a string up there I would love to put that link over on the sidebar.
This is one of my favorite things about the plugin API I’ve said this a few times it’s just JavaScript and what I can do is open up plugins so in I’m in the desktop app by the way I can open up the Chrome Dev console right from the desktop app so go to plugins development open console.
And you will see we have a full developer console hopefully people can see that and let’s go back over to my button which I have selected I think it’s actually already selected let’s check it is and I can just start playing with the.
Figma API right from here so again there’s that figma global object when you type in figma dot current page and you’ll see I logged some information about the page let me make this a little bit bigger I get the current page that I’m on and I can go ahead and get the selection.
From this too and you’ll see I have an instance selected I can open this up and look at all the properties of this button that I have selected this is a great way to play with the plugin API and really try to feel out what you want to do.
And there’s a lot of properties here another shout out go to figfund.com developers we have all sorts of documentation that actually tells you what all these things do but it’s developer resource right and I can go back figma.currentpage.selection.
Let’s go ahead and get the first element out this is an array of things you have selected and I’ll go ahead and call git Dev resources async and I can await this any of our methods to end in async return a promise and so let’s go ahead and press enter.
I get an array back we can pop this open right in the console look at this object that’s returned and see that we have that URL for that button documentation right here pretty nice I can go ahead let’s go ahead and copy this directly copied and we just Chuck this back in.
Our editor um let’s make a method that’s actually going to put this link over in the sidebar let me make async function copilot’s like it’s rare Indigo it’s ready to fill this out for me uh render link and let’s go ahead and have it what does.
It not like well interesting we’ll have it render this link and now we can actually get this resource out go ahead let’s save it so we should be getting well I guess we’re getting multiple links.
So let’s grab those and I think from these links if we have a link that we got let’s go ahead and if we have links let’s put them in the sidebar and let’s make sure that we have a link here let’s go ahead and we want to do figma dot show UI and.
Let’s put that first link in there so it’s gonna be links zero dot URL so we’re just getting that first element and we gotta call our render link function save we have a link long journey just to get a link over there.
thank you for applauding I don’t know if it’s worth it but uh we’re getting somewhere okay next we have a link one issue if I click on this input it still says I’m looking at a button so our code’s not that great yet uh but.
Luckily figma has event handlers and if you’ve written some htl before you may be familiar you’re going to say things like button dot on click document.onmous move Etc figma lets us do this as well so I can go over here and say figma dot on selection change.
And let’s just render our link whenever the selection changes Ranger link and we’ll save it now we go back well hot reloading is here so we see that’s the input link now it will see right here we have input but if I click over to button we got the button link okay we’re getting closer.
So Yer you’re asking yourself you just spent 10 minutes showing me how to put a link in the right hand panel this is not exciting content well I did say that you can put any HTML you want over there and we’re pretty close you know we have the.
Right information we just need to put that documentation over there and sigma show UI can take any HTML including script tags so I can just go in here let me cut this out and why don’t we just write some JavaScript in our iframe let’s do it and we’ll do.
It knows co-pilot is like reading my mind my mind I can just change the location of that window over there so I’m going to do window.location.href and do exactly what it said um more or less that’s uh well we have to get the URL yeah let’s close it close out the tag save.
And now oh we crashed our plugin hold on oh wait look at that okay let’s close our script tag save it now we go ahead and run it waiting is the internet down wait hold on I’m gonna I’m gonna cheat we’re so close I actually have it.
Finished let’s copy this uh we were one line away let’s paste let’s save it are we working oh look at that wow it’s magic okay yeah.
Sorry the build up wasn’t as great manipulating raw HTML let me tell you a little hard on stage um but well check this out we have the documentation on how to use this button I can interact with the actual code version of it.
I can go over here click on this input element dude play with the actual input element we built something that’s actually pretty powerful and pretty useful in only a few lines of code and honestly this is like such an incredible thing to use the plug-in API.
For if I am building something with a pre-configured UI Library like this or an internal design system and granted would you ship these few lines of code exactly as is maybe not there’s maybe a few things to watch out for here um one our loading State literally just.
Says hello world so we could do better and second we don’t really have um your the website you’re hitting has to have the right headers in it to be embedded in an iframe but this is the start of something great and hopefully you’ll be inspired to how you can integrate third-party tools um inside.
Um Dev mode so yeah okay that was the more basic example I’m excited to kick it up a notch and maybe show how we can actually build code generation plugins um so let’s go back over to figma I can go ahead right click let’s actually close this out.
I can go ahead right click plugins development and new plugin and create a code generator this is a plugin for Cogen and what this will let you do is add brand new languages into Dev mode so you can I don’t know have it render closure or whatever language you would like.
Um and let’s build one of these right now so let me go over to my next example it’s right next it’s just a different modal um and let’s say that I’m here but I really like this built-in CSS that we generate inside Dev mode but I would really like it if this gave.
Me react code right like maybe that’s what I want to use I’m doing a brand new static site and I would love to just have some react copy it paste it right I think it would be a great starting point so you showed I showed how I could make one of these Cogen languages let’s go ahead and run it and go to CSS so basically this is the.
Language toggle I go to development and I have my react uh plug-in that I hypothetically created I can click it this is not react it’s a Json object that just prints the name of what you have clicked in this case I have the confirm modal clicked are selected rather.
But let’s take a dive into the code and see what this is doing so I’m gonna get rid of this this other example it served us so well and we have a few more lines of code it’s a lot more than our one one line that we started with let’s make it I’m going to blow it up again but all the same principles apply in.
This case we have this figma.cogen.on generate um event handler and figma’s going to call this anytime it decides that it needs to show new code in that right hand panel so if the user selects a new node for example or something changes on it we’ll go ahead.
And call this function and right now we’re just returning a JavaScript object as a name and we’re just putting the name of that node on here and we returned some metadata about the code What’s the title of that section so here it says Cogen plugin.
The code itself and what language we should syntax highlighted as right now it’s just plain text so we want to make a react plug-in so let’s name it as such uh well first let’s make this JavaScript JavaScript JavaScript and we will name this react.
Save it hot reloading has us again it’s got our backs that says react and this has some subtle syntax highlighting but this is still just a Json object how do we get this to actually rendering out like code like react code well if you don’t know react I’ll give.
You the quickest the quickest react primer ever I have a code sandbox open I have again best react component I’ve ever seen red rectangle it’s big it’s beautiful um all this is doing is we have a function called my component it returns a div and it has some style properties.
On here that make it red starting point for our code generation plugin so I’m just going to copy this copy it wholesale and let’s paste in our plugin so let’s say goodbye to the old code paste this in radical I’m going to outdent this.
We’ll go ahead and save it check it out we’ve got react code is yeah it it is the wrong react code but it is technically react code so we can end the talk here we go we’ve written a react plug-in congrats everyone no um we’re going to make this work we’re gonna make this look good.
Um and you saw earlier I opened up a node and I looked at all the properties and there’s a lot of properties so you may be asking yourself Sawyer Sawyer are you going to map every single property in the next 15 minutes so that I get a beautiful react output no I’m not I’m not I’m a sane person.
I’m I thought that the people out there writing plugins wouldn’t want to do that either and we actually let you leverage Dev modes built in CSS generation in your own plugins you can use this as a starting point to get you going and we actually have a method for this that’s on all nodes it’s called get CSS async we can just call this and.
Well render some CSS so let’s Dive In I think I’m going to grab the style so style equals oh wait figma or its event dot node.get CSS async we need to make this an asynx method we’re calling away and I’m just going to go ahead and stringify this.
And this so what is this going to return it’s probably a good question it it returns a JavaScript object that’s key value pairs of CSS property to CSS value it will actually map up perfectly with the key values that we have over here in the the default CSS generation so.
Let’s go over back to react and let’s put this in here put that style in I’m gonna go ahead let’s save it whoa okay we actually have things that look like it could be right in here moment of truth let’s copy it.
Save it oh wait I have the whole wait hold on let me copy the inner thing we don’t need the background copy this mode of Truth paste it save it oh look at that oh yeah we have a rectangle pretty great ah but what it what is front-end engineering if not drawing rectangles so that’s great am I right.
Um this is pretty good one thing it’s good but it’s not perfect one thing I want to show is over here look at this horizontal scroll I’m unhappy about this imagine like you’re like oh yeah devote plug-in so great let me oh wait I have to scroll.
Horizontally for like three minutes no thank you well I’m using this as a shoehorned example but one thing that we added recently in the past few months is that plugins can actually call the JavaScript fetch API directly I know this seems like you should have had this again for so long we finally let you do this so you can call apis.
Right in your code gen Plugin or any any plugin now um so I’m going to use this as an example let’s pretend we have a hypothetical API called I don’t know format.com format let’s go ahead send this code up there and format it for us.
I’m going to import a little snippet that does this for us so I don’t have to manually write it and all this is doing is using the JavaScript fetch API hitting the server and formatting this code let’s rename this raw code and let’s pull out the code yep copilot.
Knows exactly what I want we’ll save it and we have format code granted yeah I didn’t show you how all it does is called prettier it’s not that fancy um but you could imagine how in other code gen plugins and I think this was.
Touched on the last session you can use this to pull in data’s of data about your component library and use it to actually like map the props one to one it you could get do some pretty powerful stuff with it um so it’s pretty exciting okay the code looks pretty but we are still.
Only drawing a rectangle I want to be able to draw this entire modal um how am I going to go about doing this well one thing is we may have let me pop over from the dev console again we’ll go to plugins development open console we have all sorts of Errors that’s great.
Um we can sort of look at the selection and kind of like we would you know look at what properties are here anything with children has a children property we’ll do that press enter this modal has that close button a header a body you know more Auto layouts Etc.
And the way I like to think about a sigma document is it’s a tree it’s a lot like it’s a lot like an htl document maybe it’s the like key thing about this is figma it’s kind of like HTML right similar structures how you think about the plugin API and I can kind of maybe step through.
Each of these one by one and convert them into the equivalent react code and this is this probably was not on your config Bingo but you’re going to watch someone write recursive code on stage it’ll only be like four lines of code trust me it’ll be pretty simple but I think we can kind of go through this maybe build the tree of.
HTML and have it render over here so we can render a full big react component that will render exactly what we want so let’s do it first thing right now I’m just taking the only thing I’ve selected we wanted to break this down so I can do one note at a time rather than just the thing that’s selected.
So I think we make a new component let me go ahead and let’s call it async function maybe like make div seems pretty good and we’ll have this return a promise string so it’s going to return the code for a given node and let’s have this take in a node too node.
Um right and I think what we want to put in here is let’s see if copilot has me no it’s failed me this time uh we kind of want to take the style and just put this div in so let’s go ahead and do this that is not zoomed up let’s do that we’re gonna get our style out take the node.
And we just want to now cobot has my back return just that div right so we’re making a single div at a time let’s go up we’ll go here let’s update this to call our await make div function and I’m gonna get rid of this style we’re not using anymore let’s save make sure things are working.
Fingers crossed wow it looks the exact same great refactoring code Sweet Nothing broke though so there’s one person clapping yeah yeah oh yeah it was not clap worthy um but thank you uh okay now let’s handle this children shall we.
So I think we can just check does the node we’re on have children we can say if children and node we now want to go over each of the children and make a diff from it so no copilot’s wrong let’s say divs equals cope I was right okay.
Um we want to go oh I know we’re doing async recursion here it’s there’s a little bit happening but I’m going each over each of the child calling make div on it and then waiting for them all to finish and then copilots do good I’m wrapping them in the div of the parent and just shoving.
All those divs in the last thing I want to do is I need to handle text and make sure text rinser renders properly I can go in and say if character is known so if there’s characters that means that’s text I need to render and.
We’re doing something again we are going to put just put the text inside the div and render it out let’s save it oh my God that’s a lot more code it looks like we’re generating a lot of HTML now um why don’t we copy this and see if it.
Looks right we’ll go in command a command V sit oh yeah awesome yeah uh granted actually Revel in that for a moment that was actually incredible uh the the fact that like I was able to put together in a few minutes this thing that gives me.
Like a pretty good looking modal it’s pretty great granted again each this code production ready debatable um everything is a div which is generally not good um this is not accessible at all these are not buttons um there’s no x button up here right.
Um I’m not handling icons but hopefully this gave you an example of well a starting point you can imagine how you could take this and use this well like I said earlier reading data about things that are in your external design system and actually pulling them into co-generation.
You can already see that Dev mode has this map well has mapping of what different properties are set you could map this to your actual code um and make something really powerful and really make it so you’re making so Engineers are using the things that are already built in our code base and it’s pretty exciting if you ask me.
Yeah um with that I’m gonna go back and maybe talk over some of the key takeaways that we had from this oh sweet fade in so my number one thing is that if you know some JavaScript you can probably make a figma plugin we don’t it’s a lot.
Building on top of foundational web apis and we just add a little bit of that figma flare in my other thing I want to go to is that you can now write plugins that viewers can use you have to opt into having a Dev mode plugin but once you do you have a brand new audience that you can have plug-in developers like tie into which.
Is pretty great um the final thing you can really make these plugins work with external tools and you can even make brand new languages that your developers can uh well brand new language is to Dev mode and for example have a vue.js renderer that works with Tailwind or any weird combination you want there’s nothing.
Stopping you which is pretty nice um thank you so much my name is Sawyer Hood if you are frothing at the mouth right now you want to make a plug-in you’re so excited go to feeling.com developers we have you covered um so much documentation on how to get started and you can go look up the friends of figma.
Discord if you want to talk to someone and have us walk you through making a plugin um yes thank you very much and thanks for spending time with me with all of us at config um yeah and I hope you had a great great time awesome.
Speaker: Sawyer Hood – Software Engineer, Figma Join us for an in-depth session into Plugins for Dev Mode and learn how you …
Figma Official Channel,customize,your,workflows,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, audience:developer, language:english, format:standard, produced_by:other, theme:development, event:config, series:other, type:workflow_tutorial, level:none, primary_feature:dev_mode, secondary_feature:, secondary_feature:plugins, product:figma_design,