Generate Figma UI kits from code

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everyone. And, welcome back to Learn With Jason. It has been� it's been a minute. So, I've been out at events. I have been missing this stream terribly. I'm very excited to see all of you back. So, today, we're going to be talking to Tha�s Santos.

THA�S SANTOS: It's been awesome the past few days. There is some sun behind me.
JASON LENGSTORF: How often do� I'm in the Pacific Northwest, where sunshine� that's a very rare bonus. [Laughter]. I'm feeling pretty happy about some sunshine here.

THA�S SANTOS: I'm in the Netherlands so we are known for having rainy weather. We get happier this time of year, for sure. [Laug hter]. JASON LENGSTORF: Excellent. Excellent. Okay. So, I am superexcited to have you on the show. We are potentially dealing with a Figma outage at this exact moment so we're going to keep our fingers crossed and see how it goes. If the outage gets to be too past, we may have to reschedule.
Tha�s, do you want to give us a little bit of a background on yourself?

THA�S SANTOS: For sure. So, I'm original from Brazil. I've been dedicated to design systems for the past, more or less, four years and it's been an interesting [audio cutting out] path I've been taking. I got lucky to be hired in a design system team, which made me fall in love with this topic and ever since, I've been developing in it and increasing my knowledge, even hosting events around it. And now working with [Indiscernible] actually building products dedicated to help people with design system and help design system teams so I can really relate to all the struggles that our team went through in the beginning and now all the things that we're trying to make to help other teams out th ere.
JASON LENGSTORF: Uhhuh. Yeah. I mean, this space seems to be just growing, like, wildfire. We've got so many, just, you know, incredible tools, from, you know, the devfocused tools, like Storybook, to designfocused tools. We've seen an absolute explosion in tools and build stuff in Figma and the stuff y'all are doing with Backlight and we're going to talk, today, about another one that I think is so freakin' cool.
Why do you think design systems have seen such rapid growth in the last five years or so?

THA�S SANTOS: Before I started working with design systems or even talking about it, I think it was intuitive for me to think about this reusability and repetition. I used to do web design work, working with WordPress, and I've come across having to repeat pages and restyle those little buttons because there wasn't such a concept of design system, or were, but not that known to everybody.
Eventually, I think we all come to the same struggle. So, designers come to the struggle with having to repeat their work and wanting to facilitate that process. Developers come with the same conclusion, like, I'm having to code this open bracket, closed bracket, this is a button. And the most copy and paste you do, the more errors, eventually, down the line you end up getting or consistent designs in a web page or an app and so I think so for the past five years, everybody's just coming more and more to the conclusion that we shouldn't be repeating ourselves. We should unify these concepts and have an easy way to access them.
And of course, the tools, then, help shape us around that. So, for designers, we remember back in the days, making a design of a web page in Photo Shot and Sketch pops up, which brings in this different concept of UI design and, yeah, like, drawing the things in the page, making it much easier, how you layer it. And eventually Figma� [Laughter]. � knocks in the door, kicks everybody out of the market. [Laughter]. Bringing this idea that not only it's easy to make these little rectangles and to order them properly them, now you can reuse them in a library that other people can access, so, if I were to answer, like, why is design system growing like that, from my personnel experience, it kind of feels natural that anybody working with UI design or development of UI just feels this need to have one source, one place to call for and, yeah, make use of those eleme nts.
JASON LENGSTORF: Gotcha, yeah. And, you know, my� my experience with design systems is all indirect. I've never worked on a design system team. I've only worked on teams that work with design systems and so my� my observation is, uh, I feel like in, you know, 20092010� I can't remember exactly when it came out, but Twitter really bootstrapped. Bootstrap was, like, the only real design system that was out there, it was readymade, component UI kit, you could just pull it in and use it and everybody did. We saw the whole web got bootstrapified and it led to general backlash of people saying, oh, don't use bootstrap.
At the time, I was working with a lot of agency work and working in smaller teams and don't have budgets, building your own design system is prohibitively expensive so IBM had a design system, we saw, you know, these bigger companies with lots of budgets would dedicate full teams to design systems and then you'd see leaders, like Gina, in the community, does a ton of work on design systems and superfriendly. That was specialized help. You could hire them to come and help you.
But for somebody who's running a team of six and doesn't have huge budgets, you can't build a design system inhouse. There was bootstrap and then material design and a few other options out there. Ultimately, you get stuck with, okay, I can use the premade thing and I'll be able to customize it a bit, but it'll mostly look like everybody else's or I can roll inhouse. That's a very desirable thing. You don't want to have to handcode all these pieces. As these tools have started to emerge, where we've seen Figma's here with reusable components and people love Tailwind because you can customize. You've got these tools for assembling and managing and exploring your design systems, like Storybook and Backlight.
You end up with this� this kind of rich ecosystem, where suddenly, all of these things that were only accessible to companies that could do bespoke design system teams, now you can do it with, like, a single designer/developer who can use all these tools to build all this stuff out and that is really exciting to me and I feel like that's a little bit of a chicken and a egg problem. I don't know if the tools happened because of the interest and design systems. Either way, I'm happy it's happening because less and less of the things that we see on the internet look cookiecutter.
So, yeah, so, Backlight, I know, is not what we're talking about today, but is that� are you working on Backlight, specifically? I know you're at [Indiscernible].

