Build Your Own Design System

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: Hello, everyone, and welcome to another episode of Learn With Jason. Today on the show, we have Georges. How are you doing, man?

GEORGES: I'm good. Thank you, Jason.

JASON: I'm so happy that you're here. I bailed on trying to pronounce your last name because I'm not even pronouncing your first name right. I feel like everybody really enjoys my French accent. Georges. That's not even right, is it?

GEORGES: That's not too bad. Not too bad. (Laughter)

JASON: I apologize. So, welcome to the show. I'm super happy to have you here because we're talking about something that is both interesting to me and I am completely terrible at, which is design systems. But before we talk about design systems, I want to talk about you. So, for folx who aren't familiar with you and your work, do you want to give us a little background on yourself?

GEORGES: Yeah, absolutely. So, I've been always a techie. As long as I can remember. Previously, a CTO of FinTech for 17 years and recently started with a couple of friends Dev Riots and we are primarily focusing on bringing dev tools to front end teams and specifically front end teams.

JASON: Very cool. Front end tooling is a wild space because it can cover so many different things. VS Code and GitHub Code Pilot which git's pretty heavy. Front end tooling like building a framework. We just had Remix and Solid JS on earlier this week. What I would consider to be team cohesion tooling. Is that kind of a good way to describe the suite of tools that you're working on?

GEORGES: Yeah, it's actually a good one. Not only but what you're saying is very important to us. The analysis, if you want, of the team is that the front end teams have super evolved in the past few years. Previously, you had just a front‑end developer that could do everything on the front end, but now are moving into design really in the product development. Like they're really part of it. And you have even new jobs coming in like design engineers and even backend engineers for the front end. So, you have all those varieties of specialties in the front end and we don't think the tools have evolved to really embrace the fact that there is all those persons in the front‑end development. And so everything we do, we always ask ourselves, okay, is this gonna be a good for a developer, but how can the designer contribute? How can the UX writer contribute? You know, how the design is gonna be passed back and forth between the people, et cetera. So, we really are trying to think about tools that the entire front end team can collaborate with.

JASON: Yeah, and it's a good ‑‑ it's really interesting to me because it feels like we've seen this sort of shift in the way that you build for the web where when I was first starting out, you would get, you know, and I started building for the web pre‑CSS. So, I would get an image and then I would slice that image up and put it into a table to get this website to look the way that it was supposed to look.

GEORGES: Yes, I think it was called, like, the nine‑way image or ‑‑

JASON: Yeah, yeah. And so we would do things like that. But that meant, you know, you kind of ‑‑ you worked with a designer, but the designer never thought about the code. The designer was building you an image and then they would send you that image and then you would take that image and turn it into a website. And it wasn't really collaborative. It was very, like, the design first and then the website, and that's absolutely not the way that we're building for the web these days. It feels much more like we start with a kind of idea or a design direction. I had Dan on the show talking about design systems a while ago now. And, you know, one of the ways he talked about it is that he encourages the designers and the developers to sit together, and sometimes when they work, they're coding, and sometimes when they work, they screenshot the code and move it into Figma and make some edits and go back to coding after they've done some design work. So, it's a very in the ‑‑ there's just a lot going on and it's no longer, like, a handoff process. You're together. Right? That's fascinating to me.

GEORGES: Yeah, yeah, that's really where everything needs to move, is to work together. There is so much value to bring. You know, I don't know if it sounds familiar to you or for some of the audience, but I've been into, you know, demo meetings, and maybe that's the first time the designer sees the result in real life. And you get that disconnect and frustration between what was the initial idea and what is the result.

JASON: Mm‑hmm.

GEORGES: It frustrates the whole team, actually, because obviously the developers, they want to make the perfect design, and, you know, it frustrated both people. And it's crazy that the only touch point at the end of the sprint when everything is done, it should be really a collaborative effort.

JASON: Yeah. Yeah, and also what I've found is that the more it feels like we're working together, the more I like the job. Like I really have fun when it's me and a bunch of creative people who have experience, you know, a lot of times I'm the one doing the middle tier stuff like the serverless or the data connections and we've got somebody who is going to build the front end and somebody who is kind of focused on the design. If we do it as a handoff, okay, I'm going to go on my own and work on the data stuff. You work on the front‑end development. You work on the design. It's fine. But I have so much fun when it's that whole group is sitting together just being ridiculous and making jokes and, oh, what if we did it like this. Then I could take it and make it move like this. I can pull in this data and make it move like this. You get this really magical sense of collaboration.

GEORGES: Exactly. And this is only possible if you can work in real time.

JASON: Mm‑hmm.

GEORGES: To the same ‑‑ to the same thing. And even in terms of efficiencies, like, you get ‑‑ for me and for the team, like, we believe that you get an average result when you get something like handover in different steps, because basically there is information lost in the way, and also there are opportunities of magical, as you said, magical elements that can only happen if, you know, what if you do this? What if you do that? But those can't happen when you have a handoff and you do, like, a sprint, because at the end of the sprint, the sprint is closed. Maybe you're gonna, like, reinject something else for the next sprint, but, you know, everything needs to go on and there is new stuff in the sprint coming in. So, you don't want to do that. So you end up with something which is average and not, you know, perfect or magical. Especially in the front end where user interactivity and user experience is actually so fine. I mean, it depends on so little things. Little animations. Little timings. It's a fine art.

JASON: Yeah. It's a fascinating space to be in, and this is probably one of the hardest problems because, you know, I think the misconception that I think a lot of folx have is the hardest part of building for the web is tech. It's learning the right technology or choosing the right stack or something like that, but the hardest part about any technology project is collaborating effectively. If you've got a team that meshes well and that works well together, you can give them Notepad and nothing but HTML and CSS and they're gonna make magic. If you have a team that doesn't communicate and you give them all the latest and greatest tools, you'll get something fine. It will be fine.

GEORGES: At the end, it does the same thing. The web page with some interactivity.

JASON: Yeah. So, we're talking today about design systems. So, how does a design system play into this idea of collaboration? What impact does it make to have a design system on your ability to collaborate between designers and developers?

GEORGES: Yeah, so, there is multiple aspects of the design system. So I think it's important to say is that definitely the designers entered into the front end space, like, not a long time ago and they already initialized their work with tools like Figma and Sketch, you can create short design systems. This is really key for them, for actually designers to actually create experiences that are consistent, that are qualitative, and also bring velocity. So they can go fast because they can reuse things that have been built for the brand. And always be consistent. But in the end, if on the development side you don't have this industrialization or the fact that you also created those reusable elements, you don't get that same ‑‑ that same benefit. You don't get the velocity of reusing always the same components. You don't get the exact, consistent experience, and then, you know, it all comes also with the quality. If you do and redo things multiple times, you can't get that right everywhere. If you fix a bug somewhere, you want that everywhere in the app that you use that exact component. You want it fixed. So, this is really key. And then there is all sorts of other things on the engineering side. Like let's say you are a very fast‑growing company. You have to hire 30 new front‑end developers or so in a year. We've heard stories that are more aggressive than that. How do you make sure this team of engineers will build in a consistent with using the right value if you don't have the design system? This is hard. This is super hard. Like training 30 new, you know, recruits and making sure that they develop in the brand and in the same ‑‑ in the same methodology is going to be very hard if you don't have a design system.

