Now Presenting: Core Design System Figma Community Download!

Hey everyone, it's Ritzy back again. I know I've been away for a little while, but to be honest, I've actually been prepping for a new position in my life, or a new situation that I don't want to get into too much detail. But in that situation, or in the new movement, I realized there are a lot of things, a lot of skills, and a lot of things I've gone through over the time, and I wanted to make some transferable assets for any kind of new move or new business or new endeavor that people partake in. That being said, I want to show you guys today, so let me get into it. So now if you go to Figma Community and you search Ritzy, you can see my profile. Let's go to Ritzy the Creator. This is Ritzy the Creator. And you go to Ritzy the Creator, you will see, uh, two things: the design process template, which I've gone over and used before, and this is perfect for any type of new projects or any kind of really full, full features you're designing. So complete new projects are full features. Or you can see this core design system. Now if you go to the core design system, you can see that It's actually a design system covering a wide range of components. I wanted to let you guys know that it existed and talk about the roadmap for it and things like that. So the main purpose is it to be a basically a themeable design system that you're able to quickly take and update and now be ready to do work for a new company, a new business that you can style. And I really want to show how, how how this works. So I'm going to create a new copy, and we're actually going to recreate the Delicious Design System, which is the design system for Wheat. So let's start off with updating the name— Delicious Design System. We can remove community. First thing, you may want to update the, uh, cover, but let's move this to the right file. Okay, so initially there's some notes— how to theme it, how to use it— and it says here the first thing you'll want to do is change these textiles or any of these styles to match your, your brand, your product. Now I already have some work for Wheat, so there is kind of an existing design system, and let's take a look at it and compare. So So you can see here we have multiple libraries. We have the Delicious Design System components, we have the Delicious Design System templates, and I believe there's the Delicious Design System pages. So let's go to the components, and we can actually open up this and the templates because you'll see the new design system actually incorporates both of these. So on the templates, you can see there's a top-level page. It's only for mobile. There's a child level page, and then there's a form also for mobile. So all this will not be necessary in the new design system because we already have, uh, in, in this we'll be able to delete that library completely because we have that in the new design system, which I'll show you later. So on the component side, you'll see there's colors, fonts, illustrations, images, layout, typography. Those are all some, some general styles, global utilities. Some of them will have to port over, some of them we don't. Even looking at the typography, there's a desktop heading 1, a paragraph. You can see it's a very lackluster design system overall. App header avatar, which has images in it, badge counter, breadcrumbs, button set, which has button and button category cell comments. So there are certain areas in here that'll probably still be necessary And this is actually one of my better design systems because you can see there's a lot, but it's also— it's missing a lot of things like site header, footer. So it's— it was namely created initially for mobile, the mobile app, which does exist. So some of this stuff has gone through design and there's been some, some design with it. So some of the new things we will have to update to match according. So going back into this, let's go into our textiles. And we're gonna update these styles to match what exists. And all of these will push to all the components throughout the library to match. So I know for this I use Poppins, so I'm just gonna update these all around. I'm not huge on the size. I think the size is pretty solid, but if I did want to go through and update like any more of these, I could. But if I wanted them to not be bold or I wanted them to be all caps or anything like that, I'd be able to update that here. And you see, I just make it a quick copy Copy paste. Now the body text. Cool. It keeps the underline. I wasn't sure if I was gonna keep that underline style, but it looks like it does. The labels, which are actually used for a lot of the components, will still get these inherited styles. That must have been a pretty heavy one. Let's go back to this. Double-check, make sure that I got it. Yeah, I'm curious to how long this will take in total. So that's all the styles. Now we can go— we can close these, minimize these, so you can visually see what else is there. Now we have colors, we have brand primary, primary dark, primary light, accent 1, accent 2, which you can always add more to these. But for ours, we have a primary— there's a white, black, gray, which also is incorporated. So let's update our primary color. We can add a primary dark, just make it a darker shade. There we go. Same for primary light. Oh, actually, you can do this and create it that way. So if you add two colors, let's say it's 40%, and our primary dark is this plus black at 40%. Perfect. And no accent colors. We do have semantic colors which also carry over, and those will be used for our, um, our error states, our success states, things like that. Let's look at our colors here. So dark gray, there is a gray, looks like it's 8s across the board. There's— that's just our regular gray. We have a light gray which is all C's. It's the same as this, so I actually rather keep my light gray the way it was. Ease. Keep this as C's. Keep this as 8's. Did I undo our brand color? Nope, everything's still good. Now we'll go back, close the grayscale, close the brand utilities. That's our overlay, fine, all good. iOS, those are colors from iOS, uh, semantic colors. So our fail Fail dark. We have success. You see, I just called them green in my other style, but truly they are success and fail. Then we have warning, which I'll use orange. There we go. And then images, if you wanted to change it, you have user images, which are woman 1, 2, 3, 4, man 1, 2, 3, 4, uh, products, product 1, 2, 3, 4, which can be used as placeholders or anything like that. So now that we've done that, that's actually passed to all of the components. So if you look at the branding, you can change the company logo. I'll do it another time or after. But you can see our brand is updated. Brand dark, brand light, all of these. Our fonts, they've all changed. So if we need to pass this to developers for them to see it, they've all been updated. The grid, you can update this according— it doesn't really do anything, but this is a good reference for when you're doing design. Icons has some icons already in there. Images, those are images. Device accessories, so these will be used for prototyping and anything like that. So it's like regular iPhone stuff, um, anything like that if you wanted to keep it in one file. But now you can look and see here, um, at the atomic level we have BadgeCounter. Now this is actually separated, and I was thinking about consolidating this into one page. These are all things you would almost never use by themselves. So BadgeCounter, Lockup, maybe Link, possibly Media is just an image which is used in bigger components. Pagination used in data tables or any kind of lists. Status label rarely used alone. Tags, maybe thumbnails also. So most of those are never used alone. That's why they're in the atomic structure by themselves, like atomic atoms. So I was thinking about consolidating these into one page because you almost would never use them. But your components, these are what you actually would use. This is your avatar, and if you wanted a different placeholder image, you might use that, which we actually can do. Let's see, limited visibility and an avatar. So I hide the limited visibility. Okay, so this should actually be this woman one and limited visibility. Should be something else. Now I actually have a placeholder image for, for wheat that I commonly use, so I'm going to update that. So now every time I want to use the placeholder image, it will use that app. I think I call it avatar placeholder. Boom. So now every time there's a placeholder, it'll use that. And then I'm going to update that on the other Settings as well. And what I probably could do is copy the, copy the style. So I'll do that. Command— I think it's Command Option C. And then Avatar. Woman1. Yep, so that pasted it. Command-Option-V if you were interested in what that was, and then go down there, woman1. So now I have those, they've all updated. If I don't want that, uh, grayscale outline or anything like that, I could always take that off, style it according. Breadcrumbs, solid button set. Okay, so here's a big one. If you notice, my buttons were different on my original design system. So if I go to the button set area, I've got the buttons, they're round, secondary looks like that. And then I can update these here, which should pass to all of them. Now if I go to this, I just press Enter one time, I can actually update these in the mass. Boom, just like that. And to be honest, that's most of them. Now, oddly enough, some of those variables did not pass up. Yep, it just took a second. They passed here. Is my button black text? My button's black text. So I'm gonna take all my primary buttons go to the styles where it says white, make them black. And it takes a second because it's going to populate everywhere. Boom, there we go. Everything. Now let's compare in a second. Did it pass all that? And I can also style like sizing and things like that if I wanted. And you can see here, I at this time, I used to use variants for icons. Now those are just props. So if I wanted to use a button, I actually would just use ButtonSet, drop it in. I can change it to auto or inline. I can go into the button and then say I want an icon on trailing, leading. I can say I want it to be a large button. I can say it's the hover state. I can say it's the disabled state, whatever I want to do there. Oops, a secondary button. And I would always just use this button set. And say I ever wanted to change it, right, I want it to be 2 buttons, I can just easily add a second button or third button in the layout. Let's continue on. My content switcher— now this is different. I want to change these tabs to match. You'll see my normal content switcher looks more like this. It's almost like two pills, so I can change that. When it's active, it's black, and when it's not active, it's not. This is my active. I'm going to change this to black. Go inside there. I'm going to make this white. This is the inactive tab, which looks white outlined and gray. So more like that. And then this is the hover state for it. It's still going to be rounded edges, just like that. And you can see here there's a background on these, which I don't want, so I can just easily remove. And I can separate them. Same for this, remove the background, and it passes through to all the other selections, as you can see. Same for everything else— divider, filter pills, loader. You can update your, your loading icon if you want. Notifications, you see the colors change, the buttons changed, progress indicator buttons, the colors changed. Very little effort from these. Tab highlight, same scenario. Tooltip solid. And then I have my form. So depending on how I want to do my, my inputs, if I wanted to do a whole outlined input, I can change this input. There's also helper text, there's error message, which automatically got the the up— the text from the label. It's got the color from Semantic. All of it was passed through. And say I wanted to make these more, um, outlined inputs, I could just change this to all, and then it would update all of them to be outlined. Now me, I like the underline view. I'm, I'm good with it. Let's look at our checkboxes. It's a similar situation. It's got like a hover state, it's got all these things. Checkbox looks cool. All very— like, now I'm pretty much done unless I want to change like some, some backgrounds or something like that. I've got a form, I've got a date picker, dropbox, uh, dropdown list, file uploader, which is kind of an input. Uh, here are all the form inputs. So if I ever wanted to add a form, I can just do do this and style them according. And these are made from those form elements. So you can see here's an address input, a date input, a password input, a phone input. There's a select input, there's a text input, and a textarea input. So I consolidated all those together. There's an incremental or quantity input. You can change that name and fix that. Locale, if you have that, or language. Same for radio set. Radio set are the round versions while checkbox is the square. Checkbox is usually allows for multiple selections while radio is an only. There's a search, there's a slider, there's a switch toggle. Does it use our success color? It does. And now we get into some of the more advanced. So these are, those are regular components that are pretty much on every design system. System. And this is kind of where some of the, the value comes from. So you have an acknowledgement bar, you have an accordion. These are areas that are not in most design systems. You're starting to get into bigger, like, organisms. And I've actually— I want to expand here that if you noticed in the beginning, we were looking at the grid, which is way up here in grid and layout. So I was thinking about how you can set max widths in terms of your organism. Say you're doing a design at a, uh, for a desktop or for a tab. Also, you have desktop, tablet, mobile, um, and extended desktop. And so you're going to use these containers or full width depending on the size and responsive behavior. This is where you might actually create different variants of organisms. So the acknowledgement, uh, Let's go to accordion. Accordion, this is pretty solid. You can set the width for however long, however you want it. So let's say here we want it to be 768. We can set that. Oops, I noticed there's a problem here. Oh, that's the problem, right? So we can set that and then we can, uh, make it expanded, and then we can add a component in here. Right now it's a lockup, but let's say we want to add a list. We're going to say it's a link list, no header, right? We can have an accordion like that, just like that. And we want it smaller, we can set it at 540. You know, you can change the, the width according— this starts getting more complex as you get to more advanced components that you need them in certain sizes that have like images that respond differently. That one's a pretty— it was a pretty easy one because you don't need to change the any, any resolutions. App header, same. The card, pretty, pretty similar. But a carousel— carousel can get weird because some of these images need to maintain a certain aspect ratio. They're always squares, they're always rectangles. DataTable, FooterActionBar, and this uses some of the, like, the component, like the button set is in here. So if I actually needed to use this and there's 1 button or 3 buttons, I can change that within the FooterActionBar. Boom, there's 3, there's 4 buttons, it's now full width. If this is mobile, all right, let's say it's 375, and we want these stacked. Oh no, sorry, it's supposed to all be full, and we want to stack them. Now it's stacked, 4 buttons ready to go. The form— this is, this is actually a pretty cool component. So I actually created different pieces so you can have stacked or inline, and 2 components separated, 3, 3 inputs, or just 1. So you see here you have a form, you want to use this form and you can set this, uh, you know, I want this to be mobile. We're going to set it at 375. That's a problem. Uh, fill container. There we go. 375 and everything's stacked. So let's stack that. This right here, this 3, no, we want to stack those and you see it just stacks instantly. You're ready to go. Already have the form. And in this one we're not showing the address like that. Something like that. And really it's just a number of rows that you can update according, because even you can change the input. We don't want the birthday, we want to use a different input, right? So let's use the password input. Let's use the address input. Oh, I never actually used that one. I was pretty excited to see what happened. And you can change those inputs in your form, and you can just add that form and set different breakpoints if you wanted. So here's one specifically that I know I was thinking about the breakpoints in, but this card, right? So I want to use something like this. Say your page is a header, right? I'm gonna group this, group this, Command-G, Auto Layout. No space. I'm gonna throw 2 of this image to the right, image to the left, right? And I can change these texts if I want to change all of these to a smaller size, Heading 3, add the text, something like that. But if I was to expand this, I say this is fixed at 768 and we want to expand it to 1200, let's say. And we fill everything to full width, the images stay the same, but like, it gets weird. I don't like— what if I wanted this to be 50/50? Things like that. Like, I want this to always be 50/50. I would need this image to expand in size. If I start getting weird and I start expanding it, and then do I make this fill and fill, it'll get weird. So I was thinking about having different size properties within this as well. So you can have image left this size, image left this size. So I don't know, something, uh, potentially on the roadmap and to be explored. Nonetheless, you see you can get through the layout and if you really needed to break it, I guess you could break it and size it according. List is another crazy one. So there's a list item for building out your own list. There's a list header that you can style as well. Um, and then I have different types of lists that are pretty commonly used. So you can actually create a contact list. There's an activity list, there's a navigation list, which is pretty much for navigating to subpages. You may use this for settings. And there's also a benefits list. So if you wanted to, a lot of times in pages there'll be like these highlights of, of lists that are in there, and it's just for kind of elements like this. Uh, let's show the example. So say we wanted a Settings, we can call them page settings, and we wanted to style these. This one right here is no icon and it's got a toggle, right? You can style these image— these icons how you want and obviously bulk style them. So let's say we want an avatar for all these and with, um, an icon and label, right? You can style these however you want because of how robust that, um, image— the list item is. There's also site footer. So depending on how you have a footer, you can style your footer according, which will go to your site. You also have a site header, and you can style this according. And you can see it's kind of very similar to how app header is set up, where there's an accessory, accessory item, and you can change this according and take in the style. This is that logo that's pulled in on that logo page. So if we add that or change that, we'd be able to— it'll automatically update and you can style this. Now these site header and site footer are going to be very important, I'll show you later. And then tab bar, this is for navigating and mobile. And inside this I actually have a prop for turning on the home indicator or not. So if you notice, let's say a normal tab bars like this. We go in and it's on tablet, right? And let's say tablet's width is 768. Oops, I realize I did not set a lot of these items to fixed, guys— I mean, to fill container. So now you can see it spreads according, uh, or we're switching it to phone. All right, oops. And we're going to do 375. That's the width for that. So that's our— that's the tab bar and how that can be styled. You can also see the piece has the badge, the badge on it, which you can turn on and off. Now starting to get into templates, some of the templates are modal page and sheet. So these are areas that may have content in them that you might style and use according— you can change an image, you can add text and multiple things. There, there are multiple organisms put together to make something. So in this, if you just wanted to make a confirmation, uh, delete account, and this uses the lockup that was there earlier. So if you wanted to style this to the left, you can do that. You want to make this an H3, not be so big, you can style that, change this. And if you wanted to, you can completely change the whole, uh, content inside. So you could create another component and replace this component. If you wanted to use a list, you can go in here and change it to a list. Let's see, go to a list, link list, and you can change it as according. You see it's all flexible. Pages are pretty cool, and I've used this actually multiple times. So there's 3 different types of pages. There's a responsive page, there's mobile, and then there's tablet. Those are really the only kind of pages you have. And then tablet even has layout, uh, landscape or portrait. And these can align to whatever breakpoints you guys are using. But I've been using, um, the responsive page quite often. So you'll bring it over. You can change the layout, whether you want a desktop, extended desktop. Then once you go inside there, you can turn to show the action bar on or off, right? So if you don't have anything on that bottom, no fixed footer, you can turn that on and off. Um, your content, if you wanted to have content in here, you can choose this and move it. The whole thing like will be scrollable. You'll see it's in this scroll list, which is the size of this page, but you can use this for inserting your content, having that page, having the content already set up, and basically being a placeholder for your new— for all your content in your page. And I can show examples of how I've done this layout in other references as well. And last but not least is the sheet. This is that thing that slides out of the bottom of your, of your page, depending on your action, which could also have a list in it. So right now it's got a navigation list, but it can have some of the other lists as well. Okay, so now that's, that's the layout I've been working on for this, this core design system so that you can take this and now have a solid list of components that you can use for your new endeavor or new project. So the way you get it, like I showed before, you just go to Figma Community, Explore Community, you type in Ritzy, and that's where it'll be. And in 30 minutes, I have a whole new design system that I'm able to lay out and create. Let's try using this. So one more, let's turn this design system on. I'm going to say this is the initial publish. And it's gonna take a minute because it's the first publish. You can see there's 416 changes. In the meantime, I can set up a new file. So, design system template. Actually, we already have one for wheat, our already built. So let's go back to Wix, and we had one recently called User Profile. And I probably could add some things like this, like a cover, like a standard cover that, that can use your H1, things like that. Do we have any of the— so we were using the Delicious Design System here, which we can turn off. And once this is finished— still assembling— we'll be able to turn this on and start using it and start doing a layout. I'm gonna pause and let this finish assembling and then I'll come back. All right, the library just finished publishing. You can see it's just wrapping up right here. And once that's done, we will be able to use it in our files. And it sure is taking its sweet time. I feel like it's been like 3 or 4 minutes. After this, it actually happens a lot faster. And if, if you did want to, you know, kind of move some of this information out, or like the templates or pages, in order to— because you see that you're updating components more frequent frequently, it's very easy to take just a page or just something specifically. Like if you wanted to add just a sheet to what you're currently exist— uh, what currently exists, you'd be able to highlight it, copy paste it, or cut and paste it into another file that doesn't have this information. Then you just change up your linking structure. Some of them use base components, so you just have to update it in one place like you saw in buttons. All right, we successfully published our library, so let's go over here. This was from our first iteration, PI 1.1, the user profile. We're going to turn on our new Delicious Design System. So you can see the difference between the design system components, which only has 118 components and 44 styles, and our new one which has 314 components— oh, sorry, 351 and 65 styles. So if we turn that on, We can go here and let's say we want to make a— this is user authentication, so we're going to create a page in the extended desktop. I'm going to do this super easy. I'm going to add a lockup because that's going to be my, my hero section. We're going to say login. We're also going to update it to be centered. I'm going to turn the button off. Uh, I'm actually going to make this— this initial thing is actually not even going to be a thing. It's going to be one of those. And then I'm going to add a form to this. It's going to be 540 because that's our container. And we're just going to use email and password, so I don't need any of these. Delete. I'm going to change this to one input, and I'm going to call it email. And I'm actually going to change this to a password input, which has helper text on. Password should have— actually, you know, it's, it's for inputting the password. So So I'm not even gonna have the helper text on. And then it'll say login, right? And what I'll do is I'm gonna call this section/body-container. I'm gonna make this component. And now I'm gonna go to my page. My responsive page, because this is going to be for the web. I'm going to take this, no action. I'm going to go into my insert content here. I'm going to change this to local components, extended desktop section, body container. I'm going to move this up to the top, and it looks like you can use some space, so let's add some space, uh, 40 pixels from top and bottom. And there we go. We have a page. If I wanted to have more add flows, I can do more. But if I wanted to turn this into a component and reuse this multiple times, or I wanted to just show the flow or something like that, I would be able to change that and just change components and start using that to build out my page structure. And then, um, as you can see, I was able to put something together pretty fast. So that's what I've been working on recently. I just wanted to give you guys an update on that. And if you wanted to use it, Go ahead and download it and let me know what you think. Alright, until next time, talk to you guys later. Bye.