THA�S SANTOS: We have Backlight as our main project, which is a platform for building, maintaining, documenting pretty much everything around design system and the way I like to describe Backlight, from my designer language, it's like the Figma, but for developers because it's this collaborative platform, where everybody gets to use the same thing. There is the design integration so as a designer, I can now participate with my developer colleagues in embedding my designs in that platform that they are using and I get to access their platform to see what they're developing and compare it with my designs, in Figma, for example.
So, it's� yeah. Allinone product to help design system teams, like the one that you mentioned, you know, small teams without much resources, to just quickly put together� no pun intended� but to bootstrap your design system in a way that� yeah. The investment� and I can relate, like, why companies before wouldn't put so much money, because the design system is not just the creation of the component library. Maybe you could have one developer to put� even base it on NG Bootstrap and set a component library or you have one designer to set up a sketch library and distribute to the others, product designers.
But the thing is, design systems is everything of that and much more. You now have to document all those patterns. You now have to actually advocate about it and you have to teach people and make changes and the cost of maintaining a design system tends to scare these companies a lot.
But, now that we are making platforms and systems for these systems, I think the maintenance cost and the process of documenting everything is becoming much cheaper because products like Backlight will help you actually just put that together much quicker than what it used to be. Like, there is one, specific situation I remember, in the previous team where [audio cutting out] developed components, like in Angular. And I needed to see if the end result looked as it was intended or if it matched what I had in my sketch, right, because in the end, the product design teams will end up making a beautiful product because that button isn't correct or that input doesn't look exactly right so I wanted to see how the developed component looked like and I had to run, like, the entire library in my computer so I had to learn how to, you know, speed up the service. I don't even remember all the details. So many terminal windows open, NPM, start this, NPM start that.
That was until we managed to publish it somewhere. We made a website. We published that as a form of documentation. But, still, like, making the updates to the publishing of this documentation, it was a process, in itself, it took time. So now the code of the components are going much quicker ahead. The document� documentation website was far behind because we didn't update it constantly. There was no automated way to do so, the designs and sketch were out of sync because the designer continued with other work. So, everything suddenly comes out of sync, hence, trying to make� or making a platform, like Backlight, to have all that happening, life and without much delay in between, like, publishing and updating and everything connected with all the references in one location, I think is what is bringing a new light, a new future for� for design systems, in general. And, especially making it accessible to smaller teams, as w ell.
JASON LENGSTORF: Yeah. Yeah. For sure. I think that accessibility for small teams is such an important thing because I feel like a lot of the tools that we build, they get framed as, this will make it more accessible to small teams, but it has the benefit of making it accessible between the subteams in the large companies that otherwise would have to ask the Core team, hey, I need you to fix this thing and they say, we've got 150 tasks on our list. We can do it for six weeks and they're like, I guess we'll roll our own and things get out of sync and broken. Yeah, I love this idea of shrinking the complexity of working on a design system and something that I think is really interesting about what you all are doing, Backlight, it's codefocused. You start with code and it kind of moves forward. But then there's another tool you're working on, story.to.design, which is going the other direction. It works in Figma and it's sort of based on this idea of, like, the designers need access to these design systems, too, and shouldn't necessarily have to meticulously update this whole design systems that's really not the final form of the code. Like, so, this is actually something that I talked to Dan Mall about. Let me actually pull up the episode, because this was a good episode. Dan Mall came on the show and we talked about design systems and when he was talking about, he was talking about design as being, like, it's an incidental piece, the final product is what ships to the user, it's the code that's in the browser so the designs we make, they're transitive. He called them "trash" and I thought that was so funny, coming from somebody who is a designer by trade. The thing we need is the final product here.
And, this idea that, like, if we� if we get too precious about the way that our designs work in Figma, then we're creating ceremony and we're creating complexity and blockers when what we're really trying to do is quickly get from "I need to make a thing. I have a task to build this UI. I need the design to work and I need the code to make the page look like this design." And ultimately, the product, like, what we're shipping is the final piece. So, I need to shortcut every single piece, as much as I can, so that the design does not block shipping the code and so the code doesn't break the design. This is what I think is kind of interesting about the space you're in and similar to tools, like Backlight. Maybe we can create one, universal language, where all the pieces are hooked to a source of truth and the source of truth is code.

THA�S SANTOS: I completely agree. In the end, I think we'll continue with this reality where you have people dedicated to code and people dedicated to design. We have unicorns, a developer that is good in UX/UI or a designer who knows how to code. If you do let the disciplines focus on what they are good at, then you have really good designers and really good developers. Not to say that the unicorns are not good, I try to be one, myself. But then it's the tools that help those two worlds together. Trying to generate code from design, that is just not happening. It hasn't happened up until now. You probably remember Dreamweaver and some other interesting examples. That is because, of course, when you have a very good designer, putting time and effort and making that perfect UX and UI, you want to make the most of that so you just want to be able to extract without, like, double the time to make that into code by hand.
But the problem is, there's a lot of things that the softwares that try to bring designtocode that they end up missing out on. For example, it's very hard to generate a specific� the details on the code for accessibility. Right. When you extract that beautiful landing page that you designed, and the navigation menu, for example, it would be very hard for you, in the design, to highlight, hey, this is a nav item that should be read like this, by the browser reader and so on, so forth. So, I think when you try to export from design, when you try to generate some code from it, it can be useful when it's a very quick and dirty thing. You're just creating a landing page that is very simple content, you're going to throw it away very soon anyway, so, great. You don't rely on accessibility or you don't depend on that page being, like, scoring well on SEO. All these details, it doesn't mean anything to you, so, go ahead and try to generate code from design. At least it gives you something.
Or if you need a high fidelity prototype, it's very useful in a UX workflow when you're doing usability tests and you don't have the development time in your company or you're in a hurry to get that in the hands of users. A high fidelity prototype is great and the ones that get exported from Figma to React very quickly, amazing. But that would never be your end product. You probably cannot use that in your final, developed code, ri ght?
JASON LENGSTORF: Yeah. This is definitely� folks in the chat are kind of talking about different things. Tailwind is giving people the ability to learn more about design if you're not a designer and people are talking about Dreamweaver. Ultimately, what I've found very fascinating, especially with modern web development, it's not as siloed as it was before where you have a designer and then you have a developer and they have no overlap. Because I remember when I first started, where, you know, a design was, like, the thing that you cut up into slices and then you stuck those into a table so that they looked the way that they were in your design doc. And there� you know, there was no real, like, design, you weren't using your eyeballs. Okay, I'll slice it into this grid and stick that in into a table and border collapse. Great, now it looks like the design.
Today, even if you have a design system, you're still thinking about, okay, I need to assemble these pieces and these components are going to sit next to each other and we've got lots of guidelines. But designers have to think about what this looks like in code. I can't� I can't put 19 Blend modes on because while that might work in browsers today, because of modern browser support, there are limitations. I was trying to do something the other day [audio cutting out] and then a dropshadow on it. Dropshadows behind Blend modes get weird. Designers have to be aware of these things and developers need to be thinking about the design, as well. Because you don't get handed a slice of thing, you get handed� a lot of times, a partial. I want a header to look like this and use our components to build out the main content body or, you know, here's the new component and we use our existing components to build out the rest of the design and now you've got to think about that, as a developer, how to assemble these pieces. As we see� it's no longer like a Venn diagram, we're seeing a lot of overlap between design and development. I love that. I like doing a little bit of design, a little bit of development. It makes me feel like I'm improving to learn those things. I know a lot of people feel like they're firmly in one camp or the other. I love in the chat, you're learning through certain types of code. That's superexciting to me. It feels like we're all leveling up as a result of this.