JASON: Yeah. Yeah, and I think what is interesting about that, too, is that, you know, it might seem restrictive to say, well, we have a design system. You have to use the design system. But what I've found is that this is one of those things where the boundaries actually create a lot of freedom. And by creating a design system, what you've said is, hey, developers, if you need to put together a UI, if you use the design system elements, you don't need to get a designer to free up bandwidth to come and help you with that page. If you use these elements as described, you can ship this thing right now. And I think that when you start getting into bigger teams and lots of moving pieces and tons of projects, one of the biggest frustration points is that feeling of bureaucracy. Well, we can't actually take this thing live because we need a designer to do a review before we can do that, and the designers are backlogged until next quarter so, you know, this project is kind of indefinitely on hold. And that is not a fun place to be, you know, now you're under pressure to ship. The designers are way overstretched because the average company has, like, one designer for, what, every 20 developers or even worse ratios than that. So, by having a design system, we're creating strong collaboration but also decoupling between what the designers are doing. So, the designers aren't doing, like, production, let me fix this input for you. They're doing strategy. How does the design feel cohesive across the entire product? Developers can grab a predesigned element and build the whole thing.

GEORGES: If you talk about the ratio you're giving, there is no way you can scale. You're gonna have just a backlog on the designer. What the design system gives is it gives the guidelines for the team and for the whole team, actually, to actually build on their own, basically.

JASON: Mm‑hmm.

GEORGES: So, this is actually nearly what you would like best is, like, the designer team basically can really focus on the guidelines and train the whole team through those guidelines to get the best out of it. It's actually very efficient. And it gives more time to designers to focus really where it's really important. Every aspect that is super EV/UX related where you have user experiences that are really key to your product, you don't need to design every single piece of your application. I think, you know, a preference page or a setting page, I think anybody can build something that is good enough, but then there are other parts of your application which are centric to your use and your experience. Those need the top‑end research that the designers can put in.

JASON: Right.

GEORGES: So, this is also ‑‑ this is also something valuable that I see.

JASON: I 100% agree. So, that's the value of a design system, right? But then there is another complication that comes in with a design system, which is that now instead of this coupling between, you know, you need design time to ship anything with development, now we have this coupling between, like, the actual app and the design system that powers the app. Because these now become two separate sets of code, and a big challenge that I see is how do you synchronize between these things, right?

GEORGES: Yep.

JASON: So, when you are looking at this problem, how do you make sure that when somebody implements a design system it doesn't become a kind of endless treadmill of, oh, we made an update to the design system. Everybody go update every UI you've used in the design system to use the new version.

GEORGES: Yes. So, we have definitely a vision on this. Today, for teams that are very advanced in design system, they would have a full design system that they would maintain on Figma, for example.

JASON: Mm‑hmm.

GEORGES: And they will have a full component library that comes with it. So, if you look at things obviously, like, Polaris from Shopify or if you look at the Atlas design system. All those design systems we know have those elements. And so they have to be maintained separately. And you can see the trend that some firms are trying to actually create the code from the design and generate the code. And we actually are looking at it from a different standpoint, from a different angle. And we take the code as the source of truth because it runs, and we ‑‑ this is not available in Backlight yet, but Backlight will generate the design systems in Figma, for example.

JASON: Interesting. Okay.

GEORGES: Yes. So, this is a completely different take from anybody that I've seen so far. But this will make the ability to auto maintain the design on a Figma point of view. And so the designer can really focus on building new things and everything that it doesn't ‑‑ isn't existing yet.

JASON: Mm‑hmm.

GEORGES: And then will look back into Figma from the source code.

JASON: Fascinating. Yeah, I haven't heard anybody talk about that. I like that. Okay. So, we've been talking kind of in the abstract. We know the people problem of collaboration when it comes to design systems. We've talked through the kind of coding challenges, and you just mentioned Backlight. So, Backlight is the tool that you're working on that is intended to make design systems more manageable. Is that correct?

GEORGES: Yes. And really ‑‑ and going back to your point that the design systems are super collaborative, they are super collaborative because you have a piece ‑‑ the design system is a piece of, you know, design elements in Figma, for example, it's a piece of code through the component library that you have in the code. It's also content design, you know, the grammar, the tone, the vocabulary that you use. So, those are for UX writers also to contribute to the design system. So you have everybody contributing to that element, which is the design system, and that's the language that everybody will share when they talk about design and when they build things together. So, the design system is ultra collaborative in that sense. Like everybody is working on this thing and everybody needs to work together on this thing. So, when we ‑‑ when we build Backlight, we just said, okay, what is the product we want to use? What we really went from a blank sheet of paper and we said, okay, what is the best thing we want, we would love to have to build design system together? And this is what we created with Backlight. And you can really create and maintain all together, the whole team, the front end team together, a design system.

JASON: I am really interested in seeing this in action. So, rather than talking about it, I actually just want to start looking at it. So, let's switch over here. And I am going to start by shouting out our live captioning. We've got Jordan here with us from White Coat Captioning, who has been running captioning since the beginning of the show. You can find that right on the homepage of the site if it you want to follow along in text format. We have that made possible by our sponsors, Netlify, Fauna, and Auth0. All of whom are kicking in some cash so that we can make this show more accessible to more people. And, you know, just a little nudge to the companies out there, if you want to sponsor some captioning, I'm looking. I need another sponsor. We're talking to Georges today. So, you can find Georges on Twitter there if you go and click that link. And what we are specifically talking about and what we're about to dig into is backlight.dev. So, you can go check out Backlight's website here. And at this point, I'm gonna ask you, what should I do if I ‑‑ so, I'm ready to start my company. I want to build a landing page so that people can say that they're interested, and I'm gonna start from the get‑go with the design system. I've decided that's how I'm gonna build my company.

GEORGES: Okay.

JASON: What should I do if I'm gonna use Backlight for it?

GEORGES: Let's go and get started with the yellow button. Yeah.

JASON: All right.

GEORGES: So, there is a bunch of starter kits which are design systems that are pre‑built.

JASON: Okay.

GEORGES: Depending on the technology. So, you have some web components, some React and some Vue, and those are examples of technologies. So, we're still building that on a weekly basis, but this is what you have today. But given the style of Learn With Jason, I think we should start from scratch.

JASON: Let's do it.

GEORGES: So, we're gonna pick up the black card which says "blank." Exactly. And so we're just gonna pick this up. And you go into Backlight. So, this one is blank. And so now we're gonna ‑‑

JASON: I want to call something cool out here. Did everybody notice that I didn't have to sign in? I'm able to use this product without actually signing into it, which is rare and cool. I'm excited.

GEORGES: Yeah, we try to be very, very open so that really people can discover the product and make their minds up about it without ‑‑ but this being said, now you're gonna need to make your copy of it. And so by clicking on the "start with this design system," now we're gonna ask you to log in because we're gonna save things on your account.

JASON: Yeah, so, basically, I can play at first. If I want to keep it, I obviously need to have an account to associate my version with.

GEORGES: Exactly.

JASON: Okay. So, I signed up with GitHub. I'm in.

