Figma Design Class Part 4: Intro to Design Systems

So today we’ll be talking a little bit about Figma design systems and design systems in general, and just want to get an understanding and feel free to pop into the chat.

How many of you are aware of design systems work with design systems or just put into the chat? What is your experience with design systems in general? And while you type that out and that can help gauge kind of our conversation as to where we’re gonna swim towards. But for anyone who is new to our organization and listening to our jams with us, we have a QTBIPOC design playlist feel free to check it out, see some of the tracks that we have in there.

Super queer. I love it. Yes. And then just at a high level, as you type in your experience with design systems that’s really going to be the meat of our conversation today. And depending on if we have time or not, at the end, we can go into either Q and a or additional chat. And for anyone who’s new welcome for anyone who is returning welcome back be to celebrate 20, 22 with you.

For those of you who are new QTBIPOC design stands for queer trans black indigenous people of color design, we offer free and accessible design education to queer bipoc communities. And our goal is to help create pathways of education, mentorship, and networking opportunities for our community.

And we have been around now for a little over a year, and we’re just so excited to continue what we’ve been doing with you all. Let’s see real quick. We have more than enough people through the intro. So let me go to the site real quick. Let me just read through some of the comments Figma, Adobe XD using Figma and sketch, heard a Figma I thought it was going to be heavy on design systems or not so much to the study of it.

When I was starting out changing the citing, have basic understand design system, one to learn more, adding ice, Figma love variance address, you just figured out a sketch. Perfect. Let you sketch. Okay. Awesome. Great, great. Kind of turn out with some of your feedback and I also have the comments running and so feel free.

If at any moment you want to ask a question you can either raise your hand or type it into the comment box and we’ll answer questions as it comes across. And then we have awesome Kenny who can help also moderate as well. If there’s any emergencies Kenny can help assist. Thank you, Kenny. Yes.

Awesome. So design systems, let’s get into it. And we’ll first talk about just broadly design systems that are large, and then we’ll go into Figma as a tool. For those of you who are new, we’ll give plenty of time for us to just explore Peck around and for you to kind of learn some of the tools, capabilities, and functionalities as it pertains design system.

And just to preface for anyone who’s new, or haven’t been a part of our Figma tutorial. We have a couple of sessions of our UX nights of the year, dedicated to learning more about Figma. We have previous training of Figma, also accessible on a YouTube. So feel free for intro crash course, we did one last year, early on a year.

And so highly recommend checking that out. And yeah, check out some of our other tutorials on YouTube channel as well. Awesome. So first things first, what are design systems? Design systems are basically what the word implies design system. It is a system and architecture in which we have put attributes of design into it so that we can replicate it.

We can repurpose it. We can teach others. Just think about it as a Bible or an artifact, or just something that you’re able to put information in. Other people are able to disseminate it. And also other systems are able to disseminate as well. And what’s really cool over the past few years especially with the rise of these more native web design applications, such as sketch Figma, Adobe XD is the capacity for our design systems to be dynamic as a part of our designs.

And so way back in the day, when I first started designing for using a Photoshop to create responsive design websites, and there was no such thing as a system, no such thing as a, as a an element that could be updated across a whole system. And so as design systems become updated into the future, the dark ages.

Yeah. You know? Yes. We are. Getting more and more capacity to create dynamic fluid designs and able to make it smart as well, moving into the future. And really one big component piece of it was this need for variability in our designs, right? So as are different screen sizes or resolutions has shifted all the way from big TVs, right?

People are creating interfaces for gigantic TV displays billboards all the way down to the size of somebody’s watch, right? That interface and the capacity for websites, for example, to be able to translate easily between the two spectrums at the ends we’ve created systems to be able to. Unify and create a responsive framework that can adapt and be fluid.

Additionally, to there we’ve gone from having one designer, right at an organization to having hundreds of designers within a product, an organization, maybe even thousands for some larger tech companies. And so with that creating systems in which people can talk to one another. And so here is a couple examples of different design systems that I highly recommend everyone to check out.

Spectrum Adobe’s design system. These are all websites too, that you can check out or should I put the URL here? But if you search Adobe spectrum, you’ll get the website that has their design systems, which has information about what it is, the components icons elements different plugins, different UI kits fonts.

You also have Google’s material design, right? This was one of the biggest ones that come out first many, many years ago that really set the precedent for what is it to create a website as a design system design library. And then we also have Salesforce lightning design system, which is more on the simple side, but it gets the job done with all the different elements.

And so what we’re seeing are these big, big brands starting to create these websites in a way. To also share and disseminate information outside of the company. So oftentimes right. We’ll create all these files and stuff like that within our organization. But let’s say you’re an external vendor or a partner or somebody else creating something for this organization.

How are you also going to get the information? And so broadly speaking, a design system is a, an artifact, a thing that houses all of this information about design of our files, our products that basically somebody else or a system can then take to then extend our work into either additional pages, other products or to iterate on it.

Yeah. Cool. And so we touched on some of the benefits of using a design system and the design system touches on many, many things. And this is all of that, but definitely feel free to add any additional ones in the comments that you can think of, but really a design system. The first thing that it helps you achieve is speed and scalability, right?

Speed. Meaning the ability for us to get from point a to point B and how long that takes. So imagine you are creating a design comp, right? For a newsletter, for example, when you have all the different icons, right? The fonts and even the components, blocks of content and media typography, however, you combine things in a set place.

Imagine how quickly you can come up with stuff, versus having to hunt and create it from scratch. Also another really big one is team unification. So when we. The system that has all of these attributes or things involved, we can essentially bring organizations, people together to create things together in the shared language.

We also have potential to improve collaboration potentially improving transparency across system, right? Because we have essentially created this language. And at the same time, thinking about a website a website is live, it is always on. And so using that in a way to create these systems, we have now something that everybody can see, right?

Not just people within our organization. And then lastly, something that I think is really one of the most important pillars of the design system is the educational capacity. And so what we’ve created, it has the ability to teach other people, people who may not know anything. About our work or the company or the organization to read on it and then to use it to then create.

And so this in turn really helps to up level the speed of developing something and scalability, scalability, is the word. Pertains to the ability for it to grow, things could grow either with a different arts, or where it’s like different pages, different features, or it can replicate itself into different products.

But the ability for these artifacts to then do the work that may be. I imagine if someone was tapping on your shoulder all the time, instead of having to deal with that all the time, now you have somebody that they can refer to something. And what is really beautiful where we’re seeing our collaborations cross domain too.

So not just within designers, but also designers to developers to content contributors, to authors, all different types of people within the domain to collaborate together photographers, illustrators, everyone who’s touching the product. And then lastly, you have consistency across the system.

So a good example is a really, really big company, right? Such as Google Atlassian, right? The company that makes JIRA confluence, your favorite software the ability for products to have a similar cohesive look and feel really requires a use of a system to create that link. Whether it’s the same font, that has been used and not even just the same font, but which style is being used, right? The margins between the letters that are being set up, or even the line spacing between the different lines of font copy, or even just the size, right? The different cadences, going from the big headline to a small body, copy how those are consistent and set across the system really makes a difference as to how everything looks and feels in the end.