THA�S SANTOS: Yeah. Exactly. To have these other libraries and being presented to the designers, the guys are mentioning Tailwind, it definitely brings up the knowledge to the world of designers, as well. Tailwind, a heavilydeveloperoriented library. Many are using it as an inspiration or their base, their fundamentals for setting up their own thinking or the brand guidelines around it, the similar way that Tailwind set up a standard for the rest.
Of course, we have discussions around design tokens, which is growing. Now I would say more than design system, even. Like, it's part of design system but it's becoming universal in itself where you now have to start thinking about how you're going to convert all these design elements into very generic terms that can be translated to any technology and any type of communication. So, design tokens come as an awesome way to move forward, not only blending the designer and developer world, but merging the tools. You can work in React or Figma because it's one, big JSON file. All you need to do, now, is find ways to transform that information so that's really excit ing.
JASON LENGSTORF: It's all one, big JSON file feels like a metaphor. [Laughter]. It's all just one, big JSON file. I love that. But you're absolutely right. And so, okay, so, the challenge that we're up against today is I'm looking at the Figma status page and�

THA�S SANTOS: I'm trying to open a Fig ma� JASON LENGSTORF: It looks like Figma is in the middle of a service disruption. I think we're going to�

THA�S SANTOS: It's something interesting because not every day I'm working with Figma and we are, like, testing this plugin, really forcing Figma to its best and never have we had any troubles and today, when we ha ve� JASON LENGSTORF: This is the law of live demos. If there's something you can do to� to make sure that you're demo doesn't work, the universe is going to line it up for you. [Laughter].

THA�S SANTOS: And I didn't even make screenshots. Maybe we could walk through a presentation, which is not as fun.
JASON LENGSTORF: I want to take us over to pair programming mode and, chat, we're just going to make a besteffort at this. If Figma is not cooperating, we will end early with the discussion and we'll reschedule this and come back on a day that Figma is up and running so that we can do the full walkthrough of how this works. But let's just hop on over to our other view here... camera 2. And now, what I'm going to do is get the inception off the screen. And, so, here� yeah, here's what we're up against right now. Some users are unable to access Figma. So, before we dig deeper here, let's talk a little bit about our captioning and sponsors. We've got Vanessa, here, from White Coat Captioning today, taking down the words. Thanks so much for being here, Vanessa, and making the show more accessible. Let me drop the caption link here. That is made possible through the support of Netlify, Backlight and if you all were watching the New Relic future stack event last month, New Relic is also coming on as a sponsor. We're buttoning up the paperwork and we'll have them up here very, very soon. So, thank you to all of our sponsors to making this show more accessible.
We are talking to Tha�s today. This is Twitter.com, and it's "th4." Here is a link if you want to follow Tha�s on Twitter for more information about all this good stuff.
Should we roll the dice with Figma?

THA�S SANTOS: Let's try. I haven't tried Figma in a browser. I have mine open as an app.
JASON LENGSTORF: Okay. It's letting me in. That's a good sign. Today, we're specifically talking about story.to.design. Right. And, so, if I want to get started� let me drop a link in the chat if they want to follow along. Maybe we can just, really quickly, as I'm looking at the home page here. Let's give a highlevel overview of specifically what story.to.design is doing.

THA�S SANTOS: Sure. So, story.to.design is a team effort, for quite some time, actually. We did see this need to bring code back to design. So, we don't intend to get in the way of that process, which is common in design system teams in which the designer defines how the component looks like so we still think that might be the case sometimes, right. You came across a need of a component, you want to style it. You go ahead. You make the definitions, but then you have to hand that over to your developer and then your developer will code it and that's what we consider the source of truth. Because no matter how much you define the style of the component, you will actually� gets to the product is what ended up being developed. So, with story.to.design plugin, we want to bring that developed back to Figma. And in the future, possibly other applications as well.
So, yeah, that's how it works. Very easy. We're going to install the plugin and link your Storybook stories and generating variants. By bringing it back from code, we in tend to now make this link between code and design so when there's any change in code, your designs can get updated so you can continue working with your library, because basically, the link is th ere.
JASON LENGSTORF: Great. Okay. So, I� I'm logged into Figma here. I just clicked the "install" button so I'm in the Figma plugin directory. I just installed story.to.design. And now�

THA�S SANTOS: We can start a new f ile.
JASON LENGSTORF: A new design file?

THA�S SANTOS: Yeah. Correct. So, in this scenario, let's say you are the designer and your team has already set up a Storybook stories for your component library. So, we already went over that process of maybe the designers define the definitions and then header over, now everything is coded and it's documented and you're probably very familiar with Storybook, ri ght?
JASON LENGSTORF: I'm familiar with Storybook.

THA�S SANTOS: So what is your interpretation of Storyb ook?
JASON LENGSTORF: Once you have built a design system, you can create stories for each component and Storybook will take that component, display it and give you an ability to look at the various variants and modifications you can make. You can mess with the props and that lets you try out a design system component before you put it into your code.

THA�S SANTOS: Yep, yep, that's perfect. Sometimes it's a lot that needs to be done in the background from developers, but it's definitely the standard we're going forward with design system teams, as the place, the resource for everybody to reference and to come try out the components.
So, similar to Storybook, we have Backlight, as you have in one of your streams, with George. Backlight, like what we mentioned before, being the fullon design system platform [audio cutting out] stories. So, the CSF format that Storybook also handles. So, all that very basically is what is needed for the plugin to start making variants from the code. So, in the scenario we're in, you're the developer, let's say you work with Audi, the car brand. They have a design system showcase inside Storybook website. So if you go to Storybook.js, if I'm not mistaken? Y eah.
JASON LENGSTORF: Storybook.

THA�S SANTOS: You go to "showcase." View all Storybooks. The UI React. You can pick up a Storybook link that will work really will with the plugin right now.
JASON LENGSTORF: So now we can look in here. What's a� here's a button.