GEORGES: Exactly. You're in. So, now, what you see on the left, maybe if we do a quick rundown on the left. The packages. So, this is a list of passages. And the tokens and components and infrastructure are kind of sort of folders where you can put stuff.

JASON: Mm‑hmm.

GEORGES: And so this is where we're gonna put modules or JS modules or CSS modules. That would be the composition of your design system. So, I don't know exactly where you want to start, but maybe we can start with some design tokens.

JASON: Okay. So, yeah, so, we're gonna build ourselves a company launch page and a design token. I'm gonna put this here. And so ‑‑

GEORGES: Let's say colors to start with.

JASON: Okay. Do I have to give this a file extension or just say colors?

GEORGES: This is just a package.

JASON: Interesting.

GEORGES: This is like a folder. And then on the right, you have the source, stories, test, doc, and design. So, we can look at this, but maybe we're gonna start with source.

JASON: Source.

GEORGES: Because we're gonna add a new file. Exactly. This could be colors.‑‑ I would recommend to do a colors.scss.

JASON: Okay.

GEORGES: Because this way we can combine them. Because I think we're gonna build maybe with CSS custom properties.

JASON: Sure.

GEORGES: And then we're gonna combine the colors and the typography and everything we build together.

JASON: Okay. So, if I want to do it ‑‑ is this just straight‑up CSS, the way that I would always write it?

GEORGES: Exactly. So, the only thing maybe to ‑‑ and this will be useful later ‑‑ but let's prefix everything with something that you want to use.

JASON: Let's just use lwj for now.

GEORGES: Exactly. And then you can use color. And now you can say, I don't know, primary, maybe that's good enough. I don't know.

JASON: Okay. And then let's set the primary color to hotpink. We're probably gonna have to tweak these as we go as we actually see them in action.

GEORGES: Exactly.

JASON: But I can make some up. And then, what, we probably need, like, color‑foreground, and we can make that, like, a dark color. And then a color‑background. And we'll make that a really light color.

GEORGES: Yeah.

JASON: And these are just shades of gray.

GEORGES: Exactly.

JASON: Okay.

GEORGES: And now, right away, I'm gonna show you something right away, because I think it's interesting. Is we can write the documentation of these colors to document it. Exactly. We go to doc. So, we support different shapes of documentation, but I think MDX would be easier if we go React. So, we can do colors.mdx. Exactly.

JASON: Colors.mdx.

GEORGES: Yeah. Now I think we need to import ‑‑ we need to import MDX. So, import brackets MDX from @mdx‑js/react. I think that's the minimum. And mdx is in lowercase.

JASON: The whole thing?

GEORGES: Yeah.

JASON: Okay.

GEORGES: Try a title now. It should be working.

JASON: Let's see if I need to reload it. Oh, wait. Oh, wait, hold on. It saved as, like, .mdx‑‑‑

GEORGES: You have the root files on the bottom left‑hand side. You have a package.JSON and we're gonna add the dependency to this.

JASON: Okay. Do I do this straight up like this?

GEORGES: Yes, exactly. You're actually gonna add an easier panel for that. I think, yeah, I don't know if we support the store. I've never tried that, but go back to colors to see if it's working.

JASON: There it is.

GEORGES: There we go.

JASON: Great. Okay. All right.

GEORGES: We're getting there. So, now we want to show the colors. So one way is obviously we could build here in MDX some boxes and stuff with the colors. So, this will document.

JASON: Yeah, I could do something like, what, div style and then we could do background lwj‑color‑primary. And then I would need to set, like, a width of 100 pixels and a height of 100 pixels and then close that off. Wait, what did I get? Oh, oh, oh. Oh, that's right, because it's MDX.

GEORGES: Yes.

JASON: Right. Okay. So, doing this ‑‑ doing this all for illustrative purposes that we're absolutely gonna get rid of here in just a second, but that's okay because it's worth ‑‑ it's worth seeing how much this is painful. (Laughter) Okay. So, here is our first one, and I did ‑‑ what did I get wrong?

GEORGES: It should be pink.

JASON: Let me make sure I'm actually getting it on the screen here.

GEORGES: Yeah.

JASON: There it is. And I did ‑‑ did I typo this?

GEORGES: Oh, yeah, we need to import it in the documentation. So, we need to import. And we can do import../src/colors.scss. Exactly. We're gonna combine.

JASON: Okay. There we go. So, there's the way you would do it manually.

GEORGES: Exactly.

JASON: This ‑‑ I don't want to do this every time, and I certainly don't want to have to go and edit this every time.

GEORGES: Yes. So, what you can do is you can use a component that we built, and this is actually available in open source, so we can import. Import brackets styleShowcases. Style without the "D".@divriot/dockit‑react/ ‑‑ because there is different components. Style‑showcases.

JASON: Okay. Then do I need to add this to the package?

GEORGES: Yes.

JASON: Okay.

GEORGES: You're getting used to it. And now we can use it. It's actually a React component, so we can use it. Exactly. And then we're gonna use as appropriately, we're gonna put prefix = and we're gonna prefix it with your CSS custom properties. So, maybe ‑‑lwj‑color. Exactly. All my custom properties that start with this. Then we're gonna say another property, which is styleKey.

GEORGES: Key with a ‑‑ exactly. And we're gonna say background, because we need to tell them this is a background color that we want to showcase.

JASON: Oh, I see. I see.

GEORGES: Let's see if this works. Otherwise, we need to add something else.

JASON: Let's see.

GEORGES: That's weird.

JASON: Oh, because I tried to do ‑‑ I tried to included the selection inside the package JSON because I copy/pasted.

GEORGES: It should still work. Let's see. Okay. So, now we're missing just one thing.

JASON: Okay.

GEORGES: We're gonna just add a piece of CSS. Either in a new file or in line where you want. We can create a new file, if you want, just to style the box, actually. Because the box can be styled the way you want. So, we can say ‑‑ exactly.

JASON: Okay.

GEORGES: And now you can make a class there which is called box.

JASON: Okay. And we'll say.

GEORGES: And then you can ‑‑ and then you can give it ‑‑ exactly. You got it.

JASON: Okay. Just do, like, a light margin.

GEORGES: Yes. And border radius if you want.

JASON: Oh, yeah, border radius. Let's do that. Okay.

GEORGES: And then you can go back to your here and ‑‑ exactly.

JASON: Src/box.scss.

GEORGES: Yeah. And you could actually have the box in the doc folder because it's only relative to the box, but it doesn't matter. That's okay.

JASON: Oh, I see. I understand. Okay. And so then do I need to, like, add that box class here?

GEORGES: Exactly. This is called component ‑‑

JASON: Oh, it's not ‑‑

GEORGES: No, it's not class name. ComponentProps with an "S" at the end. And this is where you put an object ‑‑ exactly. Class name. You got it.

JASON: All right.

GEORGES: Wow, that was ‑‑ so, now you can even add new CSS custom properties and they will show up automatically.

JASON: Very cool. Okay. So, let's do a secondary. And we'll do this one as ‑‑ is that a color?

GEORGES: That's nice.

JASON: And then if I reload over here ‑‑

GEORGES: Exactly.