And every single detail of a similarity that ties one product to another product. For example, allows it to have a more shared visual language with one another and then pathways expand with a given guidelines. So thinking about scalabilities now, once we’ve created a language, we can expand out words, right?

Okay. Let’s see. So one of the methodologies that people have adopted into creating a design system is the atomic design methodology who has heard of this. Have you heard of it feel free to put yes or no? The chat? Why or N? And this is, yeah, people have heard of it. Oh, awesome. Everyone’s heard of it.

Okay. Maybe I don’t have to go through this, but for anyone who has it. Okay. Anyone who hasn’t heard of it, it’s really this theory of starting with something really, really small and up to something that’s really, really big at all of these are elements that go into the system and how we document the system.

And so how the system starts off with are these Adams, these little blocks of things. That’s whether on a website and application a newsletter and working its way up where it’s into chunks of elements. So going from Adams, you move into molecules and molecules or combinations of atoms that basically work together to achieve a certain function.

So for example, I have the search button but by itself it might not do anything, but when combined with other atoms, write a label, a form field. Now I have a. Peace a mechanism that basically works together and that itself can be replicated across the system. Then we surface up into larger pieces where we have multiple molecules or atoms, a conjunction of it that work together in tandem.

So as we think about websites, for example, the upper navigation bar, that itself now becomes an organism. Some people call it components, some people call it modules. And then as we grow bigger, we can create a. Based off of different components, modules, or organisms, which are white labeled white labeled, meaning there isn’t a specific type of content just yet.

It’s an architecture, it’s a skeleton, we may want to replicate it for different uses. And then lastly, once we fill it in, we may also want to replicate that right. Depending on our use case. And so this theory of atomic design is thinking through these different tiers and essentially thinking about how those also all fit within the context of a system design, a design system.

Yeah. So what we had looked at earlier, of all these different examples of different people, Adobe, Google, you may see a lot of addicts for example, you may see also some molecules, some organisms, and really the answer here is it varies ultimately depending on what helps you write to scale and what helps you to work faster and more scalable.

Awesome. Any questions on this one? If you Google Brad frost, tectonic design, you can learn more on the web as well. There is a book but pretty much this sums everything up in a nutshell, a little bit of skimmed CliffNotes. Yeah. Feel free to pop any questions if you have into the chat. And so. Another thing to talk about are the types of design systems that exist.

So today we’re going to go a little bit deeper into Figma, but ah, thank you for jumping that Ivan. But there are also other ways that you can set up the system as well. And one thing that a lot of people now often forget the dark ages. We had set up these design systems. I can then day through offline artifacts, right before cloud computing.

I can cloud just meaning information. That’s stored in a database somewhere, a server somewhere that’s accessible to everyone live at all moments, always on. And so we used to create these offline artifacts most notably PDFs, right? These things documented in PDFs, and then you got their versions and then you share it out.

And also when our design files weren’t online, right? Like Figma files are and we had design files on everyone’s local computer. We also store. Artifact information that way as well. So people would have notes on iconography, typography, like all these different things and have it stored and someone’s local computer.

And the last note can be outdated rather quickly. So this was really one of the biggest pain point while it’s very easy, quick to kind of lift off these artifacts at this level version control was definitely one of the biggest pain points. So somebody would update one thing and then somebody would not know that that update it happened.

And then all of a sudden you have this file floating with different instances of it, across many, many different computers and folders. And so. The beauty of cloud and also live artifacts was really this shift towards information and data that is readily accessible live. And as it’s updated in one channel is updated, live and distributed for everyone to see.

Yeah. Can we think of this means talking about atomic design of pattern libraries as well? Yes. Yeah. I would say pattern libraries, some people use that to refer to pieces of a design systems. Yeah. I think the principle of atomic, what design is really this theory that we, we end up right with our final artifact, whatever it is, whether it’s a whole webpage via a newsletter, an app interface, or an app ecosystem, that is our end result. And ultimately. What we need to get there and what needs to be repeated. What I always say to people is it’s always different per product per team, per organization. And so based off of what we want to get to at the end, what are the pieces that repeat itself?

They get us the end goal. Yeah, and I’ll go more into some of the things to watch out in a sec. In the next kind of evolution of the design system shifted over into Figma, and there are many cloud systems such as Figma sketches. Now in the cloud, Adobe XD, you have the Adobe creative cloud that has a really interesting design system that it could set up also touches Photoshop, illustrator, and such.

And then Zeplin is another annotation SAS products. And these basically help to extrapolate envision is another one as well. These design products, design softwares are able to basically help organize. Information for us in a manner. And also at the same time can apply itself directly into our design files as well.

And what’s really beautiful is if I edit, let’s say an icon right, somewhere in Figma, it can then percolate itself to different sections of different pages automatically as I update it in one place. But one of the hindrances when we use cloud platforms is that it is login permission gated within our organization or who we work with.

And so as organizations or projects, scales outward, and you need more people touching it, the. Answer really is to think about what can I go beyond, right? This specific cloud software. And so that’s why a lot of brands start to create these websites, these live artifacts that access accessible for everyone because they have so many people touching the system and these details need to be live and accessible for them.

And so these are usually brands that put their content on a specific URL. And it goes beyond the cloud beyond access within an organization. But I will say lastly, ultimately what I will keep reiterating is different organizations, different products that you work on and different team members all require different solutions.

Yeah. And just because it’s worked in one place or worked on one product, doesn’t necessarily mean if you replicate that exact same system or ways of working, that you will get the same result. Yeah. And why this is really important is because I often find a lot of designers go into a space. Something has worked really well.

Great. But replicating that exact thing into somewhere else, trying so hard and then becoming defeated because as, as worked. And so what I always say, it’s a two way. One way is what you’re inputting into the system, right? You’re taking your learnings, you’re taking an extrapolating, all the things that has happened, but you need the other way, right?

The street that’s coming back towards you as a pathway for you to get information into how you want to create the system, that’s going to work best for the team members, right? Everyone has a different way of working. Some people like to be more offline, versus some people like to be more hands-off right.

It’s very different for the team. So not just the collective or individual, but also the collective team dynamic. The collective group of people that work with is also very different. Times you work with a team of two. Sometimes we work with a team of 30, right? It’s a very different solutions for both also different ways of working collective culture.

And lastly, the product and why this is also really important to think about is something that is happening at Google, for example, right? Or at the last CN or Adobe, these companies with a tons of hundreds of products under them will inherently have a different structure than an organization maybe that has one product.

And so thinking about just what are you institutionalizing? What are you making into a system really, depending on your use case and what you’re trying to solve is going to be different based off of that as well. And so just to reiterate as the inputs that’s coming in, that’s going to really change and shift the way in which you create a system is ultimately dependent on.

And individual level the people at the team level. And then lastly, the product or what you’re trying to create as a team. Yeah.