THA�S SANTOS: That's a radio but ton.
JASON LENGSTORF: Let's look at a button.

THA�S SANTOS: Yes, buttons are the best component examp les.
JASON LENGSTORF: A primary button, a secondary button, a textonly button. We can go to variations and see different sizes, states.

THA�S SANTOS: You can check the check box.
JASON LENGSTORF: Which checkbox?

THA�S SANTOS: On your left menu, you have a check box.
JASON LENGSTORF: Oh, I was looking for a checkbox to click. [Laughter]. Here's this and if we go into "variations," we can see idle, disable, readonly, error, different options and stuff. These are all things I would expect from a design system. This is what people like about Storybook. I can go in and see, very, very quickly, what's available to me. Right. This is what all design system tools will do, is give us one of these. Or at least, that's what they promise to do. We can take a look at what is in the design system. If I want to use this, I can hit "show code," and boom, here we go. There's my checkbox code. I can drop that straight in and it just works. This is very exciting to me because it all makes sense.
Is this one of the ones that lets you edit, too, if you want to play?

THA�S SANTOS: Sometimes I think if you are on the� yeah. Over there, you're in "Controls," on the tab next to "accessibility," that is where you can start playing with some of the things. And once you change that, it should update up there.
Yep.
JASON LENGSTORF: We can start messing with it. If we go look at the code, I think, which I always forget where these buttons are...

THA�S SANTOS: Cool. So, basically, the challenge is, you can imagine yourself as a designer, you have this beautiful library that all the developers have access to, they can copy that little piece of code and start using it straight away, but you want the same thing in Figma so you can start designing it away. What do you do?
JASON LENGSTORF: Uhhhhhh� honestly, I have no idea what I would do. Because this feels, to me, like, this is sort of� I would expect that the designers probably have an identical Figma file that's just got all of these things and then whenever they change it, they have to send it to the developers so the developers can open that up, right?

THA�S SANTOS: Yep. Exactly. What some of the big companies do is provide a company Figma file, for example. That is the case, right. You also have, let's say if your design system is a public one, not only you give away the library, the coded library, but you provide some files, but somebody has to maintain all that and it often comes out of sync or it gets outdated very easily and the challenge here is, as a designer, if I now want to make a design for Audi, I would have to go myself and draw all these squares, type all this typography and go do it by hand. So, luckily, now we have story.to.design, as a savior for our situation. So, we can very easily actually, with the plugin installed, [Indiscernible] stories back to Figma.
So if you go back to your file. JASON LENGSTORF: Back to my file.

THA�S SANTOS: Let's open story.to.design plugin. That's it. So, I just need to get your access token. Just give me one second...I thought I had saved it here. Just to explain a little bit, story.to.design, right now, is in a private beta situation so we have several companies that we are working with, there in our beta program, to finetune the software. And, bitbybit, we're improving it and making it more interests per use case, making sure we cover all the needs of these different companies and, yeah, it's one of the ways to get into the private beta with us is to schedule a demo so you could go to the website and schedule it and see if this is a use case for you and you will get an access token for it.
JASON LENGSTORF: Okay.

THA�S SANTOS: So, give me one second. How can I send you this access to ken?
JASON LENGSTORF: If you use the call we're in right now, there's a chat window.

THA�S SANTOS: Oh, right. With your email Jason@Lengstorf.com, and the access c ode.
JASON LENGSTORF: I'm going to pull this offscreen while I access the token...okay. Now, in my best hacker voice, "I'm in." [Laughter]. Got my� here's my React.UI.audi because it's asking for a Storybook URL.

THA�S SANTOS: Press "enter." Connect. Perfect. So, as you could see in the previous screen, we have support for both Storybook and Backlight. So, Backlight being the other product. And, yeah. Storybook is there. So, now one thing that is nice to see, um, under the components, like, you can expand that, everything that you see here is what you see inside that Storybook link that we were at with A udi.
JASON LENGSTORF: And so I just� if I want to bring something in, I want to bring in this button, I just hit the "play" button.

THA�S SANTOS: Right now, you're in a section called "explore stories." There is a components for generating the useful variants components we're going to use in our final design. Let's create a button that we saw in the Storybook. What we need to do is define the different args that make up that button. So, for those who are familiar with Figma, they know you can create one component with several variants, right. Normally, it's done for the different styles, like the size of the button, the type, like, primary, secondary, typography, or for the different� what else? Like, success, warning. There are many ways to think about a button and how to organize this matrix and what the plugin is going to do for you is actually define all that for the selection we get in the Storybook stories.
So, just before we start selecting everything, because you will see that at the end, the more you select, the more crazy the number you will get. Go to the bottom of this li st... JASON LENGSTORF: I think I froze it. Oh, wait, here we go. We're good. We're good. Let me start unchecking some things.

THA�S SANTOS: You're selecting all of t hem.
JASON LENGSTORF: Holy shhhhh! That's maybe a bit much.

THA�S SANTOS: That's not a very good idea. [Laughter]. Since I've worked with the Audi design system and importing here in Storybook, let me show you why this is a little bit strange. So, go back to this Storybook l ink.
JASON LENGSTORF: Here.

THA�S SANTOS: Yes. And let's go to the button in Properties and you can go in Propert ies.
JASON LENGSTORF: Properties.

THA�S SANTOS: Yes. So, you see those properties are listed on the right, under "Control." These definitions are basically the things the developer can do [audio cutting out] right. So, this is all information� yeah, when you play with it over there, you see what it changes. But if you continue a little bit further down� if I'm not mistaken...duhduhduh. Spacing, this one. I think what they have is sort of a spacing system that they use it in every single component. But when you change it, over here, you will see not much changed in the button itself. Because this is probably as you're implementing the button and you're spacing with all other elements on the page, you're going to use this. You're going to stack it. So, this is more, like, in the works for maybe the layout of the prod uct.
JASON LENGSTORF: Right.

THA�S SANTOS: And it doesn't really impact the component, itself. So, it's an option, here, in Storybook. But for us, in the plugin, it's not really interesting so we're not going to select th ose.
JASON LENGSTORF: I want the size. We've got 24 variants there and I probably want this variant.

THA�S SANTOS: Go up a bit. Let me see which one you selected. We can unselect those and I'll tell you in a little bit. But the hover state, I think, might be interesting. And the focus state, maybe. Let's see...36 varia nts.
JASON LENGSTORF: 36, that seems like a reasonable number.

