Streamline your workflow: The efficient UI/UX design process in Figma | Nicole Saidy | Skillshare

Streamline your workflow: The efficient UI/UX design process in Figma

Nicole Saidy, Designer, Coach, Speaker

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (36m)
    • 1. Intro

      0:42
    • 2. The design process

      1:31
    • 3. Why Figma

      2:08
    • 4. Intro to Figma

      8:32
    • 5. Step 1: Building your wireframes

      10:10
    • 6. Step 2: Making your wireframes interactive

      1:19
    • 7. Step 3: Styling your design system

      6:17
    • 8. Step 4: Finalizing your prototype

      4:39
    • 9. Final thoughts

      0:42
44 students are watching this class

About This Class

Hi, my name is Nicole and I’m a UI/UX designer with 7+ years of experience. Together in this class we are going to create a consistent and scalable prototype in Figma in 30 mins, from wireframing all the way to handing off to developers. If you're not familiar, Figma is the best collaborative online design tool out there.

Why take this class?
This class is perfect if you want to:

  • speed up your workflow and save 90% of your time
  • learn how to use Figma’s powerful features
  • create consistent designs and avoid repetitive work
  • design collaboratively with the whole team in mind
  • build a full interactive project without leaving the app

What am I going to get from this class?
Throughout the class you will:

  1. learn the ui/ux design process
  2. create interactive wireframes
  3. build a scalable design system
  4. design an interactive prototype
  5. collaborate with clients & colleagues

bc1d99e6

Who is this class targeted to?
This class is great for all types of people:

  • As a beginner you will learn the UI/UX design process while using Figma.
  • As an experienced designer, you will learn how to optimize your performance by building consistent design systems.
  • If you’re a designer who works within a team, you will increase collaboration and make your team happy.
  • If you’re a freelancer, you will increase your income by working 2-3 times faster.

Note: Since the course is made to be as efficient as possible, you may find the videos a bit too fast. In that case, feel free to pause to apply the exercises then continue.


Enroll in my complete design course for non-designers: Become a UI/UX designer 

Transcripts