Cool. So elements of his design system, I won’t stay too far in here because we’re going to go into examples really soon. But really there’s so many pieces that go into this system, right? We can focus on just the pattern library portion, which is obviously icons topography images, photos, interaction, design I saw on Google’s material library, they started putting information about sounds and as well you can have responsive styles, how you creating different interfaces for different screen sizes and also 3d design.

That’s really big right now. And just how it sits within the space, what space you’re creating, component libraries. So this is more of a development side versus design. So think about all of the. The pieces as well as not just the design, but also the code that come with it. You have all the different components, all the different pieces, mechanics all the way up to just the dialogs air estates, indicators, or even the API based the way in which you allow your system to be connected to other systems. As documentations involved as well. And then lastly, this is the really important part are some of the principles that go into your system, right? So oftentimes people like to talk about accessibility perspectives on accessibility.

All right. What is important? What has it been implemented? Another one is best practices. So what I always love seeing or implementation of let’s say icons or logos, in different use cases that work. And sometimes I also see people do it in the instances that don’t work. And it’s just like a kind of, kind of odd sometimes, but it also helps inform let’s say don’t put this logo on top of a photograph, for example.

You have to put it on Y or whatever the details. Additionally, some, if it’s a cloud system or if it’s live on a website, usually having a section for news and updates really helps as well. So this helps to reinforce all the things that have been updated as a part of different batches. And then you also add version numbers so that people can align with one another, which ones they are looking at.

Especially if it’s offline artifact and then lastly user experience. So what is the perspective on the best user experience for this particular product, right? Or for your particular audience?

Cool. One question that comes up time and time again, especially for people. Do I need to create or not create designs and a there’s so many things on the web and things that you can reference or, you know, to create from scratch or to keep something going. And ultimately, again, Really depends on what I had mentioned this triad, of who as an individual is a part of the process who is the team, the collective culture, and what is the theme, the product that you’re trying to accomplish together. And basically based off of that, it should allow you to kind of gauge where you’re going to want to sit, whether you’re going to want to implement something brand new, where you going to want to adopt and evolve something.

And I always say this over and over again, especially for new designers is what works for one team may not necessarily work for another. And usually as designers mature, that is one attribute. That’s a part of design maturity is this understanding and comprehension of opening ones. To hearing what it is that’s happening around you, right?

Not just the design problem that you’re trying to solve. We also solving for culture, right? You’re solving for methodology, you’re solving for process. And when a designer is able to listen beyond just the design challenge, but seeing everything that’s around them, you essentially level up your capacity to create systems that can create change, not just within design, but organizationally And lastly testing, right?

We always talk about as UX designers testing and learning is so important. And so just like testing and learning a product, you should also think of this design system as a product, right? So as you create something and no one is using it, instead of investing a hundred more hours into it, right? The sooner you can listen and ask questions and understand what may be the barriers of entry, right?

What is really complex? Why is it not being adopted? We’ll save you much more heartache and headache than to just invest and double down more time thinking that as you spend more time than other people will spend more time. One of the biggest fallacies of work and just to talk about the vertices here, high cost, more customization, high brand differentiation.

So, whenever we create something from scratch there’s always a high cost Yeah, implication that has high cost, meaning costs of time, cost of money, cost of labor, customization capabilities. So usually when we create it from scratch, we have the capacity to customize how we want it. And same thing with brand differentiation. If we want something specific to our brand or organization it really depends on how much labor we’re willing to put in. Yeah. And so this slide, I think, is really important to preface before we go into the Figma. And I think this touches on some really interesting insights that took me many, many years to learn, which was understanding when and when not to use a particular system.

Yeah. And. Again, going back to one of the biggest lessons for me has been understanding and being able to listen to all the different inputs around me to then create a system that’s going to work best for this particular individual team and project. And so a couple things, the first one is when we are in a mode of ideation innovation, when we are quickly iterating on something, this is where I recommend not to have a system at all.

And why this is really important is because sometimes I see designers as you create websites, right? You start creating components, you start creating a style guide, you start creating all these things, but. It has not been done yet, just has been this vision of what you’re trying to create. And so sometimes I even see UX designers as a part of creating.

Wireframes starting to instantly create all these components, all these systems. But you haven’t even been vetted out as a whole, if it’s going to even look good yet, and you’ve already started to create or create a system around it. And so a good analogy is, imagine we’re trying to build a car, we’re trying to innovate a car. And as we are innovating and we’re thinking, oh, this is the engine. We then put the engine into an entire production schedule. And now we have 1,005 thousand of those engines being built, but we haven’t even finished building the prototype of the car. So as you can imagine, as we build the car, We’re going to make some modifications to it.

But then if we already have purchased a thousand of these engines for this car that we’re trying to innovate, how much more tied to the particular engine are we going to be right. Versus the bigger picture of design itself. Yeah. And so my recommendation to you all is if you are in the state of ideation innovation to not get yourself bogged down with design systems, because that is going to hinder, you could pass it to innovate and ideate.

Yeah. Oh yeah. I just used to do that when I started learning, just trying to systemize everything. That’s the first step, but Nope, it does not work for all the reasons you’re saying it’s a plus one there. Yeah. So then my recommendation. So then the question could be okay. So when do you actually start using the design system?

And my recommendation is when you start seeing a pattern, then create the system. Yeah. And this is also really important as part of just being agile and being quick. Especially as designers, one thing that you’re going to keep practicing over and over is just the ability to throw things down, test it, learning it, and then moving on.

But let’s say putting together a wire frame or a concept, you start creating a system and all these pieces and you end up testing it with consumers and they’re like, this is horrible. I don’t get any. You invested like a hundred hours into creating a whole entire wireframe complex system. And you’re like, oh shoot.

Now I have to scrap it. And so my suggestion is when you get to the point of proofing and getting things somewhat in like 80% stage, and you start having things starting to get towards a finalization of it, that’s when you should start thinking about creating a system. So as you create, let’s say beyond just a couple pages, right?

Beyond like two or three pages, but creating 10, 20, 30, 40 a system will help you scale to that point. But when you’re creating a single webpage, for example, or a single news set or a single app screen, you should not be thinking about a design system whatsoever because it’s going to really hinder your capacity to create rather quickly.

Any questions there. This is a really, I think there’s a really important piece that especially new designers I see sometimes get so stuck in just the capacity to be able to do it design system that you lean an index so much on it, just because here’s a great thing. Just because you can doesn’t mean you have to.

Yeah. Just because you can create a design system at that moment doesn’t mean that you should be doing it. Yeah. Next one lack of org maturity. So one thing to also understand as part of creating a design system is the system, right? Either the individual team or the product or the larger organization company that will help maintain it.

So one of the responsible design choices we make is creating something that is holistic in nature that has the resources, that has the capacity to be maintained. The last thing we want to do is just create additional work for everyone else. And so this is a little bit of conscious collaboration that we are instituting into our work so that we can help other people, ultimately, our vision, is to get us from point a to point C D E together as a group, versus. You were able to get from point a to point B and now everyone is really struggling to get from point a to point C. And so thinking about the bigger picture you’re able to figure out right at this moment, what do we have the capacity to create?