THA�S SANTOS: Hopefully Figma is still working. So, as the plugin is doing its magic in the background, it actually doesn't stop us from making selections on the following components that we want to import because in the end, our goal is to set up an entire library, not just buttons. So you can click that button again and go on the top. Let's select now the next one. Maybe a badge? Let's make up some badges. Let's select the stories. So, for the badge, the sizing is not interesting, but variant, for sure. And badge is a component that doesn't normally have an interaction so the hover state, focus state, it isn't really interesting. Let's [Indiscernible] and go for the next one. Maybe let's go to� let's make the checkbox. Yep. Select some arguments and go for "check for disabled." For "invalid," I think that's more of a technically one that, visually, really isn't going to show you anything.
This is an interesting part, as a designer and a developer� and I'm going through this plugin, it doesn't mean that I'm not going to talk to the developer, I still need to understand their reasoning and what definitions they defined in a component and is that relevant for my visual design or not. And for the checkbox, it's interesting to see the focus state so I would import th ose.
JASON LENGSTORF: Okay.

THA�S SANTOS: So, as you can see, the buttons are ready. Let's go ahead and create t hem.
JASON LENGSTORF: Wow! Okay. Badge.

THA�S SANTOS: Badge is crea ted.
JASON LENGSTORF: Checkbox.

THA�S SANTOS: You can close the plu gin.
JASON LENGSTORF: I'm going to go out here and look. Based on this� I need to change the background.

THA�S SANTOS: It's over there on your right, on the panel. You have Figma on the Dark M ode.
JASON LENGSTORF: Right. So, we've got� now...each of these� oh, okay. It tells us all of the components, the text, the disabled, whatever, this is all good. I can kind of see, here's my disabled states. This looks like maybe a hover state. This is maybe an active state or focus state. Okay. Come over here. Here are badges.

THA�S SANTOS: Yep. And we have the checkbox, as w ell.
JASON LENGSTORF: That's a missing badge. Okay. And then we have checkboxes, so, this looks like standard. This looks like�

THA�S SANTOS: That's the focus one, proba bly.
JASON LENGSTORF: Focus mode. Disabled. Cool.

THA�S SANTOS: So the way Figma works is these are, like, the raw version of the component, where a design system person or the maintainer of this library will be working around here. But, for the designers, in the rest of the teams, the product designers, what they are really interested in is the assets tab that you have there, on your left panel. So when you go next to Layers, Assets, you open up Components. Hover on the button. You see, there's a description there. This description came from the Storybook. So that's something that the plugin does for us, as well.
Yes. That description. So if the Storybook is set with a description, the plugin will report the visual representation of that button, but also any other relevant information we can make use of in Figma. For documentation purposes, this is great because now you also have no divergent of what is being documented for developers and what is being documented for designers, everybody's talking the same language. So, to use this component, actually, you can just drag it into your empty space. So, this is actually just the component that a designer would go ahead and make their UI. So, you can select your variant, from text, you can select the primary, second ary.
JASON LENGSTORF: Oohhhh! Look at this, y'all. This was already cool because I was like, oh, yeah, I can just grab the one I need. Here, I can just work on� let's disable it. Nope, that's fine. Let's make the medium one. That's good. I want it to be focused. There's my focus outline and it's easier to see with the secondary so if we go here and then we do the focus outline, right, and then we can do "hover" does.

THA�S SANTOS: I think it changes the color a little bit. Just go to the component on the Storybook, itself. You will see it's exactly the same. Don't judge how this focus state or hover state looks like. If you don't think it's great, that was the design system team definition so maybe they need to change it. Not the plugin. [Laughter]. There is one more thing that is really cool about buttons, specifically. So, one of the great features from Figma is that you can build these components in a very usable way. So, before, with Sketch, like, to make a button, you would have to make a text frame or a text item and then put a rectangle around it. But every time that you typed in the� the text, the rectangle would not adapt to that size so if you doubleclick where it is written "button action," and you just change that, you see how the button is, like, growing with it?
JASON LENGSTORF: Yep.

THA�S SANTOS: It's a bit of a normal thing for anybody used to Figma right now. But for those who started with design systems before, the alt layout option, this is kind of option. These buttons are already coming with Alt lay out.
JASON LENGSTORF: Extremely cool. This is kind of what I've always dreamed of when I'm working with these sorts of systems is that, like, you know, I always have these high hopes of creating a design system and then I'll start and then I start designing in the browser with, like, code and then it drifts and I'm like, I'm not going to go back and update all that so this is pretty interesting, that what we're seeing is if I want to build out a quick prototype, you know, I can just grab these� these things and say, like, all right, I'm going to build out a quick thing of saying, like...okay, we've got Option 1, right. And then we've got Option 2. Right. Now I want this one to be check, so I'm going to check a box. This is just extremely cool that we're able to put all of this together so quickly, because it just feels like, you know, if I had to build this form by hand, I'll tell you what would happen is I wouldn't build it. I would� I would, like, procrastinate on this until� basically until my manager was like, actually standing over my shoulder being like, do this. Fine. [Laughter]. Like, you know, or I would do what I used to do at IBM, which would find someone who build almost the same UI and copypaste their code and hope they followed the rules because I'm not going to go check.

THA�S SANTOS: There's another interesting feature of this plugin, which is it's great to import these components, but what if something changes? The change coming from code, I see in the chat, there are questions of [audio cutting out]. You open the file again with the rightclick on the Figma f ile.
JASON LENGSTORF: Sorry, you're going to have to say that one more time.

THA�S SANTOS: Open the plugin. You can do it through the menu or rightclick, actually. There's the three dots over there, exactly. If, let's say, your developer colleague in design system decided� well, the whole team decided that your button are no longer square, they're going to be rounded, they can easily update the code for them. It's usually� often case, some of the style changes for the components is really just one line of code. For designer, you could picture it. It would be, like, 36 little squares you'd have to update, back in the old days. Now with story.to.design, when that happens in the code, we can click "update," and, boom, we'd get that up date. JASON LENGSTORF: When we do that update, because this is set up as a component and because these are built from that component, we'll update all of this, and every usage of it?