JASON: It's automatically in. I'm assuming this is order dependent. So, if I switch these up. Yes. Look at that.

GEORGES: Exactly.

JASON: That's slick!

GEORGES: So, you can do quite a lot of things. So, you can obviously do that by yourself and do exactly the color palette that you like. But we just offer this little facility into the React package.

JASON: Yeah. That's ‑‑ this is really nice. Like it's good to have these kind of, like, let's just make that thing work the way that we want it to work. But okay. So, now we have our ‑‑ we have primary colors, secondary colors, so, the next thing then is we need to put together our components. And so I want to do, like, a landing page. So, if I'm launching this business, I need, like, a headline. I'm gonna need some text that says, like, hey, this business is coming soon. And I haven't had time to put together a newsletter yet, so what I'm actually gonna do is kick to Twitter. Let's have a button that says, you know, for updates, follow me on Twitter.

GEORGES: Yes.

JASON: Right? So, headline, text, button, and then maybe, like ‑‑ let's start there. Then I have a follow‑up question once we get there.

GEORGES: Okay. Do you want to, like, say create another document for the typography maybe?

JASON: Oh, yeah. We can definitely do that. Let's go into source.

GEORGES: You can go into talkings on the left. Now we can create the typography. Exactly. So, same story.

JASON: Oh, all right.

GEORGES: Same story. We're gonna do ‑‑ exactly.

JASON: Got it. Okay. So, then I've got my typography.css. We'll give it root.lwj and call it text. How would you usually ‑‑

GEORGES: So, I would usually just do a font family.

JASON: Let's use one that we know will work so we can say ‑‑

GEORGES: Yes.

JASON: What's a system font? Verdana ‑‑ let's use Georgia so that we know that it's working. And then we can, like, default to serif. Comic Sans. And then we can do an lwj text heading font. Yeah, we can use Comic Sans for that. What is it, common Sans MS.

GEORGES: The best way to keep it discoverable is do text font heading. Exactly. This way you can do ‑‑ you can change heading into something else. This is another family.

JASON: That is what I was thinking, yeah, is that we could do ‑‑

GEORGES: Okay. So, then you could do font family and add something. So, for example, if this is heading, you give it heading. And the other one, you call it body. Exactly. Perfect.

JASON: Okay. And then we can do ‑‑

GEORGES: Then I like to do size and weight. I think those are the minimum. But you can obviously add ‑‑

JASON: Okay. Let's go with a size of ‑‑ we'll default to 18.

GEORGES: Yeah, you can do size normal and size big or size large

JASON: Gotcha. And do you always ‑‑

GEORGES: Exactly.

JASON: And then we can go with big and huge.

GEORGES: Yeah. So, what I like to do also is to give it some space to separate the different types of token, but I think you get the point.

JASON: Oh, yeah, I see what you mean. Those. And then bold and ‑‑ actually, let's just stick with that. Or no, you know what we can do? We can do black. And we'll make that, like, a 900. So we can do kind of different sizes and stuff. I'm not sure if Georgia has a 900 weight, but we can try that.

GEORGES: Exactly.

JASON: Anything else we should put in here?

GEORGES: I think that's a good start. I mean, we don't need to be too crazy. And it's actually a good thing to start small. And this is actually something I would recommend to everybody, is, like, to start small with the design system and just build on it progressively.

JASON: So, I'm just grabbing out that?

GEORGES: Yeah. Maybe you can copy/paste from the colors. It will give you some time.

JASON: Definitely could have done that. That's doing ‑‑ there it is. Then I can go back to colors and grab this style showcases.

GEORGES: Yeah, and with the import and everything.

JASON: And for this one, styleKey, how do I want to do this?

GEORGES: It would be text.

JASON: Okay.

GEORGES: Oh, wait a minute. Yeah, this one will actually be even different. No, the styleKey will be font family, sorry.

JASON: Oh, I gotcha.

GEORGES: Yeah, because you want to do a showcase for font family. So, the style keyKey would be font family.

JASON: Is this CamelCase or snake case?

GEORGES: Snake case. You don't need the components for this one because it's a font family. It doesn't have a box. So, this should work. Oh, you need to import the style.

JASON: Oh, that's right.

GEORGES: Component. Yes.

JASON: Copy this out. Okay.

GEORGES: Should see the text. So, let's maybe just add something else, which is showcase a new property. So, this is documented in the package. But showcase component = text. Because we want to they will them it's text. Okay. That helps.

JASON: Ahh. That's cool.

GEORGES: So, now you have two forms, which are the body and the heading with the fonts that you selected.

JASON: Got it. If I want to do the same thing ‑‑

GEORGES: For size.

JASON: ‑‑ I can go with size. And this one would be fontSize.

GEORGES: Exactly.

JASON: Great.

GEORGES: You're good at that, huh? It's like you've always used it.

JASON: Okay. So, we've got the sizes and then what else do we have in here? We've got our weights. So, we can come back ‑‑

GEORGES: Exactly.

JASON: ‑‑ and copy this. And say weight ‑‑ and I screwed that up. What is it?

GEORGES: Yeah, it's just a key. It's just a key.

JASON: Oh, the key. The key. fontWeight.

GEORGES: We can see the 900 is ‑‑

JASON: If I ‑‑ I'm not gonna worry about it.

GEORGES: So, you can tune all this stuff. You can tune all this stuff up, but this is how it looks by default.

JASON: Yeah, this is ‑‑ I mean, this is pretty good. I do think ‑‑ I think this is too much. So, let's ‑‑ I have a whole thing for this. So, let's just use the system font. Oh, no, it didn't work. Copy/paste block that we can get in here. Let's get ‑‑

GEORGES: Always a good source.

JASON: ‑‑ this one. All right. So, here, I'm gonna drop this in. And if I refresh ‑‑ oh, so, it doesn't pick up the ‑‑ I would need to, like, add styles if I wanted it to pick up the font family and everything.

GEORGES: Yes, exactly.

JASON: Got it. So, we won't worry about that now. But this will be a little bit easier to look at, I think, than like Comic Sans and a San Serif. All right.

GEORGES: So, now, maybe before we move into the button, because that's what you want to do, right?

JASON: Yeah, I think a button would be good.

GEORGES: Maybe we spend some time to improve the documentation style because it looks a little bit dummy, and I'm gonna show you a bit more. So, let's create in the infrastructure, let's create a layout for our documentation so that it looks better.

JASON: Okay. And is there a ‑‑

GEORGES: Exactly. Layout. That's fine. And then in source, yeah, you can create just layout.tsx or jsx, whatever you prefer.

JASON: We'll see how I do with typescript.

GEORGES: So, we need to import React. And we need to import MDX Provider from Mdx‑js/React.

JASON: Always get that wrong. Okay. So, I need to wrap the whole thing, right?

GEORGES: Yeah, so, we're gonna do an export.

JASON: Right. Because it needs to be an actual component.

GEORGES: Yeah, exactly.

JASON: Look at me go.

GEORGES: You can export ‑‑ yeah, export default will work.

JASON: And then do we want to children, right?

GEORGES: Yeah, I don't use it ‑‑ I usually don't use it. I use the props and then get the children, yeah.

JASON: Okay. Okay. So, if I return, then I can move these.