And so a big part of this is the more complex of a design system that you’re creating really requires the bandwidth from people to maintain it. If there are no dedicated people teams dedicated allocation, right? Whether it’s a few hours a week to maintain it, it’s not going to be maintained the short answer.

And so, as a part of maybe pitching a design system, you also really have to pitch the bandwidth that is needed to maintain an up theater. Yeah.

The next point is complexity. So especially for us as individuals, when we create a design, when we create artifacts, we understand how to work around it. We understand what pieces are, where it is. It’s like a house, right? Everything in our house. We totally understand where it is. Everything has a place, or we think it has a place. And when somebody new walks in, they’re like, what the heck? And we can make out right. Relatively where somethings are in a house that we go to. Usually you know, near the sink, there’s the soap somewhere, right? Near the dishwasher, there’s usually a drawer that has, you know, utensils, forks, knives, something like that.

So there there’s some patterns that we have to locate things in the house, but relatively speaking, we won’t know where everything is. So there’s a big part of this. Whenever we create a design system that we want other people to work on, we really have to invest also the time to not just educate another person, but really create the annotations, the documentation, all these things that really helps somebody who has zero knowledge to get into it and using it.

And so, again, thinking about your bandwidth. Start small, right? You don’t have to start trying to solve everything and all these issues, all one documentation, but really starting with something that everybody can start working with. And again, just like testing and learning the methodology says is just put it out there, see how it resonates and then use that learning to then update it.

And this is going to help save you so much heartache and headache because the more you can put things out there observe what’s happening and then make more educated decisions on, okay, this team is doing this way. This individual is doing it this way. This product organization is doing it this way.

You’re able to then use those insights to then create a stronger design system for everyone. Yeah. Yeah, and it takes a lot of time to teach and adopt and you have to also give that runway, you can’t imagine adoption it’s going to happen tomorrow. And then lastly when we touch I, I have the thing repeated twice.

It might have been something else I might have done. Oh well. Oh, woopsies but anyway, that concludes kind of the overview of design system. Is there any question, any question before we get into the Figma, now it’s going to be the hands-on portion. Feel free to ask any questions that you have, and let me get some of the links for everyone.

While you ask your questions, I’m going to grab the Figma links for us all sec.

Questions.

So I have three style guides for us today that we’re going to go through and we’re just going to play around and yes, the chronology feel free to use that one too. Yeah. Yeah. Imagine we’re building the next generation of Tesla, and we created one form of a battery. Oh, these in that link, copy that whole link and paste it into Google for some reason.

That’s not. So that’s one file. There’s going to be three follows that we’re going to work through together.

Imagine, yeah, we’re creating the next generation of a car. And then as soon as we’ve sketched it, I think about it this way. As soon as we sketched it, we start putting into production and we start launching thousands, thousands of that product, we are in for a bad time because then we’re so stuck on it.

And this quote from our book club reading that I go back to time and time again, that is really powerful is we are hired as designers to make things usable, not to make art. And sometimes we imagine when we are hired at organizations, it’s all about the art, the complexity, all of that. And so, yeah, so feel free.

I dropped the link of the files

and I will share my screen going into it. Cool.

Cool. So we’re going to go into the Figma tutorial and feel free to just continue watching if you just want to watch, or if you want to play around with the Figma more than happy to have you. But we’re going to talk about a few things today in the next hour, which is going to be first creating styles within Figma using styles to consolidate texts, color effects, organize our grid using proper naming structures, organize we’re going to also create components with constraints, auto layouts, variants, and then ultimately thinking about how this works in a collective ecosystem of a file to file manner.

Yeah, lots to touch on. Okay. Awesome. And then let me launch my fig of mom. Cool. So this will be the first file that we are going to be dissecting. And all of these files you could find in Figma in community. One of the really, really beautiful things about Figma. They’ve also created the community feature that houses files from a bunch of different contributors.

And it’s a great way that I recommend, especially for new designers to download files and break it out right. And break it down and observe how people are organizing stuff, linking stuff. And if you ever are confused with how to use a particular feature of Figma, my recommendation is just download people’s files and just play with it.

Break it apart, mess it up, you know, and from a learning curve capacity. I have found that that has a lot of better memory retention than just starting from a blank canvas. Yeah. But, you know, everyone learns through different sounds. Cool. So first off, we’re going to talk about the basic structure of Figma, and when we have nothing selected, and also if you haven’t made an account, you’ll probably be prompted to make an account once you click into the link. And so feel free to make an account and then follow along with us or just watch our screen. Yeah. First, we’re going to talk about how do we make these components here on the right, these textiles, these color styles, these effects styles, these Chris styles. And quite simply, I’m going to click into this examples tab. And then just go into one of the examples. Quite simply. It is. Using all the different properties and attributes that’s in the right pain to determine it. And so whenever I create a blank file, and when you can do, if you’re in any of these files, feel free to go in here on the left and create a plus sign and then create a page in that art board. You can then just mess things around on that playground without having to touch any of the other stuff. Yeah. Awesome. So as I’m creating a, a blank canvas, and as I start typing stuff, typing with some stuff here, Sometimes it has properties enabled, but oftentimes when it’s a blank canvas, it doesn’t. So then we’ll have all these properties built out. We’ll have the font style here, the colors, all these different properties. Select plus here, basically it allows me to have different attributes right later.

And so basically creating a style is super easy where all we have to do is like this four dots. And then once we select it, we can either pick from what’s in the system already. Or we can create something brand new where we click plus right. Where we create a new style. All of these have been made the same exact way.

And so feel free to click into any of these font styles and basically what it does. It, it, prepackages all of the attributes of the font into that style, but the fill stroke and effects are all independent of each other, which is really great because if I wanted this to be another color that I’ve saved into the system, right?

So these are all these colors that have been saved into the system. Then I can select those and. Well, the colors will change. And what’s really cool about the colors is that I can have colors and I can also have images and I can also have gradients. And so, I mean, just for our file, this is just the playground.

Feel free to make additional styles as well. And if you do just put your name on it so that people know they don’t want to mess around with it. Yeah. Same thing for stroke. Stroke is let’s increase this foreign size actually stroke is this outline that’s around here. And basically we get to define the color property then.

So here we can also pick the different priests, select the colors as a part of the style, or if we don’t want to simply we click this. The detach, we can select our own color, right? If I want it bright blue. And then basically we click the plus sign, or, sorry, not this plus sign this plus sign, and then we can name Stevens.

And that automatically will put color into the list. This is pretty, pretty straightforward. You can have these applied for styles, colors, outlines, font sizes, and they all go here. Now, an interesting part is based on how we name these individual styles, they can be put into these dropdowns, right?

So all we have to do is to rename it. We either just double-click this, when nothing is clicked or we click and we click into this style and then we click these little lever themes, these properties, and we can name it. And so what I want to do is I want to put it into this text dropdown, right? So all I have to do in the naming convention is go here.