THA�S SANTOS: Yep. Corr ect.
JASON LENGSTORF: This might be the first tool that I've seen, that aligns incentives around this because when, like� when I working with other design systems, because there was no automatic update, there was not really a high penalty for just, "I'll make a copy of this and change it to make my design and now it's no longer linked to the component." But nobody cared because there wasn't a central component. With this, now the incentive is don't break the components because you'll use your automatic updates. That's a cool incentive.

THA�S SANTOS: In this button you inserted, that's an instance of "click to boop." In your right panel, there is a radius symbol. Let's say you put 30, whatever value there. So what you're doing is you're just overwriting an instance of a component inside Figma. This component is still somewhat connected to that component above. So that group that we see around the dotted purple square, that's still, like, the same component. But because you overwrote that radius, you lost this connection so whatever happens to the radius, what persists is your overwrite. If you need to overwrite this, in this instance, you probably needed it.
But to your point, on the incentive of not having to overwrite anything, that's exactly right. If designers are making these forced changes in their Figma, that means something needs to change and if it needs to change for them, it probably needs to change for everybody, hence you'd probably do it in the code anyway. We would suggest that in the process of, oh, hey, the designer wants to change something, the component, circle back with the developers. Like, find your process in which how do you make suggestions for changes, how do you experiment with these suggestions and once it's been approved, branched, merged, everything tested, you can receive your update back in your official Figma library, which is this one generated by the plu gin.
JASON LENGSTORF: Uhhuh. So, to say that another way, to make sure that I'm understanding, the recommendation, here, is because the code is the source of truth, changes don't get made in Figma, changes get made in code.

THA�S SANTOS: Corr ect.
JASON LENGSTORF: So if the designer decides we should have a rounded version of the button, where we're going to say, you know, like, okay, we want the border radius to do whatever that is so that we've got a round button. We need to go back to the team and say, all right, we're going to introduce this rounds verse of the button. Here's a mockup of it, what code do we need to add to say, here's a button.

THA�S SANTOS: A variation of your button, if it's something to completely change the style of the button throughout your application, you would force that change and then once you hit the "update," you would inherit that inside Figma, once again. So, to answer the questions in the chat, right now, there is not a way for a designer to make a change to the variant. If they need to make a change, they probably should request if to the developer. If it's a change in regard to your usability within Figma, not with the design system, but more the way Figma works, well, this is why we are in a beta stage, right now, to kind of pick up on these requests and see which scenarios would we have to open up these generated component to allow for a designer intervention, just because they need it. So, I think of course, in the end, we probably need to take a path. Right. And our path, right now, is the source lives in the code, we bring it back to Figma, hence, oneway street for now.
But, the plugin can evolve, the way we think about components can evolve, and therefore, there is always room for thinking, well, maybe, you know, in these instances, in these scenarios, here, the designer should have an input or flexibility to make some changes in Figma that don't affect the code, for exam ple.
JASON LENGSTORF: When we talk about, like, data flow or information flow, this is something that we talk about in code, in general, is, like, if you want to have really predictable updates, you have data flow one direction. You have, you know, like, React, data flows down. You start at the top and you add props and rerender and so if we're looking at it the same way, what we're basically saying is that the code is where the information comes from. Oh, boy. The code is where the information comes from and we need to, like, make sure that the changes only happen in code and that flows down to the design and to the Storybook and to the UI, because they're all using the same source of truth.
And, that is� it's a shift, I think. I think it's something that companies would have to discuss and get on the same page about because it adds, what I would say, not a limitation, but a communication constraint, where you can't� you can no longer have your designers and your developers in walled boxes, where they don't speak to each other anymore. They have to become much more collaborative and really, if you talk to any expert, like when we had Dan Mall on the show, the whole thing he was talking about is design is not a phase, it is part of the design process. You don't� you know, you kind of have to collaborate because it's not the sort of thing that gets solved all in one place or the other. It ends as code.
So, this is interesting because this takes the practice, what we're seeing experts recommend about how to manage a design system with this very collaborative process, and it provides constraints and guidelines and incentives with, like, hey, if you do it this way, you automatically get Figma files, you automatically get synced, updated components. You don't update the Figma file, you update the code and sync the Figma file.
Chat� I mean, how many designers are in the chat today? How does this feel to you? What are your initial thoughts? Like, liking at the chat, it looks like we've got people saying� Andy says, this is amazing. [Indiscernible] is saying, this is superawesome. What if the designer wants to make changes, we talked about that. I see Henri. What's up Henri. Figma is a design tool, that is what you're looking at on the screen right now.
I love� so, we're almost at 300 episodes of Learn With Jason now. Very exciting. A very exciting part of that is we're starting to get to the point where there's an episode� what doesn't my keyboard� what is happening? Whoa. Oh, this, little punk�

THA�S SANTOS: The software upd ate.
JASON LENGSTORF: My software update is really being a jerk. We have an episode on Figma, introduction to Figma from Ryan Warner.

THA�S SANTOS: Oh, that's so cool. I have to watch that one.
JASON LENGSTORF: We've got a lot of good options.
George, who was on the show, we linked to the episode about Backlight [audio cutting out] is saying that, you know, it's a loop. You request changes on Figma, update the design system Main, which is the code, and that flows back into the Figma files.
Depends on the devs, sometimes they understand mockups with docs. Sometimes it takes much more handholding. Agree, it needs to be collaborative and not just a handoff. Unless you're owning this completely, endtoend, you're the designer and developer, it's not a thing where you're going to get a design anymore. You're going to talk to the designer as part of the development and you need that feedback loop. And the earlier that starts, the more collaborative, the better the end result is going to be.

THA�S SANTOS: One, additional benefit from using a library that is generated by the plugin is the terminology and the naming conventions now, it's all one. What happens often is a designer is dedicated building a library, setting up names and, even, like, sentence casing and all the different details to� to organize their library and the developer is also doing the same thing, but with their own knowledge and their own experience and the sooner you know, you will get two different things for calling the same component. Like, a good example is the tool tip. Some people call it� so a developer will call it a tool tip. A designer might call it a pointer. I don't know, like, different names start coming up for the same components. So, when you use a library that you're inheriting from code, it's all the same name.
It's an extra benefit is you're inheriting that structure that the developer defined, which hopefully he defined with the help of the designer so if you go to all this Storybook link, for examp le� JASON LENGSTORF: The Storybook link?

