How to Turn a Figma Design System Into Code

[00:00 - 00:50] So our design system source of truth is in a Figma design. So let's examine what we have and how we can define our requirements. We start with this Figma file and on the left we can see all the pages. Now we are on the cover page and let's move forward to the spacing page. So with the spacings we can see that we have multiple spacings defined and all are multi multiples of 4 and 8. So we can see here we have 4, 8, 16, 24, 32 and 40 and it goes on and on. So the first question we ask ourselves is can we model the spacings into a design token? And the answer here is yes as they can be represented by a simple key value pair.

[00:51 - 04:11] So in our case let's open Subline and in our case the value would be something like spacing then 4 and it would be 4 pixels and that would represent a design token value. So moving forward we can see the colors again this is the whole color palette and we can see quickly that the values can be represented by a single key pair value and look something like let's open again. The Subline and the color could look like something colors. See here color colors then primary. So we choose our primary color and then the 500s8 and this would be we would extract the value 556 or let's see this value here which is this one. So this is our color token. Next we have some effects again we have the Sado effect to Sado's level 1, 11, 2 and the rounded corners so a small rounded corner and a large rounded corner and this is again the same principle we can use design tokens for those two effects the Sado's and the rounded corners. For the typography things start to get a little tricky and but why is that? Let's examine for example the heading 1. We can select heading 1 and check here the styles. So if we see the properties we can fast we can quickly see that we have multiple values for a single textile. Those properties and values are font family, font weight, line height and letter spacing. So this is not an ideal case for design token format. Usually this is tackled with a platform specific solution and in our case as we will focus on web based components we will publish our design system with typography.css file that will include of all of our typography stylings and we have a demo here of what it would look like and again you can find this link in the text of this specific lesson. Going back to our Figma and let's get to the components and the button component. Now we can briefly see the component and especially the button component as we can imagine a button cannot be a design token per set but what about a really small detail that we notice about the animation. Here we see that the transition between states is 400 milliseconds is in and out.

[04:12 - 04:54] This could be easily added as an animation token so all of our components will use in a format like animation and the default animation if we have only one animation and then paste this value which is 400 milliseconds and the is in is own effect. So that was all and we will move to the next module where we will start our start our mono repo and get some hands-on coding and in module 2 we will see how we can actually create the design tokens and make them consumable with style dictionary.