Rename it and do text forward sash and that’s it. And then it puts it into the text dropdown. So all these downs are basically a forward slash like a folder. And it helps to organize if we have, let’s say 30 different color styles, we can have different colors that are saved under different folders.

Cool. So it looks like there’s one for images and then one for text. Super, super easy, super intuitive

question. Any questions? Everyone’s super clear. Cool. So. Let’s break down this file. So this is a great example of just a typical style guide. So we have different headlines set up, right? We have titles heading one, heading two. Had Erewhon had, or two or three, this is a convention that’s carried over through web design.

And so on digital web, we have different HTML properties that are defined as H one H two H two H four. And so that’s where the convention comes from. We have subtitles, we have bodies and essentially these are different properties that people have set up that they want to go into the file. And then here on the right, they’ve taken colors that they weren’t in the system and they’ve blown this out into a page, right?

My recommendation is it’s really nice to create if you want a style guide to create it in these pages, such as this, not just so in Figma, we can have all these styles here in this system, but I will also recommend just having a page where you create all of these different properties and just organize it in a way that if anybody needs.

Let’s say, wants to see, you know, what things are used for, how are things getting set up? They can go into this section, this annotated section to understand more about the properties. Yeah. And sometimes when you set it up and this isn’t set up in this way, but you can set up using different sizing of the art boards and having much, and then you could potentially export it and then send it to people using, you know, like an offline method.

For example. Sometimes when I work with clients, if the clients don’t have access to Figma or don’t know Figma, it’s really good to create these artifacts to be exportable as well. So then the clients can have them. Maybe they might not necessarily do anything with it, but it’s a great way for just making alternative things.

Cool. So as you can see in this particular style guy, they set up font pairings, and they also set up grid spacers. So this one, they’re just thinking through different spacing properties that they’re using to divide different elements and then the grid system, we didn’t talk about this, but the grid system is another element that we can also define as a property.

And a grid system is basically just broadly speaking lines that are lines going horizontally or vertically that are in our art boards on Figma that help us to create designs across different systems and conventions. And so when I have a blank art board, for example, here there is no grid set up just yet.

And so if I click into one of the frames, I can actually set up a grid like this by default will give me this. Square square grid system. If I want to create something responsive, right? Typically you use a 12 column system because of the way it can divide into different numbers. And we have another video on that in our Figma tutorials.

But basically we can set something up like this, and we can then again, just like a style, we can save it, stephen’s grid. And then we created a style that we can apply. So what’s beautiful. As we, as we create a new art board, we can then select these four dots and then select my grid. And why it looks a little bit different is because the properties that’s been set, if we look are all based on dynamic values type, stretch. But if I put center here, it should match from one screen to one screen, right on the right on the left. Stretch. Awesome. Any questions there, zooming past this stuff and then feel free to reference this video in the future as well.

And, and the next stuff that we haven’t talked about before are constraints, right? So constraints are basically properties that we can set up and define for components, right? These components. And as we stretch or we change kind of the sizing of it, they automatically reflect the update. So what I can do is feel free.

If you want, as you’re exploring, just select the element, you can copy it. You can go into your little playground and paste it in, right? Like that. Yep. And then as we look to the right here, constraints are basically. Like what I mentioned as we shift and we more, like we, we make wider, we make taller different objects.

We’re setting the properties of what, the elements within that grouping and what they’re going to do. So a good example is let’s say I’m making a campus, like this, and then I’m doing a navigation bar up at the top. And when I make my page lock or right. Yeah. I’ll just write just so that it’s crystal clear what it is.

And this is just a random white page, as I make my page longer, it should not do anything. But by default, it’s oftentimes set up like this. Usually set up like this so that when I stretch. Yeah. So sometimes when I just set up an object in the space, when I stretch it, the canvas, it also does that.

But when the page gets long, or webpages get long, we don’t necessarily need the navigation to also get bumped. And so what we often do is we in our grouping, we select the parent group. So the group of the higher order level kind of encompassing parent group, and then we want to click into the individual objects.

Just making sure it’s underneath. And then we set the constraints up. So what we’re going to say is, Hey I want you to anchor. To the very top, right? So this is what the top means, and this means the up and down behaviors. This means if I pull it down, what is it going to do? So if I click top, it’s going to stay to the top.

If I hit a bottom, it’s going to stay towards the bottom. So it’s going to keep this space. So what I mean is this right? So it’s keeping this distance here the same. Yeah. Does that make sense? So if I hit top, then it anchors to the very top as I stretch. Cool. And then same thing for left-hand.

Because I have it set up as scale. It is scaling as I shift the width of the canvas. But if I do less. It will keep the size the same. And then as a stretch, it’s just going to stay the same size. So these constraints are really, really useful, especially as we move into the next part of today’s presentation of creating design systems and components now.

Yeah. And so for example, as we create objects that are components and components and Figma are reusable elements that we’ve predefined and to create a component it’s as simple as creating a group. And that either right. Clicking and creating a component or clicking this little flower, diamond thing up at the top.

And then when it has this purple frame around it, it means, it’s saying, Hey, now you can reuse me everywhere. Yeah. Cool. So these components, this author for this file has done a really, really a great job of setting it up, with all of these constraints. And so as I stretch it you see the button is stays center.

Alternatively let’s say I mess it up. I can detach this. So that’s not an object anymore. Okay.

Okay. And then I set the constraints

that’s happening. Okay. Here we go.

It’s nested, right? There’s even a space between both of them. Interesting.

I see. I can essentially set it in a way where these objects

resize differently. You can’t really see it, but let me see if I can. Yeah. They have icons to left and right of it. Let’s see. Yep. Cool. Okay.

Cool. So there’s so many more features and properties in this. So what I discovered was in these buttons, there is actually a space for icons to left and right of it. So that’s another interesting thing in the checkout is if I have different features set up an auto layout is something that we talked about before, but basically in this feature it automatically collapses certain objects if I have them hiding.

Cool.

Okay. Awesome. And then we’re going to move on to the next file. But overall, this is a really interesting just to summarize this file. I think they do a really good job of just creating an introductory style guide. Which has things listed out the styles and the system set up right. That align with these things.

And then just to make sure that they’re set up right. We can click the object and just making sure the right style is applied. The instance we click on something and then let’s say we see these font properties. That means that there is no style applied. Yeah. Awesome. Cool. Moving on to next file and design system, I’ll post this one into the chat and this is the second one.

Now we’re going to look at.

Question, what can constraints be applied to so far you’re shown him with objects and sounds like also in components. Yes. So we can basically create constraints to be for many, many different elements. So let’s say I create a component, right? Like, like a module, that I have, let’s say this is a picture.

And I might have some, you know, text below it. That’s like, boom, boom, boom, boom. Like that. So then I can group this individually, as a frame or group different workflows for different styles. Basically almost the same thing for the constraints. Now, as I resize this. Let me do a group. That’s going to show the resizing better. Yeah. So by default, when I grew up something, it’s just going to resize everything together.

