On this UI Design lesson we take a look at organizing our design system in Figma. I also show you some tricks to reveal content in present mode. We review the icons and core elements and I teach you how to manage and publish shared libraries in Figma.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right, guys. Welcome back. We're going to take a look at organizing our system and how I manage my team structure using Figma. So I have here a layout of my team and I've created multiple projects, and within those projects, I've decided to add some cover screens and each of these ones represent a face.
So for example, the first project is playground. This is where all our ideation happens with wire framing and our templates and prototypes. And then we have another one for system. In this case, our toolkit. So this is where our system will live. And then the final will be specs. Specs is just the copy of the final approved design scent.
And it's ready to be sent over to developers. So let's dive in and see some of the structure and how this is working. I have two documents, the UI design and the wire frames. I've split them out and created a couple of insight pages. As you can see here that cover the way you add covers is simply by right click and setting it as a thumbnail.
So whatever size you create in here, you can set it as a thumbnail and it will appear here on your default space. Then I've added all our ideas in here in the ways that we've structured over the courses. I've added all the design wireframes that we created in our first course, then on the UI design, for example, I've decided to have all the brand assets in one space, similar to how we did on our training.
So we have all the designs established, including some of the components we created for the cards. So all of this is something we've already worked on, but the way I've done it is I've organized it in a way that makes more sense to the team. So this is a phase and then I've structured it this way. Also, another cool thing that I did was I wanted to show and present this to multiple team members.
So I've laid this out in a way that all these slide shows are part of a mask. So I've created a frame. Which has auto layout and it stacks all these together. If you, if I start kind of moving these around with the spacing, you can see that's an auto layout. So I've stacked these together, I've placed them inside a frame so that when I click present, check this out, we can actually go down to that section.
And if we're presenting this to a client, for example, we can just can access all the other slides. And this is helpful when you're working on larger teams, you want other copywriters to come in and help you write the content and titles and the headings. They can also do that through Figma, but also you can present it this way.
So I did the same similar approach with the gear up. We have all the. Elements all the VR headset tabs. And as you scroll to the right, you can actually access the secondary page. So now the next step is how do we turn that all those elements into a simple library. If we open up the system library that I've created...
All right, so we can see right here that I've organized the system in a way where everything is a component I've added additional system icons into the library and all the alternative VR icons that we could potentially use on other insight pages, all the type of buttons that we will probably see both on white and on dark.
So both themes are available. We have some of the backgrounds and of course the mood that we created originally, the most important part here, I guess, would be the core elements. The core elements would be kind of the field in the form, the scroll down wheel, the pagination, icons the tops and the movie covers, I even made these symbols so that it would be easier to swap out the actual percentage of that border outline.
So that's based on the percentage on from zero to 100%. So you can play with these documents on the download section, and hopefully you can see the way I've structured the system, in a way that makes a lot of sense or for building out all the other pages that we're going to do in later phases.
So these cards are going to be set up in a 3d space so I can flip them. The front side of the card will look like this and the backside of the card you'll have these illustrations. So, this is simple. We're using the same kind of styles of adding shadows to the bottom and adding a nice little soft inner shadow to create that simple 3d effect.
One thing I did want to mention is how we can start publishing some of our elements from our library, and simply by having that library on a different file. Our core pages will start to feel a little bit lighter so we can, if you're not running on a very powerful computer, it is important to keep these pages light so that, you know, we don't have all the components and all the layers in the same file, but instead we have them split into their own file.
And that's where the power of the assets team library comes in, where we can have a. Single source of truth. And this library we can share among all of the entire team. So let's just publish these updates right now. I'm going to publish some of the updates that are made to the library. Once I've published the library, it will now be propagated throughout the entire team.
And if I go back here and I go back into my playground and create a new document, I can activate the library in this document right away. And notice how it's already active because it's part of the same team. So that's pretty cool. But if you are on an organization plan, then you would have to activate some of these libraries that are shared across different teams.
So let's say for example, I needed a specific component. I can just simply click and drag it into my canvas. I can start overriding some of the properties without affecting the master component, which lives in a completely different document. So that's pretty cool. And that's it. I think this is really exciting.
Hopefully you can take away all of what we've gathered in these lessons and start applying them in your daily projects. The next lesson I want to talk to you about is how we can start preparing for export and compression. This is really important because in our next course, we'll need to have all these assets ready to go, to start rating our interactive landing page.
All right, I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS