How to Connect Storybook to Figma

[00:00 - 00:14] When developing UI, it's very important to make sure that you're matching with the designs. However, sometimes it's frustrating because you don't necessarily know the links to the design, maybe it's lost in a communication for months ago in Slack or in the JIRA ticket.

[00:15 - 00:42] But wouldn't it be awesome if we could just somehow integrate the design to Storybook? If you're in that situation, all you have to do is go to the official Storybook website and click in the Addons link, which will bring you to the Addons gallery, and that essentially gives you a very interesting overview of all kinds of addons, both from the core maintainers of Storybook, but also from the community, to provide basically any extra functionality you're looking for.

[00:43 - 00:54] Because we're looking for designs, we click on here. Over here, we see that there's an add-on called Designs, which is pretty popular, and in fact, this add-on is widely used for integrating Figma Designs.

[00:55 - 01:03] If we click on it, we see the description, and there's a docs and demo link. We can check how it works before even installing.

[01:04 - 01:20] We see that it supports just plain images in case your projects don't really use any fancy design tool. It also provides a way to just add links, as well as even iFrames, to allow you to embed entire websites or YouTube videos.

[01:21 - 01:32] However, the thing that actually matters to us is Figma Designs, and we see that this add-on also supports embedding Figma Designs, writing to Storybook. So, let's go ahead and install this to improve our Storybook.

[01:33 - 01:38] In the Getting Started section, we see the installation steps. So, let's do that right away.

[01:39 - 01:53] Go back to VS Code. You might have Storybook running, so let's just kill it, and install using the command from the steps. Also, we need to register the add-on in main.js.

[01:54 - 02:16] So, we're also going to get this copy this entry, and go to our main.js file, and register the new add-on by adding it to the add-ons property. Going back to the steps, it says that once you have registered the add-on, you just need to add it to a Story by using a with design decorator.

[02:17 - 02:25] And in this example specifically, it's showing you how to add it to a Story. However, we want to add support for every single Story, so we don't need to worry about it.

[02:26 - 02:43] So, what we can do is, we can essentially get this decorator, go into our decor ators file, and add it as well in the global decorators list. And this will be applied at a project level, providing support for every Story.

[02:44 - 02:54] So, let's run Storybook again, and check it out. And on Storybook, we see that now we have a new option in the add-on spindle.

[02:55 - 03:02] If we click on it, it's called design, but there's no design file. That makes total sense, because we haven't really connected any design.

[03:03 - 03:13] As you can see in the documentation, all you have to do is to set a parameter with a design key. You define the type that you want, it could be an image, a link, or whatever.

[03:14 - 03:26] In this case, we want a Figma, and a URL to the design. If you go to Storybook, in the with, getting started with Mildrop Story, you will see that there is a link to the designs.

[03:27 - 03:45] And by the way, props to MaximolarNars for making these incredible design for this course. If you're logged into Figma, you're going to see a sidebar with some details, but you could also click on these buttons to go into, for instance, the component library, where you can see all kinds of different designs there.

[03:46 - 03:58] And from here, we can actually get the links to use in our Stories. And as we're using the badge component, let's select the entire thing, right click on it, and then over copy as, we select copy link.

[03:59 - 04:13] You don't necessarily need to have access to this if you don't want to, because the links are described in the description of this course, so you can just copy from there. Going to our Story to the badge, and back to the code.

[04:14 - 04:33] All we want to do is to add a parameters key containing the design of type Fig ma and the URL that we copied. So when we get to Storybook, we see that our design panel now renders the entire design.

[04:34 - 04:38] And that's pretty amazing. We can essentially get some information about it.

[04:39 - 04:50] We see where it actually is part of, as well as there's a link here that if you click on it, it will open Figma directly on that specific node. And this is great.

[04:51 - 04:59] We now are able to essentially embed any design for any story that we want directly in Storybook. And of course, you can be more flexible.

[05:00 - 05:18] In this case, I just like to render the entire sticker sheet, where you can see all of the variants right away, rather than having different things from different stories. And also the fact that we set the parameter in the meta level applies this for every single story, right, as you can see over here.

[05:19 - 05:41] So I could basically compare my dark mode design with the component, as well as my light mode design with the component. However, if you want to be very specific, what you can do is in your design, you could select that specific variant, and you can copy its link, then you could do the same for the other variant.

[05:42 - 05:53] And instead of setting them on the meta level, you just set them to the story level. And that's basically it, the simplest way possible to embed a Figma design into your stories.

[05:54 - 06:03] But at the same time, you don't really have access to the spacings, to the colors, and other tokens, right? And that would be just awesome to have.

[06:04 - 06:20] Well, there is a way to get them, although it requires a bit more effort, we can certainly get there. There is a feature called Fixback, so instead of having Figma, you would have Fig spec that will allow you to get the specs of your design.

[06:21 - 06:29] However, Storybook is going to complain that there's no personal access token. And the reason for that is that this feature requires access to the Figma API.

[06:30 - 06:40] In order to get access to it, we need to define a environment variable. Over here in the documentation, we see Figma Fixback, which tells you how to use it.

[06:41 - 06:50] And you first of all need to access Figma developers to get a personal token. And then you're going to see an option right here, get personal access token.

[06:51 - 07:04] Well, you do need to create a Figma account, but once you do, you will get this value. And following the rest of the instructions, we see that you can essentially set the value in an environment variable.

[07:05 - 07:13] Going to the code base, what we can do is really simple. We essentially create a new file called .env.

[07:14 - 07:27] And we set the value we just copied together with this key from the documentation. Once we save it, of course, we need to kill Storybook because otherwise it won 't be able to pick that up.

[07:28 - 07:37] And then all we need to do is just run it again. So once this is finished and we go back to Storybook, we see that this pretty much rendered the same thing.

[07:38 - 07:54] However, we are now able to get inspection values on top of it. So we can zoom this and get access to the spaces to the actual content, but we can just copy this and as well as some CSS properties.

[07:55 - 08:05] And basically in combination with this, we could use ordered add-ons from essentials. For instance, the measure add-on, we could press the M key or we could just click on this button.

[08:06 - 08:14] And then we can check, for instance, the spacings. And over here, I see the patterns of three on the vertical level and eight on the horizontal.

[08:15 - 08:27] And when I check the design, I see that these values are matching. So this is a very interesting way to improve the workflow of your current team and have a better collaboration with your colleague designers.

[08:28 - 08:31] I hope you enjoyed the lesson so far and I'll see you in the next one.