But this isn’t what I want to do. If I’m, let’s say creating component, let’s say there’s like a blog article, right? The images I’m going to change sizes each time it gets longer. And this is within the page. And so what I’m going to do is once I’ve grouped everything together, I’m going to click into the object anchor the top. And then I’m going to anchor this to the left and right. It’s going to stretch actually. I’m just going to center it. Yep.

The beat.

One sec. Now my properties have changed.

Why is it not? This should be

scale top. Okay. There we go. So now it’s stuck at the top, right? And then, because I have set up to. The left and right to let’s see, be center now, as I stretch it out, it’s going to stay in the center. But now I have to take care of these four. So then I go back here and I’m going to also centered things.

And then I’m going to say, Hey, make these always stay at the bottom, the box. And now when I pull it, it sees the same size and the stays at the bottom now. Yeah. Does that help? I did apply the elements. It was weird. It was not. Yeah. I don’t know. I don’t know why I was doing that earlier.

Mystery,

any questions. So these are just constraints. Also sometimes I’ve noticed when working with other people’s files and stuff like that, you might have auto layout set up. And it’s a little bit of what I always say is replicating it, changing the different shapes and sizes, and then you can figure out what to do.

But what I always like to do, here’s a trick. I always like to, when I’m creating a, let’s say like a button and I want to make it a component that can have the proper constraints applied. Usually I like to set it up like this, where I set up the element. And then I’ll just set up the button like as such.

And then what I’ll do is I’ll create this into a component. So that’s the key command for creating a point where you click it and you click create components, which I did now. It’s purple. I make different instances of it, right as such. And then I stretch these out a such make this longer or shorter, make this shorter, this way I make these shorters right.

And so, as I update the constraints of my files, such as this right now, I will see depending on the way in which it resized instantly, what’s going to happen. So again, to repeat, what you can do is you create the component first, replicate it in different sizes and then play with the constraints and what this does.

It basically allows you to see immediately in different sizes. What is it going to do? So for this one, I’m going to adjust and play with the background a bit and I’m going to make it scale, making sure it fits the size. And then the word, but 10, I want to make it smaller so I can see what it’s doing.

Here we go. And I always want it to be centered. But always centered vertically. There we go. This one’s working, but look, it doesn’t work at all of these. So then what I’m going to do is I’m going to click it and I’m going to set all of these properties. Center. So now do you see, as my object changes sizes, it’s always vertically centering.

So this is a really interesting way of just working with a component. Just making sure you have the proper constraint set up. Yeah. Also the fill for this, one’s not working properly, because it’s little shorter, but then it’s going still all the way across. So I’m going to click into that object and then I’m going to, instead of inker left, I’m going to say scale match the width, right?

Same thing for this instead of left, I’m going to say center, right? So now I have all of these different variations and now they’re still stuck in the center. So now what’s beautiful is as I resize it, it’s all set up. Right properties that I want at all sizes. Does this make sense for people?

Little hack? Yeah. So once again, what I do is I create the object, make it a component, so I’ll do it with this one. So create the object, make it a component, click create component. And then what I’ll do is I’ll create various sizes and it’s okay. It’s breaking. You want it to break so that as you break it let me make a extra long here.

I’m gonna make this one. Yeah. It’s going to do this. I could define now the properties of what it does. So for the width of the white, I always want to stay within the gray. So instead I’m going to scale it. The white bars, I wanted to do the same thing since it, the center I’m going to scale it or I’m going to do left and right margins.

So it aligns and sets the left and right. Margins and matches it. And then it looks like seemingly it’s working well for the rest. But let’s say, I want these to stay underneath this top element. I’m going to just go in here, the group instead of the bottom, I’m going to say top. So then it’s always going to be right below. Yeah. And so then once I’m done, I can just go in, delete all of these replicas. And then now I have a element that does what I want it to do. Yeah. So that’s just one way of just because sometimes what the weird trick. When we apply a certain constraints, we don’t know what it might do to another resizing, for example.

So the, one of the dangers that I’ve learned through just like trial and error is it may look like it’s working at one size, but then all of a sudden when I make it even thinner or much bigger wide or much taller than the constraint didn’t work. So with that said sometimes one of the constraint values may look like it’s giving us the immediate effect that we needed to, but until it’s under the right use case, then it starts to break.

So yeah, this is just something that I’ve created as a system of just like play with all the various sizes you can making sure it all looks good. You don’t touch any of these, you just touch the main one. Yeah. Cool. Figma hack. Yes. And this will save you so much heartache. Yeah. Cool. So going on to the next file that I posted in the comment about 10 minutes ago, the ant pile.

So this one is a little bit more robust. Yeah. This has a whole icon library set up and buttons as variants, which are really interesting, which we’ll talk about next. And then all of these boxes and these properties set up. And so feel free now just to go into here, click the plus, make an art board for yourself so that you can play with some of the files.

Yeah. The first thing I will talk about are symbols, or components that recreate an ecosystem. And what’s really nice about creating components is that it fits within a library already. So as we create components, when we go into asset. Basically everything we created, that’s reusable.

It goes into this library right here. Also same thing here, because I created these as components. That’s also in here. Yeah. Under my name C. And so this asset drop down is kind of just the repository of all the things that you’ve created into a component. One thing that you should know is that the naming of this object, going back to layers the way in which I named it is going to be ultimately the way in which it is organized in the system. Yeah. So it’s the very same thing as like the textiles here. So regular, all of these, basically they had to name it regular Ford slash 12 PX. Ultimately the way I name each individual icon here is going to change the way in which it shows up here.

And why this is really important is because going back to my Ford, when I click into a component, I have this really nifty tool here. That’s right under this dimension toggle here that allows me to select between other elements in the same folder. Yeah. So why this is really important is let’s say I’m creating a system in which I have an icon library, right?

Hmm. When I have an icon library, I don’t want other things that are icons in here. Because then if I select it, it like breaks the whole system. Because I’m going to click out for now, just for the sake of but like if I have an icon here and I have a whole website that I’ve made, but then in the drop down, there’s a tool tip.

It, it doesn’t really make sense because then it will break the whole system. It’s not the right dimension. It’s not the right properties. And so going back to the way in which we set it up,

what’s really cool is let’s say let’s do the whole navigation example again. We’re building a website. I’m just going to right now just to reiterate it. And in our navigation, we right. Usually have a search icon up at the top. Search. Here we go. And so if I have like multiple of these icons, if I’ve named it properly, such as this, so this is in the folder icon, which is in the folder outline or in the folder outline, which is in the folder icon. Then I get to select objects within the same folder. Yeah. Does that make sense? I guess, switch it to push pin, I guess, switch it to center, right?

So I will show you the example of if I change the name, right? So this mail icon, I’m going to change the name right here to not icon right now. I call for session, outline for sash male. So if I go back to here and then I want to search for the, I con it’s not there anymore. Question. Kay. How did you add the icon to your frame?

