Transcripts
1. Introduction: Hi, thanks for attending in Coursera badness during currently lead product designer at a software company based in Portland, Oregon. And I'm really excited today in this class, we're going to learn some productivity and time-saving tips and tricks in Figma. This will save you a lot of headaches and the future. It will save you time and prove your work life balance and just make you a better designer in the long run. If you work as a designer, we know that sometimes you have others that you have to hand off your file to. Whether that's another designer or development. Figma has an incredibly collaborative tool. So other teammates that you work with might be directly coming into your file and interacting with your design work. That's the beauty of sigma. You can actually see your teammates cursors working side-by-side yield. It's really easy to leave comments and called people out and gets asked for feedback directly in Figma, It's free, it's browser-based, but it's still an incredibly powerful design tool and a lot of designers use it in their day-to-day workflow. But if you do a thing where you know that if you don't have an organized file and writing weren't working with productivity at my kind of beginning, then it's a lot harder to go back, fix those issues rather than if you just started thinking about how you can be the most productive and fast and efficient designer. You could be from the start when you first start your file. And we'll talk about that in this course. We'll talk about how to create your design system, how to create a design library, Color Libraries, text libraries. We'll also talk about some of sigmas awesome functionality that's built in around productivity, like the auto-layout feature. And then we'll talk about some keyboard commands and shortcuts that will make you such a great, quick, efficient designer. And it will put you, so far, I had of many in the games. And if that sounds like a good, it's a good fit for you. I recommend you stick around and we can get started.
2. Building Design Systems: Okay, so first we're going to talk about trading a design system. A design system allows you to scale your designs quickly with the least amount of effort possible. So if we go to Pinterest, you can start getting an idea of what design systems look like. You can even start saving these. If you are a Pinterest fan. You can make a collection of these if you kinda want to start brainstorming here I own ideas of how you want to organize your design system. If you don't know what a design system is or housing, or have not worked with one before. They're really important because they allow you to work with components and keep, they keep your design files as clean as possible and as efficient as possible while you are working. You don't want to work with broken pieces of a design. Because say if you have a branding update and you have to change the color, say, Oh, in this example on Pinterest, the egg poor UI style guide, say that there was a branding change where they had to change this purple color to a blue or just a totally different color than what's shown here throughout the app. They use this color in their color system as shown here. A very common color throughout. And there are oftentimes where a company will go through a brand change and you will have to change the primary colour components. You don't want to work with individual broken components where you would have to go through and change every single component by hand, not what take months potentially. So it's incredibly important to work in design systems with a design library. That way, you can make those changes in seconds rather than hours and hours. And it makes it easier for any designer that comes into your file in the future and needs to make updates as well. A popular methodology of design, system biology as Atomic Design by Brad Frost. And I will actually link this free e-book that you can read in or ordered the physical book. You can read more on this methodology. And this, I will link this Adobe XD article as well that goes in a little bit of depth about atomic design as well. And the way that this works is we have atoms, molecules, organisms, templates and pages, and without contexts that might seem a little confusing, but essentially, this is a good example I found on Google of a company's designed system. I've built my own as well, but a lot of the companies I work with, I can't really share the work publicly, so I'm using public examples I've found myself in. You can continue to find your own examples as well to get ideas. But from what we see here on the left, and as we go move further and complexity, we have the atoms, the molecules, the organisms, the templates and pages as we move forward. As well as that looks like a type, a text style guide, and some examples of their use of data visualization throughout. So it's really good to find these examples online and it will help give you ideas. We can actually start looking in Figma. If you haven't created an account in Figma, you'll just go to figma.com. You can login or sign up and you can actually work in the browser, or you can work directly in Figma. And this is what you will see here. You will see if you download the physical app onto your computer, you can go to the community section here and look for just type in design system. And you'll actually see a lot of starter design system kits. And you can literally start downloading these. This first one, the amp design system per fragment to 0.03 demo. So it looks like you could actually purchase this. You can duplicate all of these awesome resources in Figma community. So this is such a great way if it's so overwhelming, if you don't know a design tool very well. But if you go to the left here on the pages in Figma, and you can do Command, backslash and hide the UI in pages on the left you can see all of these components and start playing around with that.
3. Figma Auto Layout Tool: Okay, So next we are going to talk about Figma auto layout. This is an awesome tool that you can use to make super responsive dynamic components. In Figma, it will save you a ton of time and headaches, and it's amazing and every designer should definitely be utilizing it. It will such a time saver. And just one of the best components and features like figma has to offer. So they actually, if you go to the community section and, and if you go to the first page right now, you can find that in the trending files, figma has actually created this really helpful guide called the Figma auto layout playground. If for some reason you can't find on the front page, you could search for that title and locate it. So if we don't know Sigma and duplicate this and it will open up automatically and saved to your drafts in your project area. If you ever want to come back to it and play around with it, it will give you some pathways so we can either choose the beginner ELL, if you've never used auto-layout, what's new and auto-layout if you just want to see the new features, some examples. Just for you to reference. So you can start building your own auto-layout frames once you get comfortable. And then some resources as well. I will link this article. If you want to read about more about auto-layout, Let's just go with the beginner options. So this'll be a good overview for what auto layout is and why you should use it. And it's a pretty fun tutorial to play around with as well. Auto-layout is essentially a feature in Figma that lets you create dynamic frames that respond to their content. So if you've ever made button in Sketch or Figma or Adobe XD, and you just create a static button. You know that you have to change the width of the button to manually adjust to the texts that you're inputting. So for example, we have a static button here. If we just type, oops, I am a button and I love auto-layout. Oh no. So we don't want that. We want this button to use, respond dynamically, resize dynamically to what we type. So our first step is to manually apply auto-layout. You'll come to the right side panel, click Auto Layout. And then automatically, we can add, I love lay. And look at that now we have a dynamically resizing button. It keeps the padding consistent. And if we create a master component of this, then we will be able to reuse this component throughout the app or website we are designing. And all of your buttons will automatically adapt to the type, the text you need to use depending on each user flow and screen that you're designing for. Another example of how to align multiple elements. If we select and drag these three components here. And we actually can press Shift a, and that will automatically keyboard command auto-layout. And I think Keyboard Shortcuts very, very useful and help you be very efficient. But this just shows that they re-aligned a little bit. We can also select these, shift a little realigned how we can align these vertically. This tool on the right side here lets you choose your alignment. So for vertical alignment, we want, if we wanted to have it centered, we can also select one of these components and actually really easily change the layout and the whole frame size adapts to the changes that you make here. And it's so easy to add other components, like we just can add that one but and we can take it back at it back to this alignment. If we want to horizontally aligned, we can do that here as well. So wait a minute. Oh, you have to select the whole frame. And then there we go. So there's a lot you can do with layout, and it just is so much quicker to realign things with auto-layout applied. This shows the adjusting the padding for a button. This second tool. So right here, you can actually hover over these pieces and drag to adjust padding automatically. And this, this adopts the entire padding. You can also apply individual padding. So if I wanted like Tons of padding on top and then a little padding on the right, which if you want to be really edgy and design patterns like sure, but that's just an example of how you might have some instances are some elements that you would want some specific padding to. Another example of individual padding. So if you go to this spacing between items, you can change. If you have a list, you can easily change the amount of space between each one. This is really useful tool as well. This shows how different elements that are set to re-size with the resizing options. So if we click on each of these, we can actually see how the resizing is adjusted to set two. So for these vertical, these fill vertical. They will fill the entire container vertically. This horizontal one. It will hug the container horizontally, but it will keep this amount of space. So 32 pixels of padding is a lot, is going to stay consistent year. And what that looks like as we can resize. And this just continues to adapt to their horizontal resize. And then if we resize vertically, those vertical components will adopt as well. So that's really useful if you're working with frames that are holding. For instance, here, this is a great example. These social media posts, I'm holding down option and you can actually resize at the same time both ends of the frame that you're working in. Rather than if I just hold down my mouse option, you can do two at the same time. So that's a great example of where resizing comes into play. Because like say if I turn Auto layoff, auto-layout off this, it doesn't respond anymore. It's not resizing it dynamically. This is a newer feature that's really great if you are working with components that you want to be responsive but have multiple elements within it. And you mean those pieces to respond dynamically to the width of the container. Here's an example of the pact distribution layout. So basically you would go here and it's showing packed or space between packed means that they stay packed together as you expand the width. Or we wanted that vertically space between if we were to change. So if you saw this adopt this change when we change that to pack, space between basically means you don't have to worry about the space between as long as you have your padding set. So we have 16 pixels of padding throughout. And then as we stretch this, those elements will respond. The super cute kitty cats will respond. And then they will keep the distance equal and clean. And the 16 pixels of padding on the sides. The alignment feature will allow you to adjust where the elements within a container or floating. One awesome piece of magma that allows for a really easy hand-off to developers. This is actually how I interact with my development teammates. My hand off directly in Figma. This Inspect Tool allows developers to actually grab the specs of your design elements really easily. And this shows a really great example of that. In the Inspect panel you can see all of the different specs and properties of this art board here. So as you click on different items, you can actually see. So for instance, just clicking here like shows the code for this background, for instance. But if we click here, we can see all of the properties in this frame. And it's really easy for your developers to come in and grab those specs. But we're at the end here and we have this fun little challenge with more giddy gas. If we our skills. Basically what I'm asking is to interact with this layout here. So our first task is to, if you click on an image in Figma, you can actually directly select images, silicon set of clicking and a bunch of nested components. If I'm hovering over this and I click or hold down Command C, the image just highlighted. I can then select it automatically without having to click. You want to launch a nested components. So if we do Command D that actually just duplicated our image. We can auto layout enabled. We can add it to the third posts and see where it's laid out and add it there. Then it asks us to move the fourth post to the top. So we only see three, but with auto-layout enabled, we can expand how we see the fourth. We click on that whole component. So this groups card piece here, we move back to the top. Now we can resize our layout again, back down. Now it's asking us to change the width of the iPhone 11 frame to 750 pixels. So if we click and then click again, we've selected the whole frame. So if we change the width to 700150 pixels, everything stretched out. So now it's asking us to change the distribution of the rows of stats. So these social media stats here, we want to select those. And then if we change that to pack, now we can see the entire list of staff. So yeah, give this a shot. It's really easy, straightforward guide. And then we'll go on to talk about some other awesome keyword commands and shortcuts.
4. Essential Basic Shortcuts: So now we're going to talk about keyboard shortcuts in Figma. If you go into a design island, Figma, I'm going to be covering Mac keyboard shortcuts because that's what I use. You can use Figma on a PC with Windows. But if you go into Figma and a file and you click Help and Resources in the bottom right-hand corner, you can actually go to the keyboard shortcuts menu. And all of these will be available to you and they should update to irrelevant to your system. So the essential keyboard shortcuts that we have that will really speed up your workflow and be really helpful in a variety of situations that this one I use all the time as the command backslash and that allows you to hide the UI panels. I use this a lot when I'm walking through designs with my teammates just because it allows the screen to not be so cluttered when I'm not working. Pick color. So this is control C. And what that does is now we have the eyedropper tool. And if I select another element, this gray box here, and I do Control C, I can change that a lot quicker than having to go and manually and select the hex icon and change that what the sidebar, it's a lot faster. And the, if there's anything that you want to search for, a menu or a command that it already plugin, which we'll talk about plugins. Plugins are also great for saving time. You can press the command forward slash, and that will allow you to see different system items or plugins that you have downloaded that you can access more easily.
5. Keyboard Shortcut Deep Dive: These tools are pretty straightforward, outlined in a lot of these elements here. So if you play around with these elements, the primary design tools at the top, on the top sidebar. You can easily start to get a hang for these some more unknown shortcuts that can really help speed up your workflow. If you ever want to shift between the panels here that you see, it can be kind of time-consuming to figure out where you're trying to go with the buttons laid out here. There are keyboard shortcuts that allow you to quickly switch between those. So if you want to if we're on assets, if you are in a different, say the Assets panel or your design system components live and you want to navigate to the Layers panel, you would press Option 1. And then you can easily switch back to the Assets panel with option two and the design panel on the right-hand side. Here, that is option a. And then the prototyping panel, which is where you would use to make interactive prototypes. He can actually link pieces together in Figma and have life prototypes along with the designs, specs, the components as well. The prototype panel is option nine. And if you were to inspect as a developer and you want to Cloud perspective option 0. So those can be really useful tools if you are trying to navigate between panels quickly. So we have some really useful text, keyboard shortcuts. This one I love because for a long time I didn't know you could make lists and Figma. And I thought it was impossible. And I was like, What are you kidding me, but you can't. So if you select your list items, just these rows of text, you can press Shift Command 7, 8, and you have a bulleted list. And you can also quickly change the alignment of these items too with the alignment keyboard commands. So if you once again News option command and the, I guess the corresponding lettering for each alignment. So Option Command T aligns them to the center. Option Command L lines from left, option command right or our lines mem write an option Command J aligns them as justified. You can also adjust the font size, the font weight, the font spacing, and the line-height. And you can do that by using the angle brackets. So for the font size for these list items, if you press shift command and then the left angle bracket, shrink them, the right angle bracket will increase their size. And you can see what that sizing is here. And we can also adjust the font weight by doing Option Command, angle bracket. Sooner, wait for the left folder for right, up until you have the maximum amount for that specific font. The letter spacing is just the command key and the angle brackets depending on which one you use. And then the line height is Shift Option. And then the angle brackets. Once again, we'll adjust the line height. So there are times you might work with images and Figma. And there's some awesome transform as shortcuts that we can use when working with images. Or these apply to other elements as well. But if you want to flip the alignment or the direction of this image, for instance, if we use Shift H, we can change the horizontal direction. Shift B will flip it vertically. The cropping tool, you actually have some capabilities for editing an image in Figma. If he press Enter that option, we'll come up here. And you can actually crop and change the view of this image here. So if you play around with these, you can learn and see how those change. View. But the crop tool, you can change. How much of this you aren't shown. If you hold down Shift that will keep the dimensions as the last word. And you can also easily, if you press Play, you also have all of these features to change the actual appearance of the image with these adjustment levers, you can very easily replace the image by clicking Choose. Imagine. You'll be able to select and upload a new image from your device. If you press Escape and then just view the emergence as normal, you can actually really easily change the opacity of any graphic elements. Like, let's select these items too. If we press one, it changes the opacity to 10. If we press F5, it changes at 250, and if we press 100, it changes it to 100. So there are some options here if you are wanting to change the opacity. So say we were working with this. Imagine we wanted it to me like a top hero image of a website we are building. And then we wanted to create like an overlay. And if we wanted to click the top overlay there, you press F5 and then recurred. And about or something for instance. And if you get what I'm saying, but if just by using the numeric keys, you can easily change this opacity. So if you were working with overlays, that is a really useful tool in those instances. The arranged keyboard shortcuts are really useful because otherwise, if you want to rearrange your layers, you have to manually go in to the Object menu item here, and then scroll down to these, this list of commands. And it's so much faster to user keyword. So if we zoom in and we select this purple guy here, and then we want to send the layer behind this bigger pink shape here. We can press Command left bracket, and that will send, now, it's hidden behind this pink square. And then if we wanted to bring it back, we can press Command, right bracket if that brings. So that brings the layer, just a layer forward or backward. And hue. See over on this panel here, in the layers panel, you can actually watch as if I send it backward, you can watch it, just navigate through the layers one by one. And then if we want to bring it back, we would have to press out all those times in if we wanted to send the layer to the very back as possible, in one click we would just press the side brackets. So I just clicked the left square bracket key. If I wanted to bring it back to the top, heard press the right. Now, if I move this layer out of this frame, then it disappears and it is not actually visible even though it's at the top, it's now at the top of another frame. So I won't be able to see it because even though I'm pressing to bring to top command the right-hand square bracket. It's in the wrong frame. So once I, if I click Command Z, which is undo, it's visible Again because it's in the correct frame. So that's something to keep in mind. A few find the ear layers are disappearing. Now some alignment shortcuts that you can use. If you use option a and D, you can align left or right very easily with those. And if you have option W or S, you can easily change the top and bottom alignment. Align centers is the vertical or horizontal alignment. So if you option H, it will horizontally align the layer in the center. If you option B, it will vertically aligned in the center of the frame or the artboard or the frame that it's located within. And the Distribute Spacing, if we duplicate this rectangle here, we can distribute spacing. Actually, we need it. What more? You want to distribute spacing evenly between a number of elements. You would control option H or Control Option B. And that will align those items cer, a tidy up feature. You can also find that. Here, and you have some options there. But if you wanted to utilize the keyboard shortcut for that, it's just Control Option key and you can kind of see how it took multiple items and just cleaned up the way that they were aligned and made it into an organized list or an organized arrangement of elements rather than having them be a bit off in their organization. And back to auto-layout if we want to add auto-layout, once again, that keyboard command is Shift a. And then that just automatically added auto-layout to these components. And if we wanted to remove it for whatever reason it would be Option Shift a. Now, it's no longer an auto layout. The last thing that we'll go through as creating components with keyboard shortcuts, components are going to make up the bulk of your design library in your design system. And the way these are laid out right now, these are not components except the UN. You see these show purple, the outlines that does indicate that these are a component. And you can see here that this is a direct child of a master component. So if we go click on the form field master component, we can actually see our list of design components and basically the many design library that makes up this design file. So for instance, if we, if we change one of these components, like Let's change the color of the label to read. We will see that update take place throughout the entire anywhere that the label in place holder text input component is used. We'll see that change throughout. So that's just to emphasize how important it is to use components in your dieline system because you would hate to have to change every single input component manually and to create a component. So if we wanted to make this entire top, these top three elements or components, or just press Option Command K. And now this is showing that it is a component. And we would just want to take that master component and place it within our design system here in the components page, so that's organized. And then we can take a copy. We can take a copy of it from here by pressing the Command C, the keyboard shortcut. Or we can actually go into our assets panel and then we can see that new component. It's the same one. So if we go back and we find that component, we can drag it in and utilize it here. And then now we see that this is a child component of the master component that we just created. If you wanted to detach this as a component so you can make it a different component that might be a similar style, but maybe you need to create a new component that utilize this, some different design elements. You can press Option Command B, and that will turn this back into a blue outline, which indicates that it is no longer part of the component system that we were just using. Another thing, if you don't want to have to manually go to your assets panel. You can press the Shift I keyboard command and you can pull up just a really handy list of your components that are that you're using within your asset library and easily grab them that way.
6. Bulk Renaming Components: Another shortcut that I use often as the bulk rename feature. So if you want to, Let's say we have four frames, or frame 2, 3, 4, 5. And we select all the frames. We can, we can press the Command R, the command RT, shortcut, and then we can rename these to, let's say, rounded sir, goals. And we can add even a number, ascender or descender. So now we have rounded circles, 1, 2, 3, 4. So we just easily renamed all of those components without having to do it one by one. You can also, if you ever want to select a certain number of components within a general area, you can hold Command, Shift and drag. And then that will select all of these or just, you can click them too. So if we only wanted to rename the ones that I just clicked, then you can do that and then press Command R key again. And then we can add the number sequence. And then it just took all of those. It's out of line because we just randomly selected the elements. But now we have abc 1, 2, 3, 4, 5, 6. So it's really easy to quickly rename components outweigh, rather than trying to do it manually and sequence number or sad or something, it's a lot quicker to do that way.
7. Nudge Tool Tip: I'm gonna talk about the Nudge tool really quickly. So if you've worked on Figma and you, you use your arrow keys, you can nudge an element by one pixel. And if you hold Shift, you can nudge it by 10. But if you go into the top-left menu item here and with the logo, you can go to Preferences. And then at the very bottom of preferences, you can set your nudge him out. So if you wanted to move your, your big nudge instead of ten, you could update that. And now it's moving a 120 pixels with the corresponding keyboard shortcut that I'm pressing. And while holding shift in a direction that I would like it to go. So I think 10 works pretty well for the most part. But if there was some reason you would want to change that, that's how you can do so.
8. Figma Plugins: Okay, Now we're going to talk about plugins which are amazing. There are so many amazing plugins and Figma, if you go to the community section and you're going to actually find so many resources. So you can find what's trending. You can find plugins. Thick jam is a newer online whiteboarding tool, which is really fun if you work in that virtual remote environment, which a lot of us do now, you can use these templates to brainstorm together for workshopping with clients. It's amazing. You have access to best practice design systems. Figma provides wireframes, illustrations, icons, typography, mobile design, web design UI kits, just anything you could think of as a kind of Starter Kit or template. You have access to so many professionally designed templates to play around with or to build off of or of course, you know, we're not copying or stealing anybody's work, but these are some helpful resources. And a lot of the times, if they are royalty free or free to use or Creative Commons licensing and you don't have to worry about copyright, then they will list so and they will say so. A lot of these are marketing tools, so they might off, have a link that will take you out ephedra to buy a whole wireframe kit, for instance. But either way, super great to get inspiration. And with plugins, there is just so many thousands of plug-ins that are made for Figma that will speed up your workflow and make your life easier. One that I use a lot is I create a lot of user flows and my work. So if you click on one of these tests, these are words and click Shift or hold shift and click the Next item. You just see that arrow is automatically populated to connect to this flow. And you can either select the individual elements, I'll link them together as well. So if you're linking wireframes or elements to show what a user flow looks like. This is so easy. You can easily change the color. You can change the terminals of the arrows to be a different style. And you can also, this is dynamic, so if you drag it, it will automatically change the length of the arrows for you. Another plug-in that I use very often is the Unsplash plugin. This is so useful if you create, especially if you're getting the high fidelity mockups. If you create, if you needed to create a user profile, for instance, and have this circle, have a user image in the circle. If we typed in young adults, we can get this awesome list or this awesome selection of images from Unsplash, which are all free to use, royalty-free imagery that the photographers knowingly upload to allow people to use their work without commercial rights. So are you are able to use these for commercial rights without worry about copywriting issue. So if we select this image the way that this is programmed, it knows to scale this to detect what the focal point of the image. So you can still change the focal point though, if you do want to adjust that by clicking the fill section and clicking on the image and then choosing crop. You can adjust that here. So you can, if you want it to be more focused on her face, you can do so with that tool as well. Another plugin that's really useful if you use data visualization at all in your work a lot. Then there are tools or you can input your data. And you can automatically have a line chart, scatter chart, bar area pi, or donut chart created for you without having to manually build one or by a UI kit with data visualization, if you're just looking for a simple chart type, you can input your data and automatically at it. And you can adjust this as needed to fit your designs. So that last one was called charts. This plug-in for charts is called chart. But you can see all of the different options here. This one is actually offers a pro version, but you can use random data. You can import a table, or you can use a JSON file. So that's really awesome if you have those resources available to input the data. And then it will automatically draw a chart for you. So if we select this element here, and then we go to our plugins and click UI gradients. We have access to a ton of precreated gradients. And good gradients are actually kind of a skill. You don't want it to be too harsh or the transition to me. Not natural. So this is a really good option if you just want a good selection of. Really beautiful gradient cider fingertips without having to think about it too much or spend too much time recreating them. One more plugin that I'll go over option for plugins is icon library plugins. So Material Design icons. Material Design is Google's design system and best practices guideline. And they have just an enormous set of pre-made icons. You can use. A lot of people like to design their own icons. I do a lot of work where the UI doesn't really need to be creative. It needs to have a more professional or familiar interface. So I like to use pre-made icons because it saves so much time and material design. If you use a component library for her development that utilizes material design best practices and their design guideline. Then it's really easy to name the components in your design system to match those. In the developer specs in your developers will know exactly what icons to use and they can grab the specs to know the color, the size, and then the name. As long as it's consistent with the librarian, Material Design icons, then it will be very easy to handoff, but you can just easily select all of these. And Material. Design is open source. Oh, that's great, and you don't have to worry about it. As far as copyright and things like that. We're having a commercial license. And then there are other options too. There's streamline icons is a huge icon library. And they actually have a pro option to get access to the SVG file. So if it loads, but they have a huge amount of categories and their icon library. So you have all of these different options and it's really easy to navigate and sort. Like if you, I mean, they have furniture decoration category, they have a category for everything. So and they're really stylish and just really cool and there's so many options to choose from. But if you do want a little bit more of a trend near or updated, I guess. Kind of unique set of icons which I think streamline has a really good variety. You might have to, it's worth it if you're going to use it a lot, It's definitely worth it, but you will have to pay to get that access as a premium user. And you also need to look out what commercial license you're using and the number of users you can have an order to use it commercially. So that's something to think about as well. But utilizing an icon library like this will save you a ton of time and it's fun to go through and pick these icons out. And then you can actually start to take those icons here and create those components. And pesos here to start building on top of your icon Librarian, your design system. And really easily switch back and forth between rows components. And the way you switch between components. One more quick shortcut is if we created a master component of this. And then if we did so for this one, this one, if we duplicate all of these, we now have these child components. And we can easily switch between the instance of these components. So here it says the icon instance because home solid, we actually see our icon list that we just created, these child components showing up in this instance selector. And we can easily change which instance we have selected. So that is extremely useful. It's good to make sure you're naming conventions are consistent because you're naming conventions while determine how they will show up in this swap instance selector. So that's something to keep in mind as well.
9. Your Project: Figma Community: All right. We've gotten through a lot of shortcuts today and a lot of productivity hacks now we can get started on your class project. I would like you to navigate to the community section and Figma and find a UI kit template that you would like to play around with and go ahead and download one. So I went and duplicated the auto-layout table kit. So this is a layout get that allows you to create dynamic responsive tables really quickly. There's a lot of these available in Figma community section and download or duplet kit of resources. So if we click duplicate, it will create a new project for me that is my own copy and I can edit and change however I want. And so they have tips and tricks page in here that shows you how to use the kit. You can swap out variance, you can customize everything with components to suit the needs of the table you are designing. And here you have your textiles, your, your color system. So all of these, you can actually find that color system here too on the color styles. So this allows you to dynamically change those. If you go ahead and click into a color, you can actually edit that color in your color system and it will change throughout. And then they have their basic UI components which you can change the style of. These are fewer on it too. And select a button. And now all the texts buttons are in this teal color instead of the royal blue. So there's so much you can do in the available resources in the community for Figma, I would love it if you downloaded a UI kit that speaks to you. There's a lot of fun ones. And if you just started to play around with these and create something, just create something and I read, try to utilize all of the shortcuts we learned. If you want to utilize a design system kit and just trying to create your first landing page. And you're, if you have a project you're working on, but you want to try to apply some of the shortcuts or productivity hacks. You upload a screenshot and share which productivity hack or a shortcut that you learn from this set is going to really help you and you're moving forward as a designer.
10. Thank You!: Hey, good job completing this course on Figma productivity tips and tricks. I am really happy that you are invested in your professional growth and your personal growth and improving your day-to-day workflow and investing in your education, continuing education, or just learning a new skill that you've been interested in. And I hope to see you in my next courses. Please subscribe and follow me and you'll stay up to date on the next content I release. And if you have any input or feedback on the types of content around design and the design industry that you would like to learn more about. Please let me know, give me some feedback and I can try to cater some courses to what's being requested. Thanks again.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