1. Intro: Hi, My name is Nicole and I'm a UX designer. My work mainly focuses on your I X design from sketching toe wife aiming to prototyping ideas. And this is what I want to teach you Today I use fig ma in my your i X design process because this is the complete package I can wire frame design prototype, collaborate and hand off my work all in the same tool in this class you will learn how to use Sigma in your own project how to build consistent scalable design systems and the complete design process from why framing toe handing off your prototype This classless targeted for both beginners who want to learn the ideal design process and experienced designers who want to optimize their performance. See you in the class. 2. The design process: Congrats on enrolling in this last. Before I teach you how to use Sigma first I want to share with you the ideal design process you should follow as a you are you X designer? A lot of people ask me, how do you start? What design process do you use? How many steps are there? Some people think we start by just opening a design file and immediately start designing. This is not idea. Great designers have a set of stages that they go through to be able to do what they do. There are three big stages for every you are UX design, project, understand plan and design. We do this approach where we understand and plan before we design because it saves a lot of time. It should use this back and forth communication, misunderstandings and problems you may encounter in the project. The first stage understand is about understanding the business behind the idea. It's about extracting the information needed from the client, like identifying problems. Find the solution, setting your user goals and defining personas. The second stage plan is about creating the user journey off your after it's about sketching it on paper and sharing it with your clients. Then, after flying her up and confirming the paper wife frames, the third stage is about wife aiming, designing and prototyping your and this is the stage that we're going to cover in this course. I'm going to show you step by step, how you can create interactive wire frames, bell design systems, trade prototypes and collaborate with your team. In the next video, I'm going to talk about why you should choose Sigma as your design tool. 3. Why Figma: So why should you use Sigma you probably heard of for a shop illustrator or in design? These three tools are not made for your I X design, and I do not recommend to use any of them. Photo Shop is made for photo editing. Illustrator is made to draw illustrations, and indie line is made for magazine design. The only reason we used to use them years ago was because these were the only options we had. But now we have many tools that are specifically made for your I X design. In 2018 the best design tools would be Fig, MMA sketch, Adobe X'd and a few others. I think stigma is the best one of these options. Why? Here are some main reasons First Sigma is free for individuals, unlike Sketch, which is $99 for Adobe X'd, which is stand all this for a month. It does have paid subscriptions for bigger teams, but it's free if you're an individual. Also, Sigma is Web based. It works in the browser. This means it works on any platform. You would think that since it's Web based, it would have a lot of bugs. But Surprisingly, I've been using it for the last year and have barely encountered any nature issues in terms off your I design. It's very intuitive to use. For example, constraints enable you to adapter designs when the screen size changes and components allow you to reuse elements across your designs. We're gonna see more of that later on. Vignal also has prototyping and collaboration features built, and you don't need separate prototyping tools like marble or envision. Sigma also has real time collaboration with designers. You and other designers in your team can work on the same file at the same time. You can also create design systems with linked. You are components that the whole team can use. And finally, you can hand off to developers easily, who will have access to coat styles and exporting features. The only few downsides off stigma is that it doesn't work offline yet, but you can work around it by opening the file before you go off line. So, as you can see figure is the complete package that enables you to work on the full design process. In the next series of lessons, I will start with an introduction to Fig Mama, and then we'll show you the step by step Euronext design process using signal 4. Intro to Figma: in this video, I'm going to give you a beginner friendly introduction to Fig MMA To start using figment on your device. All you have to do is simply sign up using your email and password and you're ready to go. You can open Fig Ma and the browser as a normal er l or even use the desktop up. We have the last button here to create a new foul and the import button when you want to import other files like sketch files or that fig files. Now I'm in the drafts water. This is where the files you created are stored by default, but you can also have teams and invite people to it. Let's create a new farm. This is the toolbar here where you'll find the tools you need to create objects on the left side. There's the layer panel in all the right. We have the properties panel. Let's start by creating a frame, which is the screen we're going to design. When I click on the frame tool, I can choose one of the suggest that presets here on the right. Let's choose iPhone eight and let's rename the frame toe home as this will be the home screen off my arm. Now let's create the Natwar. I will choose the rectangle tool while I'm drawing Fig. My help me out by snapping my object to the borders of the frame. I'm gonna make it white and add the subtle shadow to it. Next, I'm going to add the title of the screen. This is the home bitch. I'm just going to add text and call it home. Let's make the font size 16 pixels. Center the text, align the textbooks in the center of the frame and centered vertically using the smart guides. Let's get things organized. These to go well together in one group. So let's select Um and group the selection and rename them to naff bar. Now let's create a rectangle here. When I hold out and hover on the frame, I can see the space between the rectangle and the frame. It looks like it's not centered, so let's choose a line center here. This will be a car design, so I'm gonna make it white on the settle shadow to it, A card usually has a border radius, so let's have that from here. Four pixels now I want to add an image to the rectangle. The best way to do this is to change its will to image and choose the image from the finder . Now I'm going to add the title of the card here under it. Now let's duplicate it and add another, smaller subtitle Under it. I, like this one, have a smaller size and also a lighter Grey. That's name its subtitle Off the card. Now these objects here go well together, so I'm just going to select them and hit command Ito. Group them now say, I want to create another screen and let's say I decide I want to change the background color of the NAB Our I would need to change the color on each and every screen and imagine you have 50 or 100 screens. You would spend hours working on one silly alteration, So to avoid these times wasted, we use components. This is where it gets really interesting. A component is an object that can be reused multiple times. This number is going to be the used several times in my up, so I will select it and click on the component I can on the top. This converted it into a component. It has this nice I can in the layer panel. Let's do the same for the card, since it's also going to be used as it is, I'm going to Dublin, Kate the frame again Now that I used components. Now this naff bar is an instance of this network opponent. The 1st 1 we created is the original one, whereas this one is the complicated one, which is an instance off it. Now. Any change that happens on the original one gets updated on its instance. However, anything that happens to the instance does not update on the original, as it's only an instance of it. Now here's where it gets even more interesting. We can make nested components. For example. I want to make a now bar that has a back button. I will create a bag but in here and then select the instance and the back button and create another component from it. This time I will call it now far slash. Back then, I will call the original one slash normal. Let's Topic eight this frame again to have another detail screen now because of added this slash i can select which type of naff barring it from the component menu. Here. Let's talk about constraints. Constraints is a way to make your designs adapt to the frame size right now, if I make this frame bigger in which it behaves as we expect, it doesn't adapt to the frame size. But we can fix that and make it kind of responsive to the screen size. So let's make this nah bars horizontal behavior left and right instead of left and do the same for the card. The stream is now responsive with the frame size. Let's make the other ones responsive to We can also set concerns vertically. So let's say I want to make this card bigger for the Detail Street Right now. It looks like this, but I want the title and subtitle toe always stay at the bottom when I make it bigger. Since the titles are inside the component, I will go to the original component and change their behavior from there. So I'll say on this title. Make the vertical behavior bottom on Lee and same for the subtitle. Now, when I make the card longer, it act the way I want. And of course, that applies for the other instance of the component without having to redo it. It's very important to note that wire designing you should preview your design in 100% few every once in a while just hit command zero, and it zooms to 100%. This is to see the font sizes in real size before I show you how to make this screens interactive. In case you need to export to an image, just select the friend you want to export and go to export on the bottom right, And here he can choose multiple sizes and multiple formats at the same time. Keep in mind that you don't have to save anything in FEMA because it also saves your work all the time. Now let's talk about prototyping. So far, we've been in design world. Now let's just prototype mode. When you hover on layers, these booths circles short to create a link between screens. We just directive the circle to where you want to link it to, and since this is the original component, it applies the singling toe all its instances. So I need to change this thing to the second guard. Instead, when I click outside of screens, I can see all the links created. Let's get rid of the ones created by default from the original compartment. I simply drag and drop to remove the link. I also want this back button to link back to the homepage. I can do this one time, and it gets instantly applied to other instances. This blue arrow means this is the first screen off the prototype. You congee that by simply dragging it and placing it on the screen you want. Let's play our prototype by hitting on this play, Aiken. Now we're seeing the interactive prototype. Now all the links we created are working the way we want. Notice that whenever I click somewhere that is not a link. It will give the blue flash to tell me where the length objects are. You and the viewers can comment by using the Bubel Aiken and command right on the prototype . Now, when you want to share your prototype with your clients or co workers, simply click on the share prototype and copy the link. When you go back to the foul, you can also see the common tier in the fight itself, which is very convenient. When you share your files with developers, they can see the code behind your designs. When you choose the code mode here, you can choose the languages CSS I ask or android. So consistently select an object and see some design properties here. You could also change the coat format. Now this court feature is not used to just copy paste all the code of your design. It makes more sense for advanced design details like shadows or radiance. Developers can also export layers, objects or frames the same way we did. So this was an overview on the futures off Sigma. I recommend to start playing around and get used to using it before you start creating your own up. In the next lesson, we're going to start working on a real life project. The first step will be why framing 5. Step 1: Building your wireframes: in this video, I'm going to start by building the wire frames. Wire frames are the skeleton off Europe. It should include the layout functionality and your ex, but it shouldn't show the design or colors off that throughout the class. I'm going to build the main user journey off Airbnb. I like using Airbnb as an example because the design is well thought off and it has a simple and consistent design system. Y friend should always be great scale with no colors or designs. Stop to be able to focus on what matters. Follow along with me and build your own website. If you don't have a website idea, you can design Airbnb, Twitter or any other op you use before you move to digital wife frames. You should first sketch your wife frames on paper. So I previously sketched the wife frames on paper, and this is how they look like the home page. Search results listing details, summary and payment. Now in fig MMA, we're going to build almost all the way frames, using components. You might feel like it's gonna take some extra time in the beginning, but it's going to save you hours later, on. The first thing we're gonna do is create a your eye library here. I'm going to start with the text component, so I'm gonna just create a text layer and converted to a component. This will be the normal size right now. We don't care about the design and fund stars. I'm going to keep it like this. Let's make the other textiles as well. Make sure the name off the layer stays the same text and the name of the component should always be Text slash and the type of star H one would be 36 pixels. H two will be 28th and each three will be 20 and the small text would be 14. This space will be for other components that we create throughout the wife Anything. So let's create the home front. Before I start creating objects, I'm gonna create the grid that I will build in. Let's say I want my content to go inside a 900 pixels gripped. The easiest way is to just create and 900 pixels rectangle. Then we need to show the rulers by hitting shift. Our then drags on guards from the ruler and snapped the guards on the rectangle. I'll delete the strict angle. Now let's make the NASA bar. Now let's use the text we created there and copy and paste it here. To create the menu, Lings become a host trips, messages and a profile. Aiken. I'll group these manual ings just to keep things organized. I also need the local here, so this now bar will definitely be used throughout the screens, so I'm going to convert it to an aspirin component. Let's move a bit faster. We'll have an H one title here. I need the text toe watery size with the content inside. Let's make a big search bar here. A placeholder. Try Los Angeles. Then I'm going to create a button here. Let's make a darker and converted to a component. Now that I have the overall look, I'm going to move it to the star guide, then copy an instance of it, then edit the text to search what's next. Let's add a section titled here and then this title will probably be in H two. Let's do the listing card. This will be the image, and here we have the type off listing entire apartment. This will be a small text. We'll have the listing title here, and I'm gonna make it the Nature Street. I've noticed that I want all my headings to be bold. So let's just edit that the library. Now I'm gonna make another small text to type the price in it. That's the listing. Now I'm gonna make it a component and simply duplicated to create two more next to it. Let's populate the other two to make it as real as possible. All right, The next section will be experiences. It's very similar to homes. So I'm gonna just replicate all this section and simply populate with a new content. We're almost done from this screen. We still have the footer, so let's create a big rectangle and add some links in it. The every and e section will have about press and help and this is the title, So let's make it vault. I'm gonna make this as a group and call it Footer section. Now let's duplicate this to have the same but different text. Then let's make this footer as a component. So done we just wife framed the homepage. Let's do one more stream. I'll duplicate the screen as we're going to use many similar components from it. Okay, let's get rid of everything except the listings and this page. We're going to place the content full with instead of inside the grid. I'm gonna make the listings a bit smaller for the map. I'm just gonna create a big rectangle in this screen, the map discovering the height of the stream and there's no footer. So the height of my screen is 900 pixels, and the novel is 60 pixels. I can just type 900 minus 17 and it will calculate the size for me. Let's duplicate this free listings to populate this place. We still have the search filters here to save some time. Let's duplicate the button here as it will look a bit similar. I'm gonna make everything smaller than detach it from its component. Let's make this the date filter. And when I'm done, I can make it component and call it a small up line. Let's add two more filters, guests and hold tank. The last thing I'm gonna do is at the small search bar. First, I'm gonna make the search bar component. Then I'm gonna duplicate the big search for detection and style it it needs to be smaller and have a border with a smaller text. Now let's make this another component, and we'll call it Search bar Small. Let's make the height of the frame the same height off my screen, which is 900 fixes and done. Let's stop here. I'll continue. Why framing the other screens and the next lesson we're gonna make them interactive. 6. Step 2: Making your wireframes interactive: I've already wear friend. The other screens off their baby listing details, the summary and the payment streets. Now let's make these Koreans interactive. First, we want the search button to take us to search results. Then we want the listing toe. Always take us to the listing details. We can do it from the original component, and it applies on all its instances. Then the book button takes us to the listing details. The continue button takes us to confirm, and they and the confirming day takes us back to the whole beach. And finally, we want the local toe. Always take us to the homepage. Let's play the prototype. Always make sure that this day of prototype is 100% to see the real sizes. Now, after you're done with the interactive wife frames, you can share the prototype with your team or client and get feedback on the layout interaction and overall, do you X. As you can see, this step didn't include design at all. In the next lesson, we're going to design the components to convert these wife frames to a design prototype 7. Step 3: Styling your design system: So far, we've boyfriend the screens and made them interactive. And while doing that, we build a year I library of components. Now we're ready to start thinking about design. We can now start on these components that we created. I've placed all the original components in the U I library so that it's easier to design. Let's start with color. I'm gonna start with the primary brand color here. I've already copied the urban deeper colors, so I'm gonna baste it. Then I'm gonna duplicate this color to create the accent color. Next, I'm going to choose the different grace that I'm gonna use for the interface design. Let's start with the darkest one. I'm gonna start with the default Dark Grey. Then I'm gonna play around with it to make it a bit blue. Now that I have my based darker color, I can choose other shades off this great easily take the same color by using the color picker controversy. And now we can choose a shade of this great by struggling the H S B format and making the V , which is the brightness lighter when you see that this grace turning out to be two blue Just make the saturation. Just s a little less Try to make around five different greys with around 20% difference in brightness. These are the different shades will be using in the design. All right, so this is my color palette. Now, let's do the fronts because we've created textiles as proponents. Now we can change them from the library and it will be applied on all the screens. I want to change this phone toe afford very similar to the one area and be uses. Choose Avenir. I'm gonna make all the headings heavy and the rest Roman. Now all our text applied the same front stuff. To be able to use these colors quickly, we can add them to our color presets. Here, you could either create a new color here or we can't replace existing colors. Now it can select all the text and make it the default dark recorder. I also want the primary and accent colors to be in my presets. So I'm just gonna delete the old colors here. Quickly, then, are the two new colors. Now let's do the bottles. I want my buttons toe always peopled. Both buttons should always have a border radius and the normal Latin should have the primary color. The outline. Milton should have a border and an accent color. Okay, The input will have a small border radius and a grey outline. The labels design will have a light grey outline as well on the border Rabies. Let's do the now for The network has a wife by the wrong color and a great border, but only on the bottom. We can do that by adding a drop shadow with nobler and one pixel on the Why This way, it applies only on the bottom. And I need to place the Airbnb I can. So I'm gonna just change the feel of director. Go to image. I want my profile picture to fill the strict angle. So let's do that as well. So that's the number for design for the listing card. We need to first make the border radius stay pixels. Then I'm gonna make the listing type upper case, have a bit more letter spacing and make it even smaller. The price. I'm gonna make it lighter gray color. And now let's do the search bars. The big one has a white background color and a light gray border, a border radius and a drop shadow. I'm gonna add the mike in here. There are many ways to add items on your design. You can either use Aiken phones like front also or you could just grab in. Svg Aiken. I'm gonna go up this. I could that I previously download it, make it smaller placed inside the search component and make it great. The smaller search bar has same design, just smaller. I can simply right click on the big search bar copy style and based it on the small search bar. Then I'm going to make the shadow a bit more subtle. Then copy the search I can and make it smaller for the footer. I'm just gonna change the field to white and then at the top quarter and then lose them up with. So that's it. We're done designing, argue I library. We now have a design system that we can use throughout our product. Let's see how our screens look like now, just by designing the components in the U I library with screens are almost completed. How awesome is that There are only a few minor alterations to be made. I'll do that. Then in the next lesson, we're going to finalize the prototype and make the screens responsive. 8. Step 4: Finalizing your prototype: So I've made the last situations on the streams we designed. I've added the images, the Aikens, and started all the screens. Let's see our design live in the prototype. This looks more like Airbnb than urban D looks like every indeed. The last thing we need to do is make our design a bit more responsive before we finish the project. Doing this will help developers implement our designs with responsiveness in mind. It allows us to translate our ideas and show them what happens when the screen gets bigger . Right now, our design is not responsive. So let's think about how we wanted to look like. So we want the components that have full with toe have left and dried constrains and the other things to stay in the center with smallest. So let's do that. So the never and the floater constraint would be left and right. And let's do that for all the full its components, then the easiest way to make all the content stay in the center is to simply group them all with Comanche. And let's do that for all the center confident, and I will give them all a constraint center for this screen, however, I want the company to scale with the screen size. So let's see how everything turned out in this screen. The full with Natwar in Footer, stay on the left and right, whereas the Continent stays at the center. In this screen, everything scales when I decrease and increased screen with, and this screen is similar to the home page, so my company is still in the center. Okay, that's for light responsiveness between break points. Now, when there's more layout differences between screen sizes, that's when you need to design multiple sizes. For example, in the homepage, I definitely don't want to keep a three column grid on tablets, sizes and mobile sizes. So let's make a mobile version off the whole bitch. I'm gonna start by duplicating the homepage frame, and I'm gonna hunger up this content by hitting command ship G and move it a bit to the left. And now here I'm gonna place the cards under each other. We can use the same components we created and hide some layers on mobile, for example, here in the network, I want to show the number, but I don't want the menu links inside it so I could just hide them. Now that I've made most of my content. If it in the mobile view, I can change the frame size. Before I do that. I need to change the constraint behavior off all my content to left so that they keep left when I changed frame size. Now I can change it toe iPhone it. Then I'll make the frame told her for the footer. The design will change a lot, so I'm gonna have to detach it from its instance to change its position. Next, I'm just gonna move these under each other. Each one title here should definitely be smaller on Mobile. I don't want the search button to show on more while so I could just hide it from the layers panel. So that's it. Let's see how it turned out. As you can see, we designed this website with 99% components. This is the key to become a great, efficient designer. Remember, before you finalize your project and handle for developers, make sure your layers and components are well name. Try to name all your layers to make sure your collaboration goes smoothly with your colleagues. After done simply share the prototype with developers so that they can start inspecting the design and export images. I've added this figure file to the description off the class here, Frito duplicated and reuse it in any way you like. If you want to challenge yourself, you can add more components to the eye library and continue designing the other skins off their baby. 9. Final thoughts: I hope you enjoy this last. You now know how to design with the ideal design process. Using figments powerful features, you learned how to build interactive wire frames, build design systems, collaborate with the team and hand off to developers. You can now use this process in your daily work whether you're feel, answer or working within it before you go. Don't forget to leave a review and share this course with your network so that people can know about it. By the way, I have a complete course that teaches absolute beginners how to become your I X designers. Check out the link in the description. Make sure to follow me on Twitter and on my medium block where I block about design. I wish you best of luck in your design career. If you have any more concerns, feel free to post your questions by