Yeah. So if you just click into any of these, you just copy it, apple, see right. Click copy. And then you can just paste it super simple. And the beauty of a component is if you copy a component and you paste the component, it pastes it as a child element. Yeah. Command and see exactly command C command V.

And it, all of the little children are now able to follow suit of whatever is set up as happening to the main parent. Yeah. They’re all interlinked. Going back to how I named it. So if I go to assets right, the way in which I named it, now it shows up like this, in not icon for sash outlet.

But it’s in the icon because it’s set up as part of the

there. Yeah.

Any questions? So this is in terms of just like naming it. We’re going to move on to variants. This one gets a little confusing, but just bear with me. So to summarize this portion of it, icon. And elements that we want to organize components in the same system, the way in which we name each individual object will allow us to swap different components, different objects between one another easily.

Yeah. And I like to make sure I do this for icons. I always do this also for prototype elements. Yeah. So I’m making a really big complex prototype and there are elements. That’s a part of it such as navigation, header, or footer, all these things. I usually like to make those into components too, that I can repurpose.

Yep. Cool. So next thing is variance, right? The really cool thing about variances. This is the example use case of how you use it. I have an object. And the new thing that I haven’t seen are all of these little things, right? So we initially had this, just the component dropped down here, but we didn’t have all this right type say size content.

And the co the point of creating a variant is there are objects within our design space, design system that have different properties that we want to have as different states. Maybe it’s either through the program or through our design. And usually with stuff that’s really, really straightforward, such as like buttons, form fields, toggles, those things we can create into these properties. Yeah. And so what’s really cool is these, we can customize to whatever word we want. And also whatever word we want, we can have it look whatever we want it to be. And so we could essentially say type is rainbow crazy. Like we can name it to be whatever we’d want and it could do whatever we’d want.

So the combinations are endless. So primary default, right? So what they’ve done is in the system that they’ve created, they’ve created a style for a primary button. They’ve created a style for a dash button, create a cell for a text button where it’s only a text. And then create a style for link.

You see? So in this ecosystem, basically they’ve tied together, all hyperlinks together. Yeah. As a part of that, they also have different states that they’ve created. They have a hover state of focus, state, oppress state, a loading state, a disabled state. These are all really, really great because this is what developers end up creating.

And then the variant part of it is really great is because we can edit this library and this will automatically propagate itself. So all of the designs that we have. Yeah. And so imagine if you have like a hundred pages, hundred by pages, all of this would be able to propagate everywhere.

Just beautiful. Yeah. We also have the size and the default size. We have the large, we have the small, and these are all predefined. Yeah. By the person who made this file. And then we have the content label only icon with label seat, and then have icon here. Awesome. So that’s a use case of how do use variance next is how do we create these variants?

And so variants will look end up like this and it gets a little confusing, but just bear with me. I’m a describe just like at a high level, when you see this dotted line around it. What it’s trying to do is saying in this fence, in this perimeter, these are all the elements that are all going to be toggle level with one another.

So they’re all interlinked with one another, where are we place it? It can be wherever, but what it’s going to do is always going to want to be within this art board that we’ve created. And then we can also change the size of this. Basically. It’s just an art board, I moved this back and so.

What I’m going to do is I’m just going to create a variant from scratch. So we have a button that we want. Sometimes I look at the word too long and then I don’t even know how to spell it properly buttons doing that for me right now.

Yeah. Cool.

Cool. So then I’m going to group it, right? Typical grouping it. I’m going to create it into a component. And then the next thing is. This is the variance property, right? So simply I’m going to create plus, and then what it’s going to do is it’s going to create this purse second instance for me. And so what I can do is I can now change the style on the second one, right? Maybe I want to create the off state. So I’m going to say, Hey, this is what it’s going to look like when it’s off. And then basically I’m going to name it. This is the off state. And this is going to be the on state. And so what happens is if I have this component that I’m using,

right. What has happened here? If I I’m using it?

There we go.

Now I have this property toggle on off. Ah, I forgot to mention if you do on and off, it automatically changes it to this toggle for you, which is interesting. Watch, I can name it as on one instead, and off to just whatever name that I want. Then it’s going to do this for me. I could essentially name this rainbow and I can name this not rainbow.

And then basically it will set that up as a two toggles for me. So this is how variants basically work. And then to name this property basically is just renaming. The file objects, right? The properties that we have. Cool. I think questions,

any questions?

Awesome. So that’s this file feel free to play around with it. I think they do a lot of really great job with the variance. And so this is just a really great example of just how to start creating variants that are really complex. Yeah. Such as this one. This one field, just has so many gypsies. I put it I’ll place.

This form field has all of these variants. You can make a smaller, you could add an icon to the left and you can add the typing state. Or you can do the focus states. So they’ve done a really, really great job with the form fields. So check that out, play with that. Yeah. Awesome. And then the last thing that we’re going to go over with our time that we have today is I O S design system.

Hope you’re all learning a bunch today, the design system. And then again, what I recommend is as you’re creating page, usually my workflow and what helps me is as I’m. I’m going to project. They’re like, I have to create, you know, all these webpages, the first thing I’ll do is I’ll create the page.

And then however, I create the page design. It’d be like, blah, blah, blah, blah, blah. You create a page, create the science. It’s like beautiful. You know, it’s not really that beautiful right now, but you get the point kind of, so then I’ll create the page, right? And then I will review the page with other people.

But when it’s a single page on its own, I do not make anything into components just yet, because I know there’s going to be things that’s going to shift. There’s going to be things that’s going to evolve. There’s going to be things that. Good. Appreciate it. Get removed, it’s not until I start making multiple pages, sometimes I even let go.

Just like some, like a handful of pages, I’m just going to change the color just for the sake of our tutorial. But my workflow is as I’m creating pages. So one of my clients I’m creating a gigantic website for them. When I was doing the set of reviews for them in the beginning, as I was creating just a couple pages for them, I was still not creating components for them just yet, because I realized we’re going to iterate so quickly, we’re going to modify, we’re going to change many things.

And it wasn’t until I started creating more than I forget what the threshold for me was like three or four pages that I started to create a component for them. So at first I would just like copy and paste this, and these would be individual objects, but a great workflow is once you get to the point where you’re like, okay, these are pretty set in stone.

They like it. Nothing’s going to change that much. Then let’s make this into a component. And then I will make this into a component. And then that will go in these just click this and then I will just copy it. And then here’s the trick. If you click the, if you copy an object from one frame and you want it to be in the same place in the next frame, just click the, our board and then paste it.

It’ll pay, sit directly in the same spot. Yeah. And then the key is once you get to a threshold where things repeat enough times that you yourself will save time by creating a component, then create the component. Yeah. Here’s the other thing too, is when you, you can easily go down the variance rabbit hole, where I’m like, okay. And now all these are variants and like all these things, again, until you see the multiple instances of variance being used in all your comps, then created as a barrier, right? Don’t create the variant, the component, all these reasonable things until it is more codified and set up in structure, otherwise what’s going to happen is you spend, invest so much time in the setup.