GEORGES: Yep.

JASON: Into here.

GEORGES: That's exactly it. Exactly. And then one thing that ‑‑ just to make it fast, again, we're gonna pick up from the docket React. We're gonna pick up a pre‑made layout. So, we're gonna import from the divRiots docket React something called coreLayout from divRiots/docket‑‑‑ we've got different layouts but this one is the core. And then we can just use it inside the provider. And this thing takes one property. This is really good. Exactly what we need. This takes one property, which is a logo. If you want to have one. I think the logo of your company would be even better.

JASON: Yeah, I think I have ‑‑ let's see.

GEORGES: And it's ‑‑

JASON: I'm gonna have to ‑‑

GEORGES: It's a React component. So, if you copy/paste ‑‑ if you get an image, it needs to be a ‑‑

JASON: Got it. Edit as HTML should let me copy this.

GEORGES: Yep.

JASON: And then come back over here. And we will create ‑‑

GEORGES: No, yeah, it needs to ‑‑ it needs to go ‑‑ yeah, you can do that, but I don't know. We can try. So, we can try.

JASON: I mean, I can also ‑‑ let's see, I could put it up here.

GEORGES: Yeah, exactly. That's what I was thinking.

JASON: Got it. Okay. I think it'll just work. Let's find out.

GEORGES: You need to ‑‑ things that you need to fix some CamelCase, some attribute that needs to be moved into CamelCase. Stroke width. Stuff like that.

JASON: Oh, it's not ‑‑ I thought it would just fix that these days. Let's see. I guess we can find out if it's gonna explode once we get it in here.

GEORGES: Yeah.

JASON: clipRule. All right. Let's see what happens. And then in here ‑‑

GEORGES: In logo, you give it ‑‑

JASON: It was ‑‑ what was it? Logo is ‑‑

GEORGES: Logo =.

JASON: Like that?

GEORGES: Yep.

JASON: Okay. Doesn't like that.

GEORGES: Yep.

JASON: Oh, because I missed this one. And still not happy. What's missing?

GEORGES: Yeah, let's see if it works. So, if we go back to typography now. Yeah, we need the panel back. Yeah, and then what we need now is in the doc, in the typography documentation, exactly. We need to use that layout. And to do that in MDX, you need to export default the layout. So, you need to import it first. You need to import from the layout. So, now this is a little bit special. Exactly. You use the tilde. You're telling to pick up from the root of the design system/layout. Because it's still in source, and we haven't created some export on the root, so, we have to do /source/layout. I think it's called layout.css. And now we need to export layout. And if this is okay, we're gonna have a new layout.

JASON: Let's see how I did with on the fly SVG updates.

GEORGES: Yes.

JASON: Oh, I messed it up. And I messed it up. Let's see here. I have a suspicion that it's something that I did.

GEORGES: Maybe. Let me have a look at the component. Yeah, here.

JASON: Is missing ‑‑ property components is missing in type. So, components, that can just be empty, right?

GEORGES: Yes. Exactly. But I'm not sure.

JASON: And then logo is not assignable to ‑‑ property logo does not exist on type. Am I missing ‑‑ is it logo or is it something else? No, Fred, this is a tool called Backlight that we're working with today.

GEORGES: So, I'm not sure I see a mistake. So I think it's okay. Let's just remove the logo for a second to see if it's coming from the logo. Just remove the attribute. The property. Because ‑‑ and then ‑‑ and so let's just go back to typography to see if it's ‑‑ reload that.

JASON: So, here's our doc.

GEORGES: Read properties un‑defined. Yeah, I think in the layout, maybe. In the layout, in core layout. Yeah. If you scroll down, I think in the layout, instead of picking up the children on the top ‑‑

JASON: Mm‑hmm.

GEORGES: ‑‑ we're gonna pick up the props. Exactly.

JASON: Okay.

GEORGES: And then we're gonna put all the props here, like, with... ‑‑ not here ‑‑ yeah, exactly like that. And remove the children. And because layout doesn't have a doc, it will not show up, and it will not show anything. So we have to check out from the typography that this works. There we go.

JASON: Hey, look at it go! Okay. So, now let's see if we can get our logo back in.

GEORGES: Exactly.

JASON: No. But it's not for lack of trying.

GEORGES: So, what is wrong? Because it looks good.

JASON: I could have sworn that with these, it was ‑‑ I thought with React, you didn't change the SVG stuff. Let me try it and see if it does what I think it does.

GEORGES: Yep. You need to go back to typography. Actually, what we can do ‑‑ you see the pin upstairs? The pin next to the doc? Yeah, if you that, it's pinned to the typography, so when we go back to layout, we can see the results immediately.

JASON: That's nice. Okay. So, I have definitely broken something because we're not getting our logo.

GEORGES: Yes. Which is a shame. Because it would look cool. Do you ‑‑ try to wrap it around a div.

JASON: Like that?

GEORGES: Yes. No. Wow, that's annoying.

JASON: It just doesn't like it at all. Functions are not valid as React child. Oh. Oh.

GEORGES: Oh, yeah, yeah, yeah, yeah, yeah, yeah. This should be logo.

JASON: Heyo! All right. So, let me roll back these choices that I made. And what? Oh, I missed a thing. There we go!

GEORGES: Look. That's super cool.

JASON: I love it.

GEORGES: So, now we can go back to typography because I want to show you a little, a cool little thing. And in the doc, so, we have these two lines that applies the layout, the import, and the export.

JASON: Mm‑hmm.

GEORGES: So, take those two lines and put them into colors as well so that the two ‑‑ the two pages have the same layout. Did you save yet?

JASON: Oh, yeah! Look at it. So, now we've got some ‑‑ we've got, like, consistency. Our design system has a little bit of consistency to make it feel good.

GEORGES: And if on the top end now, if you go to doc on the top, top end, you have this switch with review ‑‑ the top end. Yeah, exactly. Doc.

JASON: Ooh.

GEORGES: And now you have as if it was like a website.

JASON: Oh, and you know what this means? Watch. We can go in here and I can go into here, and I'm gonna add a, like, layout.scss, and I can do something like ‑‑ we'll go font‑family: And lwj‑text‑font‑family‑default. Do I do default or body?

GEORGES: I think it's body.

JASON: Okay. And then I'm gonna pin this while I do it. That should ‑‑

GEORGES: And now you need to import it on the layout TSX. You're getting good at that, huh?

JASON: A hazard of this job is you got to pick it up quickly. Check it out. We can see our weights actually show up and we can see things are doing what we want them to do. We've still got our heading sizes.

GEORGES: Yes.

JASON: And we can do something like if I go in here and say we're gonna set our, let's say H1, H2, I think that's all we used, so let's stop there, and say font‑family will be lwj‑text‑font‑family‑heading. Now we're using our design system to build our design system, and that's pretty slick.

GEORGES: Exactly. That's what you want.

JASON: I love it. I'm into it. I think this is great.

GEORGES: So, let's bump it a notch and build a component, maybe. We could ‑‑

JASON: Let's do it.

GEORGES: For the sake of the audience, maybe, we could build, like, elevations, you know, spacing tokens, border radiuses tokens, we could build a lot more tokens than that, I think, but given the timeframe.