THA�S SANTOS: Yeah, there we go. How this design system organized, they call it grouping and buttons. All that naming convention gets now pushed to Figma so everybody's talking about the same thing so that's definitely an added benefit, as w ell.
JASON LENGSTORF: That's a great point. I've spent a huge amount of time, in meetings, where we were arguing about something and at the end of it, what we realized is that we were talking about exactly the same thing, but we used different words for what that thing was and, you know, names for things is extremely hard because a lot of times, like, the biggest challenge in large teams is that we don't have the right shared vocabulary because we never took time to write those definitions so if we're going to communicate effectively, a lot of times you have to force this big meeting where everybody involved has to sit down. A big one, agile. Half the room goes, no. We should work on things a little bit and measure what the outcome is. Nobody really doesn't want to do it, they just have different words attached to the word "agile" or "sprint." What this is doing is actually interesting. In the context of design systems, through the collaborative process of building it, you're forcing shared vocabulary and now you can't have the disconnect with the executive is saying, do the balloon bubble and the designers saying, that's a popout. The developer's like, well, we have the flyout and they're all talking about the exact same thing. [Laughter].

THA�S SANTOS: There's another feature from the plugin, if you go back to your Figma file. I'd just like to point this out in the thought process of naming conventions and keeping things insync. When we open the plugin again, we have that second step underneath the "explore stories." Right. Because you were asking me at first, what's this one. When you hit "play" button� and you can do it to all of them at the same time. When you do it to the buttons, for example, what the plugin is going to do is it's going to calculate all the stories that is inside that Storybook link. And, it will eventually outline it for us as a documentation piece. This is maybe even validate that what got developed matches what I intended and what are the different variants I have available for me to make a component of.
So, hopefully this is� there you go. We can check the avatar. Click "import all stor ies." JASON LENGSTORF: Just "import."

THA�S SANTOS: There we go. Now you can close the plugin because it just gets in the way usually. There's no way to minimize the plugin unfortunately. You can drag it all around to clear the space for yourself. Yeah. There you go. So, can you zoom in on the second part, for example? So, this is basically bringing in the stories from Storybook. But, they are, like, layouted as a documentation piece. Each one of them has the link, so, as a designer, after my library's finished, somebody already set up this connection from Storybook to Figma. I can come back here and see, oh, look, the avatars the developers have access to is the Large, the Large RTL. It's useful for me to have access to those and what is out there in one view. And I don't have to come out of my familiar space, right. You can also find this information just going through Storybook. But here, it's all within the environment that the designer is familiar with. So, I really like to build my files with this step of the process, as w ell.
JASON LENGSTORF: Yeah. This is really cool. And then, I saw another thing that I just want to highlight here, which is that if I click on this and then scroll down, the plugin actually gives me the ability to, like, jump to the story. Which is really cool. Let me actually open this though.

THA�S SANTOS: Yeah. It's probably blocking you.
JASON LENGSTORF: It drops me right into, not just, like, what I did, but it, like, pops into the� it, like, added all the properties. So, if we set these up...that's really cool.

THA�S SANTOS: That's correct. So, for the developer, this is great, right. Now they know exactly which definitions in their code they need to come up within order to build up their design. So, when you go back to Figma, Figma has this "inspect" feat ure.
JASON LENGSTORF: Where was I? Here.

THA�S SANTOS: Yeah. For example, now you finished your product design and you hand it over to the developers, they will look at the design probably through� on the right panel, the "inspect" tab. And in there, down there, because you have the button selected, there is a link to view documentation, as w ell.
JASON LENGSTORF: Oh, cool.

THA�S SANTOS: That's the same thing you as you saw previously, but the environment in probably which the developer would be more familiar with because they are after this information. And we� because we imported all these components from Storybook, this link can be made. So, they actually don't have to look at the rest of the properties that have been outlined by Figma because this is just CSS that Figma outputs, but if you have a design system, you don't need that information. You just need to know which component this is. What are the controls that I need to define to achieve th is� JASON LENGSTORF: Well, and check this out, too, because it shows that we have the� like, which variant we're using, is it disabled, what size is it, so we're able to do all these other pieces, as well, which is really interesting.

THA�S SANTOS: And it is something that George mentioned in the chat, the designer and the developer working together. What makes sense to generate Figma variants. So that really is them working, handinhand, to get a component that is useful for everybody. So, also the terminology that is used here, if you use this property of boolean, true and false, you educate designers on this. It is nice to know you can set a boolean and it's either false or true. Figma already helped us, like, bring our mentality more towards this direction but even now more when you have such a plugin that actually is making those definitions already visible to you as a designer.
Like, running this plugin, at first, you're going to be like, okay, what does the developer mean by "size?" The total size of the button, the height of it, the three different sizes we defined in the design system. So there's a lot of discussions to happen in order to everybody to understand what you're talking ab out.
JASON LENGSTORF: Yeah. I can definitely see any time you're building out a design system, you are� you're dealing with this idea of, like, designs drift over time. And, the� I go back to my conversation with Dan Mall all the time because any time I talk to Dan Mall, I feel like my brain expands a little bit. Intention versus drift. When you have something brandnew, you almost always need to drift a little bit, which means things are ambiguous and they're kind of spreading out and it's a little messy and as you start to see how things are used, you have to do that difficult work of editing and drawing down of boundaries and that's where the shared definitions come in, the shared terminology. I know that in this one design that a border radius might work but every other design we have doesn't use that so we have to agree we're not doing it here. I don't know you like it. We have to agree the system needs to be, like, set. And, like, you know, as any new system matures, it gets both more robust because we've covered more edge cases, but also more restrictive because we're added constraints to say, this is what it feels like to be our system.
So what I like about what we're doing, here, is that those constraints feel like they can kind of emerge naturally through use, where I could start by saying, can we just agree on what a button looks like? That's all. That's all I want, is the us to agree on what a button looks like. We say, "yes," we put it in Storybook and in Figma and we agree we will always use this. Over time, as things emerge and as we start to see more patterns, we can just add a couple more components and every time we do that, now we can import that into Figma and we get, you know, a predictable design, predictable code and whenever we find something that doesn't meet our needs, we can add a variant, add a setting, whatever it is but it's always syncing. It stops being a thing where the designers want it to be this way and the developers have to fight to get their code updated. You can't say, all right, we're going to stop all feature work for six months.
But, we can sneak in a button component every time that we work on a UI, we can replace a hardcoded button with our button component and we just slowly, you know, the whole UI turns over and eventually we're using mostly components and that's� as sad as that is, that maybe is the state of things and this feels like a great way to have that conversation in a controlled and centralized way.