It’s so hard to instantly tear things down and switch it up. And especially when you’re early on in the project, you have to be more rapid and be more iterative. And some people argue, well, you know, I’ll just spend time. It should make me iterate faster. My, but the other psychological thing is sometimes we get so attached to things we invest time on, right?

It’s a part of this fallacy called the sunk cost or some time cost fallacy, where the more amount of time we spend on something, it directly affects the way in which we can let go of something as a psychological phenomenon. And so when we invest so much time into creating components, for example, we become so attached to it that we have really hard time letting it go.

And so as a part of being a designer, being a flexible designer and being a designer who tests and who wants to learn my recommendation is you have to sometimes create that distance for yourself where you’re kind of detached. And you’re like, ah, like you can still kill it. It’s like fine, you know? Yeah.

Yeah. You got an aria. Yeah. And you have to, you have to safely distance sometimes yourself from being too attached. Not saying you shouldn’t fight for things, I’ve her. But another big lesson that I learned that took me many years is pick and choose your battles wisely. Some of the things you do not want to impale yourself against the sword for right.

Some things you may want to, but really pick and choose your battles accordingly. So that if there’s something that you’re really passionate on, yes. Push for it. But if you keep pushing for every single thing all the time that maybe not accommodates other people, then what it looks like from the outside in is you aren’t taking.

Are there inputs from anyone else? And sometimes it doesn’t create a good atmosphere for collaboration, collaboration really ultimately give and take right duality two way street. Awesome. Cool. So going into the last system, and I’m just going to prep, just like go over this at a high level, but this is just a really great example of a file that has comps created right here.

And there’s all of these things here. My suggestion to you all is go in. Some of these are objects and some of them are, this is a really great test file just to create some of these into components. Yeah. So just play with these, tested out, see what resonates and works for you. Yeah. I’m trying to see.

Huh? They didn’t create components in this one. Some of it did. Yeah. So use this as a file to then create components. Yeah. And then create the objects and layers. And these are the ones that haven’t been created. So this is like a good homework file. Like you can call this H one, stuff like that. Understand that you’re in a sharing mode.

So if you are going to start creating the style, my recommendation is duplicate it into your system. So, as you’re editing it, you can do you,

I got out to, does any remember how to replicate it or is it an home? I think it’s an home.

Yes. Okay. Got it. So if you have an object, right? So this should show up in your drafts, right? Recent or your drafts. And then all you have to do is click duplicate, and this will duplicate the file just for yourself so that you don’t have to modify and play within an ecosystem with everyone else. Yeah.

Cool. Awesome. So that is the end of our Figma tutorial. Hope you learn something new, I’m opening up for questions, any questions from people about design systems, any challenges that you’re all running into a design systems that I can help answer. It’s definitely a really complex beast. That again, I will go back to.

Different solutions for different individuals, different teams, different organizations and different products. Yeah. And when you can put that lens on into understanding what a different inputs, you can then come up with the best solution that works for different scenarios, any questions,

questions,

and everyone has access to the YouTube and all of this will be put up. It’s funny REO with all these like little, it’s like all the little hacks to just like make life so much easier. It’s like the copy paste thing saved me many, many times. Yeah.

Yeah, and what’s really nice. I forgot to touch on. It was once you’ve created a design system and components in one file, you can actually use that and then put it into other files too. So I’ve worked at many different organizations. I had not just like one file, but like hundreds of files of working across different teams, you have a team that manages the design system and nobody else can touch it.

So, a really good way if you’re trying to decide to create and allow someone to mess up a design system, you have one file with all the properties and then you have another file basically inherited. Yeah. Yeah. I like to tell myself to be steps a year or two ago, and I was still struggling with Figma.

Yeah. Creating copy to play with constraints as genius definitely ran into a few issues of the components besides saying thank you so much. Yes. Yeah. That took me a while to learn. The constraints that, I mean, the trick part is one constraint may look like it works, but then it breaks all the other constraints and I’m like, oh, what happened?

So, yeah, it’s created as a component. Even if you don’t need it as a component, what you can do is you can create the component, create all the different things, adjust the constraint properties. And then if you dissolve and detach the main one from the component and you delete the component, you then end up still with the object and the single instance with the right constraints.

Yeah. So you don’t end up having all these like extra things. And if you’re still iterating, but you just really quickly want something with the right constraints, creating in the component, all the different sizes, modify it, get the right properties, detach it. It’s back in, delete the component. You should be good to.

Yeah. When did the sign, his system is another file. How do you access those objects and design system is still copy and paste into your file? Yeah, it’s a little bit of backwards system. Wondering if I can access

One sec

when you copy and paste it, you should already, it should automatically link to the system. And so

let me see if it’s showing up here. Yeah. Let me share my screen once again. Okay. So when you copy and paste stuff from one file to another, right? So I’m just going to go into here. I’m going to copy this, paste it into this, right? Oh, shoot. I didn’t mean to do that. Let me go into here. Component,

paste it in right when I’m in the assets fully here. And when I see this book, it’s also going to show up when I’m in this mode to hold up. There was a book here. It’s not here anymore. Oh, no. Anyway. So if you hit this book, basically it should tell you all the things that it’s linking to. And so this, these are the colors that are set in my system.

It’s not showing up because it has to be, it has to be, so you have to have a setting where you have a setup as organizations, and once you set up organizations, that’s what I forgot to mention. You can then set up properties within each organization, but you can’t do it within drafts. You can pull properties from these two drafts, but the properties have to be at the organization level.

Yeah. This is our organization. And you have the set up at the organization level. Yeah. And so what it’s pulling is it’s pulling, I have some colors of set up as a property, and then you could toggle that on or off. And then when you toggle it off, it takes off all the styles. Yeah.

Constraints, major insight for tonight. Great. Yeah, you know, design systems can get really complex and my recommendation is start with. Yeah. And don’t make it overly complex. Especially if you’re looking to have other people collaborate with you, if it’s just for yourself and you’re on a really small team and you’re doing everything for free to make it how you need it to be.

But if you really want other people to work with it work with a file that you have, the system, the components that you have start small, start with one or two components and observe how are people using it? How are people managing it based off of that is should allow you to understand, okay, if this is working, let me push further here.

If it’s not working yet, what is it that’s not working? And if some of the early kind of hurdles or issues can’t get resolved, the worst thing you can do again, is put more effort or double down the same thing that you’ve been doing, thinking you’re going to get different results. Yeah. Just putting more time in doing the same thing will not get different results.

Yes. Thanks so now. Awesome. Well, if there is no other questions, that’s it for tonight?

Have a good rest of your evening. Happy 2022. Let’s see. What’s in store for us this year, you know, got the 20, 21. We can do it. Let’s do it. And so we are here. Feel free to shoot us any questions via slack to our organization. And yeah, love to connect and help support everyone where we can.

And with that, have a good rest of your evening recharge energize, learn a little bit more Figma and yeah, have a good rest of your January. If I don’t see you until the next meeting. Bye.