JASON: Yeah, we've got like 20, 25 minutes left, so, let's get a component. Because what I really want to see is how we put this into practice.

GEORGES: Yes.

JASON: Right? Like I want to use this design system.

GEORGES: Yes.

JASON: So, I'm gonna create a button.

GEORGES: Yes.

JASON: All right. Now, if I go into source ‑‑

GEORGES: Yeah.

JASON: ‑‑ my assumption is I'm gonna create button.jsx.

GEORGES: If you want.

JASON: Okay. I'm gonna import React from React and down here, I'm gonna export default function Button and will return, do, like, a button, and that button's gonna need some text. So, I'll give it a text prop. All right. And so this is all just standard React. I'm just doing ‑‑ this is me going on my gut. I could be wrong.

GEORGES: Yeah, yeah, yeah.

JASON: I'm gonna give it some default text here. And that gives me a button. I'm gonna unpin this.

GEORGES: Yes.

JASON: And then ‑‑

GEORGES: So, now if you want to see it right away ‑‑

JASON: Mm‑hmm.

GEORGES: ‑‑ what I like to do is do stories. So, we can go into the stories and then you can create, like, a ‑‑ exactly ‑‑ .stories.jsx. That would be special.

JASON: Okay.

GEORGES: So, this is pure storybook.

JASON: Okay. So, I don't actually have a lot of familiarity with Storybook. I've used it ‑‑

GEORGES: That's fine. Import React again. Unfortunately, we have to do that.

JASON: Import button from ‑‑

GEORGES: Exactly.

JASON: ‑‑ button.

GEORGES:  ../srs.

JASON: Oh, right, because we're not in the source folder anymore.

GEORGES: Exactly. And then we do export. We do export const and then you give it a button primary, for example. For example, you call it ‑‑ =. And then you make a function. Exactly. And then you return whatever you want. Which is your button.

JASON: Okay.

GEORGES: And if you go back to stories on the right‑hand side.

JASON: Stories?

GEORGES: Exactly. You have it.

JASON: Wow, look at that.

GEORGES: And you can create multiple of them, if we want. You just copy/paste, like, export const and just make secondary ‑‑

JASON: Okay. And then in this button, I'm going to ‑‑ let's add a color key.

GEORGES: Exactly.

JASON: And we can say ‑‑

GEORGES: Secondary.

JASON: ‑‑ secondary. All right. And so then I'm going to come in here and we've got a color which will default to primary.

GEORGES: Exactly.

JASON: And we can do, like, a style and we'll do button‑color. And we'll set that to color. No. We're gonna set that to ‑‑ aha. Lwj‑color like this, right? Because then we can go and style it up.

GEORGES: Yep.

JASON: And actually use these tokens that we created in our design system. Look at us go. We're design systeming. Okay.

GEORGES: For the ‑‑ you're gonna do that. I was wondering ‑‑

JASON: Is this gonna work? Because then I can go button, and my button is going to have a background‑color of button‑color, right?

GEORGES: Yes.

JASON: And so that way it kind of defaults. And I guess what I could do is I could actually go button‑color is going to default to lwj‑color‑primary. And then that would default if this was unset, but because I don't want to do any logic to, like, show or not show this ‑‑

GEORGES: Yeah.

JASON: I'm going ‑‑ I'm choosing not to do that. So, instead, I'm gonna leave this out entirely. And then let's add a little bit more. We'll do, like, a font‑family of lwj‑text‑font‑family‑heading. And let's do a font‑size. Lwj‑text‑font‑size‑big. We'll add some padding of let's call it 5 on the top and 1 on the left and right. And then what we need to do here is ‑‑

GEORGES: Import.

JASON: ‑‑ import our buttons. Oops. Button.scss. And I need to add a class name. Of button. Okay. So, that got us part of the way there, but I screwed something up.

GEORGES: Styling of the background. Because I think that's the missing part. In button.css.

JASON: Oh, right, because I never actually used it. Background color?

GEORGES: Yeah, maybe ‑‑

JASON: Default it? It's not picking up my background color.

GEORGES: Yeah, maybe the best would be to set the background color straight from the style. I don't know.

JASON: Oh, interesting. Maybe it's not ‑‑ oh, maybe I do need to set it as a default. Right? And then we ‑‑ actually, let me go back here and then we'll do that again. So, we'll start here. We'll say "red," and then it just doesn't like that color?

GEORGES: No. Oh, you know what? I think the design token is not imported so they are not set.

JASON: Yeah, of course, that would cause the problem. So, do I import them here or import them above? Like how do you manage this?

GEORGES: So, here, I definitely ‑‑ I like to import, like, CSS custom properties in CSS. Because you stay in the same realm. When you do CSS in JS then it's a different story. But here, you can do that.

JASON: Like that? No, token source.

GEORGES: Yeah, it's actually tilde colors.

JASON: Colors.

GEORGES: Because the folders are more virtual than ‑‑

JASON: Like that?

GEORGES: Exactly. Yeah.

JASON: Could not find style sheet to import because I called it ‑‑ that's right ‑‑ source colors. Colors/src/colors.

GEORGES: Yeah, it looks good.

JASON: Am I getting that syntax right? I haven't used SaaS imports for a long time.

GEORGES: Yes, let me try to figure it out. Maybe try dot dot/to see if it likes it better. /.. again. Nope.

JASON: There it goes. Then we can do another one. Oh, wait, no, what am I doing? I'm in the wrong place. I want to get into my stories.

GEORGES: Exactly.

JASON: And I want to do my secondary button, right? And then ‑‑

GEORGES: Yeah. You had it.

JASON: And secondary. Look at it go! Oh, that's cool.

GEORGES: You can maybe remove the border because it's really ‑‑

JASON: Oh, yes.

GEORGES: It's really ugly this way.

JASON: We'll go with a border of none. And we'll do a border radius to keep up with the rest of our design of something like that.

GEORGES: Exactly.

JASON: Look at that. That's a nice looking button. I'm happy with that. I think the contrast is okay.

GEORGES: And the 9 points ‑‑ if you ‑‑ on the right of button secondary, you have the 9 points. This gives you all the stories together.

JASON: Oh, that's really slick, because then if I start changing stuff, I can make more choices. And this is, like ‑‑ this is, I think, the strength of building a design system is, like, after you've done this, because then I can go in and I can say something like, you know, we can do a size and by default we'll go normal, right? Or maybe default is big.

GEORGES: Yes.

JASON: Then I could go in and I could also create, like, a small button. Right?

GEORGES: Yes.

JASON: And so in my ‑‑ we'll do a size small. And in our small button that immediately shows up here, we can say ‑‑ actually change these so that they match with what we're saying. Button primary to secondary, small. And then if I go into my button.jsx and we get a size of big, then I can do something like ‑‑ let's add a button‑size. And we'll do lwj‑font‑size, and we'll do size. Right? And then if I ‑‑ nope, that's not it. This is it. That's right. So, then when I save this, that will auto format for me, and I can come in here and set a button‑size of we'll say, I don't know, 12px. And we can do the font size instead of button size. And now what we should see is that these will ‑‑ did I get that right? Hold on. Let me look at my typography. Text size, go it it wrong. That's why it's not working. Text size. And now if I go to my stories, we should get ‑‑ did I actually save this?