THA�S SANTOS: Yeah. Additionally, I would say, also, there is the reality in which you, as a designer, start on a team that already has something going on. Like, that was the case for me. They had been working on design systems, we had our own design system way before I started and I wanted to jump in and get going with making UI improvements to our product, but I had to define all those components in Figma again and, like, how many libraries have I built so far? It's always the same, same process. Only if, could I inherit something that is already in code in Figma. Well luckily, now we have a plugin. The reality for those, say, freelancers, that are joining a team and can kickstart the entire design process because they have access, a full library, exactly, it's not a generic library that they have to adapt in and change to make it fit that client's brand, it can work with their own one.
And also, there is the option in which, like you said, the developer can go ahead, like, they've seen a component that has been used in the product, they already developed, they can include in the design system. There designer is busy with other jobs and, hey, there is a new component free for you, available, very quickly and you don't have to try to do it and try to keep up with what the developers are doing, what the designers are doing. Everybody can start working at the same pace, or at least pretty close, at this po int.
JASON LENGSTORF: Yeah. It's all� like, looking at this, I can feel, you know, every team is going to have to work out their communication. Especially, you know, as I mentioned, as you mentioned, the worlds are growing together. Designers and developers are not discreet entities that don't speak anymore. It's now very much an overlapping Venn diagram, where you need design at every stage of the development process and you need developers to weigh in really early because everything that's happening, they all have dependencies. If we're designing for the web, the web has support and developers need to give a headsup, that, hey, you're doing something that's going to be really hard or say, hey, that doesn't feel as good as we thought it would.
So, this is so much good information. So many good things are happening. Where should people go if they want to learn more about this? So, I'm going to do the obvious thing and throw people to story.to.design. Are there any other resources or articles or things that you want people to review?

THA�S SANTOS: We have Backlight.dev, as the main product that we work with. Backlight website is also great resource for articles around design systems. When you go to "resources," there's a blog space and we try to keep up with publishing, all the knowledge we have around workflows and processes and tools, other design systems for inspirations. We also have, within Backlight, the Section Mastery, that we are basically� we want to make the ultimate university around design system, where people can really know all the details it takes to make a good design system. Backlight being the tool for� the place where you're going to build, develop and maintain and document your design system. To find out more about the plugin, you will follow the link and you will� once you install the plugin, you can sign up for the� the demo we'll give you and see if the private beta is an interesting step for you.
We also will release this plugin publicly, later this year. So, keep an eye on that. We'll be announcing it on Twitter, you know. If you want, we also have a Discord channel. There's so many channels to join. Everything is connected. You'll find information on the Backlight website here.
The plugin, as we went through it in the demo, it works with Storybook and it also works with Backlight. I think, of course, because this is a shortish episode, we cannot explore all the different possibilities in one go. But, it's also really fun to see it work with Backlight and to see different workflows around, yeah, how to set up this, you know, steps, processes around designers, developers, from code to design, from design to code. I think there's so many scenarios to walk through when building a design system. I wish I could showcase them all in one episode. [Laughter]. It's too m uch.
JASON LENGSTORF: I'm going to send everybody back to your Twitter again so that anybody who is watching, who wants to learn more, can dive in here and get a better sense of� I'm showing off my DMs, don't look at that. Anybody who wants to can dive in here and see what's going on and, you know, get a good sense of how all this stuff fits together by following your content and I'm sure you'll be sharing other peoples' content in the design system space. If you're interested, head over here and hit that "follow" button that I apparently hadn't hit. [Laughter].

THA�S SANTOS: You have a lot of people to follow, so I completely underst and.
JASON LENGSTORF: Okay. So, with that, I think we're going to call this one a glowing success, even with a Figma incident, we were still able to get this all set up, get our design system imported and I just want to� just very quickly, reiterate that we, like� this is extremely [audio cutting out] we were able to jump in here and build out a really functional library so that we could build this tiny, little form UI. I didn't have to design a dang thing. I just dragged stuff out from my assets and built out this little form. This is really powerful stuff and something that I encourage everybody to definitely go in and try.

THA�S SANTOS: You know what I'm going to do? I have the design system that I have from story.to.design, I will publish it once my Figma is back. I'll publish it in Twitter for those people following, they will be able to find it out. And you can play with these components yourself. So, you won't be able to play with the plugin yet, unless you take part on our beta. But, at least you get to see what got generated by the plugin. Really fun st uff.
JASON LENGSTORF: Absolutely. Yeah. I think that� that is some very, very cool stuff. Make sure you get on that wait list for story.to.design so you get access to it as soon as it becomes available to everyone. We've had Vanessa, thank you so much for that. That's made possible through Netlify, Nx, and Backlight. So, thank you.
That is� you know, that means a lot. It helps keep the show running. It gives us a lot of opportunities to do things that would not be possible without the support of our sponsors. So, thank you so much for that. I need to update the schedule because it is looking pretty light in here. We've got a good episode coming up on Thursday, I the web page test team coming on. We're going to be learning about some really incredible stuff. If you've been following [Indiscernible], they have new tools for running experiments and those are powered by Netlify edge functions and I am just absolutely thrilled to give this a shot, show you how this works. I hope you get as excited about this as I am. We'll be updated the episodes this week. We've got a lot of good stuff. It's going to be a really fun month. Thank you, all, for hanging out.
Tha�s, any parting words for the chat, before we end?

THA�S SANTOS: First of all, I would like to thank you for this awesome invitation to be on the show. And congratulate you on the format, very engaging, you put yourself in the shoes of somebody who has never seen what you're about to present and you're able to really dissect it in a very understandable way. I think it's really nice for really learning something new with you every time you came l ive.
JASON LENGSTORF: Thank you very much. I'm going to put that in my warm, fuzzy bank. I really appreciate that. Tha�s, thanks so much for taking some time to teach us today. It was super, super fun.
Chat, as always, thank you. Staytuned for the raid. We're going to see Ben. We will see you all.

THA�S SANTOS: Thanks, everybody.