GEORGES: Text size or font size.

JASON: Size. Text size. That's right.

GEORGES: Font. It's text font size, no?

JASON: Oh, did I screw it up again?

GEORGES: I don't know. I think ‑‑

JASON: Text size. Okay, so these are the.

GEORGES: Text size ‑‑

JASON: Oh, but there is no small, is the problem.

GEORGES: Ah, that's what we're missing.

JASON: Okay. So then if I go back to my buttons and I go to my stories, we should see a small one, which we're not seeing because ‑‑

GEORGES: It doesn't want to.

JASON: It's arguing with me and it's arguing with me because I did something wrong. And the thing that I did wrong is what? What have I done, chat?

GEORGES: Because it looks exactly button size. Text size small.

JASON: Text size small. Right? And then if I change this ‑‑ just to make sure that it's picking up my changes, I'm gonna color red. No, that's right. So, it is ‑‑ oh, I know what it is. No, I don't. I don't know what it is. (Laughter) Lwj‑text‑size. Button‑size.

GEORGES: Size should be small. Otherwise it's big.

JASON: Yeah, it's, like, picking up a ‑‑ got a size big. Size big makes sense. Right? And then when I go into my story ‑‑

GEORGES: Size small.

JASON: Pass in the size.

GEORGES: Yeah, it's not picking it up.

JASON: Huh. Maybe something is overriding my text sizes, which is entirely possible. Maybe I did it in my layout.

GEORGES: Not on the button. On everything. No, I wonder if the custom properties div apply perfectly from ‑‑

JASON: Yeah, I didn't change anything. Okay. So, something I'm doing with that isn't working, but that's okay. You know what we can do when we have mistakes? We just hide them entirely. (Laughter) So, I'm gonna go into my size here and I'm gonna get rid of the button‑size. We're gonna leave that out because it's not working and that's not really what we're here to learn. I'm not gonna debug React today. So, I'll leave out the size altogether. And now in our stories, we've got two ‑‑ we've got a primary and a secondary button. That's enough for today.

GEORGES: Okay. That's cool. So, now I propose we do a documentation of it.

JASON: Okay.

GEORGES: And so you can copy/paste the documentation if you want.

JASON: Okay.

GEORGES: That will spend some time.

JASON: All right. And this one we're pulling in button.

GEORGES: Exactly.

JASON: We've got the layout. We've got a button. And for this one, I assume I'm not doing the same thing, right? It's not a styleShowcases like this?

GEORGES: Exactly.

JASON: Okay.

GEORGES: So, the good thing is very basic. We can, like, we can just import the button. You didn't, I think, import the React button. We can just import the React button. Exactly. We should just have the button in the middle of our documentation, as soon as we save. Exactly. Perfect. So, we can do a few things here. So, you can have some code example, how to use it, or you just ‑‑

JASON: Oh, wait. What have I just done?

GEORGES: I don't know.

JASON: There we go.

GEORGES: And then you can have ‑‑ you can triple code ‑‑ triple back code and do some coding example, if you want. We're gonna get that.

JASON: Okay. So, we got some triple ‑‑ is this the kind of thing? Oh, look at it go. You give it the type.

GEORGES: Exactly. So, that's cool. And what will be nice is if we have a little playground of our button.

JASON: Mm‑hmm.

GEORGES: So, to do this, we can import a new component helper from the divRiots dockit‑react. And then is it ‑‑

GEORGES: Playground.

JASON: Playground. Okay.

GEORGES: So, then we can call playground. Exactly. And we give it a prop that is called scope. And this is to pass the button. So, we're gonna = ‑‑ yeah, double. Double brackets, I think.

JASON: Oh, gotcha.

GEORGES: And then ‑‑ and another property called code, and then we can put some code inside it, but in text.

JASON: So, like what I just did?

GEORGES: Exactly.

JASON: Okay. Then I can do something like button. We'll say text = test Me.

GEORGES: Exactly. And so now it's picking up the new lead that we added.

JASON: Okay.

GEORGES: Just give it a second.

JASON: Okay. So, we've got our ‑‑

GEORGES: Exactly. Now you can play with it because the code underneath is editable. It's a true playground. So, you can even test your ‑‑

JASON: Wow, that's really nice. So, then I can go ‑‑ what did I call this? Color?

GEORGES: Yes.

JASON: Wow! That's slick! I love it!

GEORGES: So, it's getting there. Maybe you want to give it a few headers and just to make it cool. And then we have other helpers to, like, show prop tables, but I think we don't have a lot of time to look at this.

JASON: Yeah, let's start ‑‑ let's call this good enough. Let's ship it and use it.

GEORGES: Yes. So, one thing that I want to show off, because we talk about the collaborative aspects with the designers and ‑‑

JASON: Mm‑hmm.

GEORGES: And the UX writers. So, here, this is ‑‑ you've done everything here on ‑‑ you've done everything here on the browser.

JASON: Mm‑hmm.

GEORGES: And so there is no NPM install commands or git commands. You do this right here. The ability to connect to git so everybody can actually contribute, pull a request from there.

JASON: Okay.

GEORGES: But also on the top end, you have a yellow outline button with a person ‑‑ exactly. This. This creates a link into your clip board. And if you share this, people will see exactly what you have right now and that you are working on.

JASON: Very cool.

GEORGES: So, we haven't worked with the branches, but once you plugged it into git, you can create branches, so, you can create new components. Just click that button and then share with the designer and have an interactive discussion about what you are doing right now.

JASON: Mm‑hmm.

GEORGES: And this is ‑‑ this is ‑‑ this changed the game in the sense that you don't need to deploy a version of that to have a discussion. Deploy into a website or wait for the CI to build something and then share the link.

JASON: Right.

GEORGES: As you code, at this moment, you want to share this and you want to have an interaction and a discussion, and you can do it right now.

JASON: That's very cool. And I just dropped that link into the chat for anybody who wants to take a look. Okay. So, with our remaining 7‑ish minutes, can we ‑‑

GEORGES: Oh, wow.

JASON: Can we deploy this and get ourselves ‑‑

GEORGES: On the left‑hand side, you have a little box. The left‑hand size, package. Now we can release it to NPM. So, this, we're gonna use those names. I don't want if you want to change those names but you can.

JASON: Do you want it to be prefixed like this?

GEORGES: It has to be on the free version. You are limited to this scope.

JASON: Got it.

GEORGES: So, you can rename these. Yes.

JASON: Okay. This is fine. This is gonna be great. So, we're gonna call it that. And then ‑‑

GEORGES: You can rename this as well.

JASON: Oh, cool. Okay. So, let's call this one Learn With Jason. Okay. There we go. All right. And then I can ‑‑ this will be fine.

GEORGES: Look at the workspace. I think something went south on the ‑‑

JASON: I think I just needed to refresh the page. So, there we go. And then we can take that out of there. Save it. Okay. Then I go out here.

GEORGES: Yep.

JASON: Hey, that looks good. I'm happy with that.

GEORGES: Yep. And you press "release."

JASON: Wait, is this really all?

GEORGES: Yes.

JASON: What? (Laughter)

GEORGES: So, give it a second. It's building the NPM package.

JASON: Okay. Okay. And while that's happening, I'm gonna go over to Codepen and I'm gonna create a new pen and I'm going to go in here and see if I can ‑‑ where are my dependencies? I'm gonna just get a dependency in from here, which is going to be this one.

GEORGES: Exactly. You can click on this. It gives you ‑‑ it goes to NPM.

JASON: Don't you lie to me. Oh, it probably has to update, doesn't it? Okay, fine. I'm gonna do it locally instead. We're gonna just make a new ‑‑ we'll call it, like, a Backlight test. What I'm gonna publish is the Backlight setup not this repo. So, I'm not gonna worry too much about what it's called. I'm gonna git init. And then I'm gonna NPM install the package that we just published.

GEORGES: Yep.

JASON: And off it goes. Okay. So, let's open that up. And then inside here, what I should theoretically be able to do is create, like, a src/index.js. Did that work? There it is. And then if I import, can I just get, like, button from Backlight? Does it just work like that?

GEORGES: No, because we didn't specify all these root exports, so we need to do manually/button. And actually dist/button. Exactly. You can get away from that, but as we went really from scratch ‑‑

JASON: So, I'd be able to do something like this. Whoops. And I'm not gonna be able to run this because I didn't said it up as a React project, but I could do, like, you know button and the text ‑‑ or wait. Button. And the text would be, like ‑‑ and this is gonna come in styled, right?

GEORGES: Yes.

JASON: Okay.

GEORGES: We just ‑‑ with a caveat that we need to load the CSS that we created.

JASON: Hmm.

GEORGES: Just as an install.

JASON: So, it would be Backlight and then button/dist.

GEORGES: Actually, just write out the root. We can go style.css.

JASON: Oh, okay. Okay. So, what I ‑‑

GEORGES: Yeah, because this is using Vite and that's how Vite will export.

JASON: This is using Vite. Let me go back then. We have three minutes. I can do this. I'm gonna remove our Backlight test. I'm gonna NPM init vite. And we're gonna call this Backlight test. We're gonna use React.

GEORGES: If you do this in three minutes, that's impressive.

JASON: We're doing it. It's happening right now. Here is our app.jsx. Great. So, what I'm gonna do is grab these bits out of there.

GEORGES: Yes.

JASON: All right. And then I'm going to replace this button ‑‑ this is perfect. I'm gonna replace this button ‑‑ actually, let's watch this happen live because I'm actually really excited about it. So, the first thing we're gonna do is we'll just use the Netlify CLI to start a development server. And here it is. Okay. So, here is our count. It's unstyled. So, I'm gonna come over here. I'm gonna get this one. Okay? There is our button. If this works, I'm gonna be so happy. Okay. So, here's our button. All right. And then I'm going to ‑‑

GEORGES: You need to change ‑‑ yep.

JASON: I'm gonna change it from count is count. We're gonna set this as text instead. I should have done it as children, now that I'm thinking about actual usage, but whatever, you learn. And theoretically speaking ‑‑ what happened? Does not provide an export named button. Oh, because it was a default button. That's why. No. There.

GEORGES: There you go! (Laughter)

JASON: Look at it go, everybody!

GEORGES: How cool is that?

JASON: This is, like ‑‑ okay, being able to pull in a design system and just run is, you know, anybody can build this manually and set up all these things, but what's really interesting about what just happened here is that you've got this set up in such a way that it is ‑‑ this is, like ‑‑

Aha! Behold, my bucket.

JASON: Exactly. Exactly that, everyone. Look, it's showing some stuff I didn't do, which is putting all of this in here. And then if I wanted to learn more about this, I could add a link to, like, my docs which would bring me out to ‑‑ if I make this bigger so I can see what's going on. It would bring me out to here.

GEORGES: Yeah, this is ‑‑

JASON: Oh, wait, that's the wrong thing.

GEORGES: No, no, it's good. You will style the ReadMe.

JASON: We need to look into each of these. Then I can see stuff and look how it's working and do this test to, you know, set these things up.

GEORGES: Yeah, exactly.

JASON: This is wonderful. This is really, really nice to work with and to kind of create, like, a quick iteration. I feel like there's a lot more to dig into that we didn't have a chance to get into.

GEORGES: Yeah, there is a lot.

JASON: Branching and there is a whole tab we didn't look at.

GEORGES: Yeah, if we had more time, we could actually build the new branch with a new evolution of a new version of the button. And we could actually NPM link that working branch online to your project.

JASON: Mm‑hmm.

GEORGES: So, you don't need to re‑release to see the new design system in your app. As you code online, it would update your app because it will have an NPM link to that branch that you're working on.

JASON: Very cool. I mean, this is great. Okay, so, if somebody wants to learn more, where should they go for additional resources?

GEORGES: Definitely backlight.dev. There is a lot of stuff. The documentation and also the DS mastery, which is a place where we put some learning about how to build great design systems. And we have a Discord where we are 24 hours there, and we love to discuss the design systems components. And in all technologies, Backlight supports Svelte and Vue and React, and, actually, 50 other ‑‑ 50 other frameworks. So, you can really build the design system the way you want.

JASON: That's great. What's up, Alex and friends? You came just in time for us to go raid somebody else because we are just wrapping up here. Oh, thank you for the sub. What we are going to do is ‑‑ from here, we're gonna do another shout‑out to our captions. We've had Jordan with us all day from White Coat Captioning writing down everything we've been saying so that you can follow along in whatever format you prefer. We also have that made possible by our sponsors, Netlify, Fauna and Auth0, all of whom are kicking in to make this show more accessible to more people. So ‑‑ oh, there is a question, actually. That's interesting. If you are building these out, is it you could create one per framework you wanted to support? Or is there a way to, like, do a multi‑targeted export?

GEORGES: Yeah, multi‑targeted is supported. You can create, actually, the button, you can create it in Vue. Vue, React, and Web Component in the same package and then you just document different ways of using it. Little story, the landing of Backlight is actually built with Astro that I think you know. And it's built with Astro with the Backlight design system, which is more for showcase. And every piece of the landing that you see of backlight.dev is actually built with ‑‑ some are built with Svelte, others with Vue, others with React, others with Web Components. This is built into multiple technologies and put together in astro.

JASON: Very cool. I love it. So, that's gonna be it for today. Make sure you go and check out the schedule for the show. We've got so much good stuff coming up. We are back tomorrow with a Friday episode. Natalia's gonna be here to teach us about distribute databases. Wire gonna get into MongoDB. Head over to Dusty Domains you can ship any project, as long as you deploy it to Netlify, we're gonna donate to charity. We have I think six companies donating. Every site you submit is worth $300 donated to a charity. Make sure to check that out and get it done. With that, we're gonna go find somebody to raid. Georges, any final words for everybody as we wrap this up?

GEORGES: I haven't thought about any, but thanks very much. Thank you very much for having me. It was super fun. And I'm amazed how fast you picked that up.

JASON: It was a lot of fun to learn with you and, you know, I appreciate you taking the time. So, yeah, chat, stay tuned. We're gonna go find somebody to raid, and we will see you all next time.

GEORGES: Bye‑bye. Thank you again, Jason.