UI Design Handoff to Development. A course for UX/UI Designer (Sketch & Figma) | Christine Vallaure | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x


teacher avatar Christine Vallaure, UI/UX DESIGN + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (1h 48m)
    • 1. Intro

    • 2. Hello, what how and why

    • 3. What does the developer need from me?

    • 4. Overview of design & handoff tools

    • 5. Comparing Figma, Sketch + selected handoff tool (Zeplin, Abstract, InVision)

    • 6. Can I use InDesign, Illustrator, or Photoshop

    • 7. Course Material & Download

    • 8. File structure and helpers

    • 9. Colour stylesheet

    • 10. 08 Typography stylesheet

    • 11. Other styles

    • 12. Defining grid system & distances

    • 13. Components overview and states

    • 14. Images, vectors & exporting assets

    • 15. Understanding responsive grids

    • 16. Setting up & documenting responsive and adaptive designs

    • 17. Flowchart and prototypes

    • 18. Handoff with Figma the right way

    • 19. Handoff with Sketch:Figma + handoff tool (Zeplin)

    • 20. Before you go

    • 21. Code peek

    • 22. Thank You

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated






About This Class

I remember handing off my first web design for development. I was super excited and spent hours getting everything perfect.

Discussing details back and forth with my client, and then sent it off and thought I was done.

And then I saw it in the browser. It did not look like what I imagined AT ALL!

I did not understand why the real thing looked so different from my designs.

I did not know why images were blurry on some screens and crisp on others.

I did not understand why my typography stuck together like chewing gum

I did not understand why everything was just a bit all over the place.

And I don't even want to mention what happened on different screen sizes.

And when I asked for advice on how to fix this, I got lost in translation. So I started reading and researching. I talked to other designers and developers. I tried out different tools and techniques that I would like to share with you.

This course is aimed at beginners in web design or advanced UI Designers, thriving to improve their handoff experience between design and development.

So in this class, we will learn about:

  1. All the elements the developers need from you

  2. Different design and handoff tools on the market to help you

  3. Setting up Stylesheets the best way

  4. Export Assets in the right form and size

  5. Setting up Component Libraries and Specs

  6. Really understanding responsive grids and typography to make the right design decisions early on in your design process

  7. We will also look into how to share your Figma or Sketch designs with the development team in a professional manner.

So, in short, at the end of this class, you will have the perfect setup for your design to get coded the way you imagined it to be. And your developers will probably love you this little bit more too.

Meet Your Teacher

Teacher Profile Image

Christine Vallaure





Besides client projects (visit christinevallaure.com for references), I am building moonlearning.io, an online learning platform for UX/UI Designer. I also write about Design & Code on Medium and my own blog.

For more information about me please visit my LinkedIn page.





See full profile

Related Skills

Creative UI/UX Design

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive


Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere



1. Intro: Hi, I'm Christine, a UX/UI designer. I remember handing off my first website for development and I was super-excited and spent hours getting everything perfect and then sending it off and thought I was done. Then I saw it in the browser. I did not understand why the real thing looked so different from my design. I did not know why my images were blurry on some screen and crisp on others. I did not understand why my typography stuck together like chewing gum and I did not understand why everything was just a bit all over the place. I don't even want to mention what happened on different screen sizes. When I asked for advice and how to fix this, I was completely lost in translation. So I started reading and researching and I talked to other designers and developers and I tried out different tools and techniques that I would like to share with you today. This course is aimed at beginners in web design or advanced UI designers that really thrive to improve their handoff experience between design and development. In this class, we will learn about all the elements the development team needs from you, different design and handoff tools on the market to help you, setting up style sheets the best way, exporting [inaudible] in the right form and size, setting up component libraries and specs, really understanding responsive grids and typography to make the right decisions early on in your design process. To sum it up, we will also look into how to share your Figma or Sketch designs with the development team in a professional manner. In short, at the end of this class, you will have the perfect setup for your design to get coded the way you imagine it to be, and your developers will probably love you just a little bit more. 2. Hello, what how and why: Hello. I'm Christine, and I will be leading you through this course. A very, very quick intro. What are we going to do? Well, you probably watched the trailer, and if you didn't, then definitely do so. We are here today to learn more about how to improve a very, very tricky part where design meets development. This is where a lot of the time both parties end up a little frustrated. How are we going to do that? I will run you through an old project of mine and I will show you in a lot of detail on how I set up everything for best results. Ideally, you already have a project at hand that you would like to improve for handoff or one in mind so that you can work along. Don't worry, there'll be a lot of screencast and action, and it's not only slides. Who is this course for? Well, basically for anyone who would like to improve the process of handoff. If you just started working with web design or if you're an experienced designer, but this topic still gives you a headache, also, if you're a graphic designer, moving into UI, this course should be of help. I will be using Figma for most of my examples, but this is almost identical to Sketch except a few minor things and I'll make sure I mention them wherever important. The final chapter, I will have one chapter in handoff for Figma and handoff for Sketch to make sure that you can really use either. As this is more about a general understanding on how to handoff different aspects of design, you should also be able to use any other software if you really want to. I'm going to have a whole chapter on Figma and Sketch and all the different handoff tools so you can really decide what you would like to use. Let's go and get started, and the first thing we want to do is we want to get a general overview of all the aspects we actually need to hand over and then dive into detail in each of them. 3. What does the developer need from me? : Welcome to the first chapter. Before we jump in, we want to get a better overview of what a development team actually needs from us. Let's put together a list of things that we need to prepare to get the best possible results. Throughout this course, we will then look at each point on our list in more detail and make sure that we have the perfect setup for a great collaboration between design and development. The first thing is obviously to give an overview of what our design looks like in all the screens that it includes. We will look at different ways to handle those screens, and also we'll look at inspect tools for all the tiny details. We also need to make sure that we communicate how those screens are related to one another and how they behave with one another. We'll set up flowcharts and also have some basic prototype, and to handoff. As the development team basically redesigns everything you build in code, they will need to know about all the details. Make sure to give all the information. That is, text styles, what font are you using, how is it used and when is it used? We're going to set up a style sheet together. The same for the colors, we're going to set up a style sheet with all the right values. The other styles you might have that will be shadows or blurs that you use across your design also need to be defined. Then make sure to show the grid, make sure to use a solid grid system and really understand how it works. Components are basically reusable UI elements. In my example, that would be my hero text, my menu, and my cards. It's basically anything that is like a template and are use more than once. In a perfect world, your page only consists of components. They're super important nowadays to scale projects quickly, and I'll show you how to hand them off perfectly. Until here, everything we talked about is basically part of the style guide. That means it's everything that we described in detail. You could argue though that component is a whole section. What we also need is the so-called assets, and assets are the things that we're exporting. That's something like images, or all our icons, and logos, or some illustrations. We need to make sure that everything is exploited in such a way that it looks crisp on any display. The last one to mention, but probably the one that causes most trouble is to make sure that everything works well responsively. That means that all your designs need to look good at whatever screen size I'm looking at them. For that, we're going to set up some responsive testing and then make sure that we translate all our results into our style guide. That is the overview of everything that we need to hand off. But what you might be wondering is, what are the tools that you actually need? Before we jump into the details on how to prepare all of those files perfectly, let's have a look at different design tools and different handoff tools, and find the right tools for your project. 4. Overview of design & handoff tools: Let's talk about design and handoff tools for a minute. There are many, many out there, and here's a few that you might have come across. The main design tools are Sketch, Figma, and XD, you might have seen. Then there is stuff like Abstract which is really good for version control and handoffs. There's Zeplin, make classic handoff tool for Sketch, Apple Code, InVision, which also has its own InVision Studio design tool, Sketch Measure, which is a plug-in for handoff that's very special but sometimes can also work quite well. There are things like Marvel and Framer which are very popular for prototyping. So especially Framer, it's very much on the code side. I'm sure there are many more tools out there even still. All of them are great tools and it really depends a bit on what you're trying to achieve. I won't go into depth on each and every single one of them, but what I'd like to do is to show you the two, as I believe, most popular and up-to-date tools for design and handoff. The obvious choice is Sketch. Sketch is an amazing tool, I love it. It has a huge community, thousands of plugins and it works pretty much with any handoff tool. They're working on having their own handoff. However, you're most likely to combine it with any of those popular handoff tools. That can be an advantage or disadvantage. It's sometimes for very complex projects, it might even be better to have an own handoff tool and keep things separate, depends very much on your team. On the other hand, for very small projects, it's sometimes nice to just have one tool and my personal favorite comes in here, which is Figma. I have to say Figma, that was just recently launched end of 2016, that's quite young for software, is I think it's fantastic because it solves a lot of problems. Not really problems, but a few issues that Sketch had that made the handoff a bit complicated, it's a total all-rounder. You can prototype in here, you can handoff, you have version control, and if you wanted, you could still combine it with some of the most popular handoff tools. What I'd like to do is before handing the last chapter, we made this list of things that we need to handoff. Let's see how each of them performs in those sections. 5. Comparing Figma, Sketch + selected handoff tool (Zeplin, Abstract, InVision): Okay. Let's start with my favorite one, Figma. Here's our list of the things that we saw in the first chapter of everything we need to give the developer. So let's see if Figma can do that. So an overview and inspect. Fantastic, really nice sharing. Again said, we're going to look at all of that in detail so if you don't understand anything, don't panic. We're going to look at each and every single one of them and how to do that. Also very important, you don't need to use, I'm going to show you in Figma, you don't need to use Figma. You can use Sketch or anything else but you're going to follow the same principles. Prototyping, also Figma does that wonderfully. You have styles, color, textiles, you have grids, you even have different grids in Figma, which I will also show you. It's really, really fantastic. You have components that you can share. You can export assets. A developer can actually export them directly himself. You have responsiveness. You have version control and it runs on Mac and PC. The best part of it, if you're just one user, it's absolutely free. After that, its costs $144 per year currently per user you add. The thing is though, if you invite a developer, that actually doesn't count as a user because you only need to give him rights to view and not rights to edit. So you can work for completely free and then hand it over for the developer. So Sketch, as mentioned before, comes with a so-called Sketch Cloud. They started implementing handoff tools such as inspect in the Cloud. There's still a better version and so they're okayish. But also knowing Sketch that will surely be improved. As you're uploading anyways and this is relatively new, it's very common to combine Sketch with an external handoff tool. I picked three that I would recommend. Obviously, you don't need all three of them. You just need to pick one or any other tool that you would like to use. Generally, what I would advise you to do before you go ahead and pick anything, always talk to your development team and ask them if they're already using a tool. It might be that they're already paying for a plan so you could just use that then make sure that this is compatible with the software you're using for design so if you're using Sketch or Figma. Most of them start also working with Figma but there is still, for example, in Abstract, some limitations. So just make sure before you start that everything is working. If they don't have anything in place, then just suggest what you would like to use, but make sure they had a look at it once. So on our list, let's see how Sketch is doing. Overview and inspect. As mentioned, this is all happening through the Cloud. Also prototyping, not as ideal as Figma in my point of view, but definitely there. So styles, color styles, everything you can set up in Sketch. You can make nice overviews to save. You can see the grid and you have components. They're called symbols in Sketch, but it's exactly the same. You can export assets directly from Sketch and you can test some responsive behavior. There's no version control in Sketch, so maybe a quick word on version control if this is new to you. Version control is something that actually comes from coding. In design, you're probably used to saving versions of a file over and over again. So you probably put the date or a number 1, 2, 3. You'll put final design, final design 2, final design 3. You probably know what I'm talking about. This is rapidly changing because now we work in teams on the same file. This is moving towards that which Figma does quite well and Sketch is starting on that. You would not want to save a whole new file, you want to save a version of that file. So if you saying, "At this point, I'm going to hand this file off to the developer," you would save a version of that file within the file. You give the developer that moment of the file and then you carry on working in the file. So for example, now you're changing a button. Then you can say, "Now I'm handing you off the next feature, that button," but it all lives in the same file. So this is something really great. You don't need version control necessarily, but I think it's something to look out for, especially if you're working on larger projects. There's something super helpful. Sketch doesn't run on PC, it only runs on Mac. So it costs $99 one-time they say. Just be aware, one-time means you paid and theoretically you can use that version forever. However, every year there's a new version coming out of Sketch so you really need to be up-to-date. You're literally paying every year more or less around $100. Something generally on pricing. Yes, it's great to have a free tool like Figma, especially if you're starting and to try out stuff. But generally, it's okay. I mean, they're charging. It's a business model. If you want a good product, it also going to cost you a bit. So you probably going to end up at the same price using Figma and Sketch professionally at some point. Let's look at those handoff tools that you might want to combine with Sketch or some of them even with Figma. Again, you only need one of them like one handoff tool. I'm just showing you three that I personally really like so you get a bit of a comparison. So let's start with Abstract. Abstract has really great inspect mode. Prototyping, I'm leaving out because you probably use a Sketch Cloud for that. All styles, grid, components that you set up in Sketch, they're available here. You can also export assets. Responsive again, I'm leaving out something that you test in your design software. Version control. So this is where Abstract really shines. It's actually more of a collaboration tool, I would say and then a handoff tool. So if you're working on a large project, something a little more complicated, like app design where things change rapidly with different features, really have a look at Abstract. The only thing is your whole team would need to agree to work with Abstract because you would integrate it with Sketch. That also means that all of you are designers would need to use a Mac and then later the inspect should be available on PC though as well. The cost. It comes with $108 per year per person. So it is a little more pricey, but for large projects, definitely worth it. However, if you only setting up a small website, then this might be a little bit of an overkill. So Zeplin. Zeplin is my personal favorite. I really like how everything is working in the overview and it's very clean, very tidy and very logic. It's also been around for a long time, lots of plugs in, a lot of information about it. I would say this is a very, very solid handoff tool if you're looking for something straightforward. It doesn't really have prototyping, but it has something called flow. So your developer will see where you connected your prototype which can be really handy, actually. All starts with components obviously that you set up in Sketch you will see here. Also, the great advantage is Zeplin is also working with Figma. So if you're using Figma and your developers say they really want to stick to Zeplin, then that is no problem. Exporting assets obviously. Again, responsive not relevant here. No version control, but it runs on both Mac and PC. I also really liked that it comes with a free version so you can really try out a project and then if you're using more project, it goes up to 200. You can see the different plans it has for different projects. So our last one is InVision. InVision also comes with a good inspect mode and it also has very good prototyping. So if you have like a straightforward website projects, more company website, personal website, this is something where I think InVision is a really good solution because you could put everything on InVision. You can have your clients look at the dummy in InVision. You can have your programmers look at the inspect in InVision. You can comment, you can share the slides. So I think this is really great for like small to medium-sized projects. I really like to use it for that. You can come with something called DSM now that's called Design System Management. So that's a little more advanced if you want to share libraries and setup a design system. So that's also possible. You can obviously export assets in there and it runs on Mac and PC. Also important to know InVision, they have their own design tool you could also use called InVision Studio. Also it comes for the first project for free so you can just try it out and then it goes up to 95. Again, look at the website prices vary for amounts of projects. So as you can see, there's not really a right or wrong on what you should be using. But what's really important and important for any software you are using is that you set up your designs and your components and styles in the right way. This is what we're going to do in the next chapters. 6. Can I use InDesign, Illustrator, or Photoshop: A question I get frequently is, can I use Photoshop, Illustrator, or InDesign to design my website and hand it off? Well, theoretically yes, you can design a website in those. But should you really do it? Well, I strongly advise you not to. Don't get me wrong, I very like those programs. I use Photoshop for photo editing, I'll use Illustrator for vector graphics, and I use InDesign to create print materials. But that's what they're for, they are not for designing websites, and I'd also like to show you why. Let's look at our list. Overview and inspect not really happening here. Yes, you could export apex and then put them back into, for example, InDesign or Illustrator make your own overview or you could upload them in Zeplin as well but, it's not going to be the same. Prototyping the same, you could export jpegs and then make your own prototype in a program like Envision, but it's just not an automatic prototype within it. Styles, yes. People argue there are styles especially now in Illustrator, there's some elements of that, but if you ever use Sketch or Figma where you're going to notice it's not the same. The same with grids, you can't set up grids. You can't set up like rulers, but it's just not going to behave like responsive and not as well as in Figma and in Sketch. Components, the same. Theoretically, if you really need to use one of those programs, I also recommend you use Illustrator, there is something to add component and to export components. Again, you could export assets but just going to be this little bit more tedious and you're going to save yourself a lot of time using a real program for web and app design. No responsive testing. You have no version control. It's running on Mac and PC, that's true. But it also comes with quite a hefty price tag. Don't get me wrong. These prices are really justified. Those are amazing programs for what they were made for, just not for web design. In a nutshell, could you used those programs for web design? Well yes, in an emergency, you could, but why would you. I definitely don't recommend it. If you would really like to use Adobe, you should check out Adobe XD that is made for web design, and also if you're experienced with Adobe, especially with Illustrator and InDesign, you will find it quite easy to adapt to Figma and Sketch in no time. 7. Course Material & Download: You may want to work alongside me, so I prepared some files for you to download. In the course you're taking, simply navigate to project and resources, and there you'll find all the information and the link we can download the material. Or you can navigate to my profile where you'll also find a direct link to the download page. In this page you'll find a variety of downloads. You can simply pick the course that you're currently taking and then just click ''Download'', and it will automatically download the file for you. To open a Figma file to download it, it's important that you have a Figma account. Inside your account, navigate to ''New'' and press ''Import''. You can then choose a file that you would like to open. It might take a moment as they're quite large, but once you imported them, they will be on your account and you do not need to repeat this process. I am working with Google Fonts for most of my designs. If you're working with the Figma app, then you don't need to do anything, all Google Fonts are preloaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing, for example, Poppins, I use a lot, and then you can directly download this font, install it on your computer and you're ready to go. All resources are free for existing students and you do not need to enter any additional information. You can of course also download any of the other files in case you're interested, so under general I always add anything that I think might be useful, so there is, for example, a Bootstrap template and then a list with links for inspiration books and blocks that are really great for UX UI design. This list of downloads is steadily growing, so make sure you come back and have a look from time to time. 8. File structure and helpers: Before we jump into the details, I want to give you a quick overview on how I structure my files. There's of course, very different ways for different teams and projects, this is just a way that I over the time ended up doing it and had quite good results with. Anything that you can use, use it as you wish and anything you want to change, of course, adapt it to your needs. On the left-hand side you see that I am using the pages to structure my projects. You can do the same in Sketch. Basically, how I do those headlines is simply just an empty page. In Figma you have a cover at the top, so that will be the image to thumbnail that everybody sees as soon as you open your project and I'll tell you in a second how I changed this from just being a beautiful picture to something useful at the very end. The first one would be I have my section here development, so when I handed off the development noted that only this section is relevant for them. I have my screen and prototype overview. Here I have all my master screen. This is where I'm working. This is where my final versions are and this is where I also connect my prototyping. Then I have the style guide. The style guide here, that's what we're going to look at into detail. We have colors, typography, spacing, grid. Everything is described in detail. Again, also the use of my images and my icons. Then the third one here we have components. Components are basically living up here in your Assets tab. Here you have your local components or here you have your library. What I like to do, and what we're also going to look at in detail is that I like to give a more detailed overview of my components so you can see different states and you can see more comments, specs and also we're going to look at that in much more detail. By the way, if you're wondering about those little icons here on the left, that is just something I add so I have a better overview, is nothing you need, but if you want to use that, that's just control command and spacebar and then you get all sorts of emoticons and you can just add them here. What you might have noticed is that, I always have these headlines. So I give an overview. I said this is the website and then these are the different sections or my components. These are the components and then their structure forms and design elements. If we look at those in detail than the one where it's at the actual section, then you can see for example, here in my colors, I have this little stamp here that says this one is approved and the date and by whom, and I also have space work and add a link. This link could be activated by any prototype. You simply click on the link. You can also just copy like a whole line of the link just to state the link anywhere here. How that works is the following. I am using a little thing called File Management System. This is my File Management page. In order to claim any false credit, I got the idea of setting it up this way, especially with the little alerts down here. From a UX/UI designer, I follow called Femke. She does some really great tutorials. She works at Uber, so definitely check her out. I'm going to add a link for you. I was aware of like setting up these sections which you already see here on all my overview pages. It gives really great overview if you're handing it over and someone's new to the file. But what I didn't do up to then and what I really liked and started and really helped with foster communication with other team members or the development team, is to add those little stamps. Here I just have instances and they just give the state of this particular section. Is the color already approved or is it still in progress? Is the topography still in progress or is this something that we can for sure setup? Here I just add the state and you can see that you can just change the pretty Italy as an instance. You could just change it like this. You would add your initials and the date you changed it in case someone has questions why the state has been changed. Another thing that I really like the idea, and I use a lot now, is to just add a little link. I also have a stamp here that's a link. I can add as many as I wish. This is, for example, sometimes you have, you want to link to the file of the font. Or if you're using a great system, you want to add a link to documentation. Yes, you could just copy the link and just copy it next to it there is a common section which somehow nobody ever uses in Figma. I just find it a great way, it's really clean, so how you add it, it's just you click on it and then you can add a link here. You can see that in a prototype or you can also set up the prototype section and then you see if there is a link. Definitely use that, it was a great help for me. Then besides those, I have some set rules, how I comment on that. We will see later in the component overview how I add comments and these ones here are super useful as well. I add them to my wireframes and I add them to my overview. You will also see that this just means there is an interaction. You can add more whatever you need, like for example, to swipe or this one means there is an animation. Then my development team will see that there is something happening at that point, and they can always refer to the prototype and I make sure they don't miss this. Here's just some sticky notes that I used. As I said to comment section somehow, nobody really uses that much in Figma, I don't know why it's a great section, but I just had the experience that people overlook it. I just stick a sticky note on the page if I have comments or work on there. That's also really clear that this has to be taken away at some point. The last thing I build is this flowchart here. What I do with this flow chart, up here you have the cover. This is like right now it's just a pretty image that you would see. What I usually do is once I'm done, I move my flow chart up here and then I delete this one. Now, this will be my cover page. The first thing everybody sees that opens this file is this Overview chart, and usually I also add a few links and just an alert, say look at the development section. Everybody knows this is the whole project. This is how everything connects. There is a prototype and I give all this overview information up here. We're also going to build this chart together at a later point. This is the file structure I use. You can also see here on the right that I'm setting up different styles for typography and for colors and also for grids. Now we're going to run through this part here, the style guide in detail, and we're going to start with the first section, which is color. 9. Colour stylesheet: Let's start with colors. That's pretty straightforward. What you need to do is you need to make an overview of all the colors you're using or planning to use on your project. Here you see an overview of my brand colors. Color values are given in something called hex. Hex stands for hexadecimal values. If we draw and you want to add a new color here, let's draw a square. We want a gray background. You can see here that it opens the hexadecimal for you, and we can just put in a new one and save that for lighter background or we can use the color picker here and choose another color. If you were given RGB, that's literally the same in hex. You can just open here and type in your RGB value, it's exactly the same. If we have our color here, we would want to probably add it to our styles. This is the overview of our colors, but then we add it to styles, which means we can reuse this color everywhere in our project. In code, this is done the same. Your color values will be stored in a variable and then reused. If you're changing later, if you're changing, for example, the background color to a lighter gray or something, your whole project, all the backgrounds will be changed. We do this in Figma here, which is pressed with this little square, and then we can add it to our styles. The important thing is when naming, don't call this gray background because later you might want to change it to white or to blue or to whatever color. We're just going to name this background light. What you can also do in Figma, you can add a slash. So this is under my base colors. If I now create the style, you can see that it was added right here to my base colors and can now reuse this. A little tip, you might have noticed up here, I have my CMYK link. This is just linking to my brand colors for printing, you cannot use CMYK online, but sometimes you're given CMYK or Pantone colors by your client. Then you need to find the right hexadecimal or RGB values. If you go to pantone.com/color-finder, there's really great tool where you convert colors. That's pretty much it, color handoff done. If you're wondering what a programmer will see, we can have a little preview. In Figma, you have an Inspect tap here. If you're using Sketch and Zeplin, you will have the same inspect mode in Zeplin. Here you can see the background color and you can see that how we named this is actually giving as a comment. If we swap here, I gave it this name and this is commented in. Then the programmer can see that's the color we're using. That's it. You're done with your colors. 10. 08 Typography stylesheet: Typography. What basically exactly the same and colors. You need to set up an overview sheet and tell the development team exactly at what screen size they need to use, what font in which way. It sounds pretty straightforward, but you might have noticed that in reality this is where things tend to get wrong. I'm going to run you through this sheet in detail. Let's see what we've got here. First of all, I need to tell my team what font I am using and where they can find it. I'm using Raleway, and this is a Google Font and I am adding a little link here, so they get straight to the page where they can find all the information on how to embed it. You can theoretically use as many fonts in your project as you wish, however, I strongly recommend that you keep it down to one or two. If you're having your own font like a web font that you bought, just make sure that your development team has access to it and also make sure that you actually bought it and that you have the right to use it. If you're a bit new to typography, checkout Google Fonts, there's a lot of possibilities and I'm sure you'll find something that suits your project. Let's see over here in our first column. In the first column, I'm just naming the different styles that I am using. I name them headline 1, headline 2, sublimed H_3, copy text link, etc. I am naming them as the programmer would later name the HTML tags. You don't need to do that. You can also name them, for example, as Font M, Font L, XL, etc. Just stay generic and don't name them something like, Raleway 30 pixel headline bold, because this will probably change during the course of your design, and then you need to rename everything. Stay generic and you're going to be fine. Let's zoom in so we can have a better view of what's happening in the second column. Here you see my font, and you see that I am giving you the size of 30 pixels, I'm defining the size for each of these fonts, and defining the line-height. I'm going to switch on my tools and I'm going to give you a little preview in the inspect tool. Again, if you're using Sketch and Zeplin this will be visible in Zeplin. Here you can see that the developer can see what font I am using, font-weight, font size, line height, etc. This is basically all for me to double check and have a good overview. Besides that information, I just want to mention that back here, let me just get rid of this style for a moment. Here you have all the properties that your text could have. You can set up the type of text, you can set up the weight of the text, and then the weight, for example, I chose bold, and then the developers will see automatically that this is a weight of 700. That this is same as bold is just how this will be written in CSS. Then we will talk much more about line-height. This is something super important. I'll get to that in more detail. Here you can have some letter spacing, paragraph spacing. You can set all of that. I didn't put that in my style sheet because it's not very relevant for my design. But if this is the big aspect and should really be something to be looked at then definitely you can add that. Here you can just set how the text behaves, that's not relevant in our style sheet, and here can text align left, center, and right. In Figma that's also not relevant, in Sketch it might already be updated, but it used to be that you would have to set up a style for left, center, and right, which was really annoying. This one here is just how your text is aligned. I would generally align it in the middle, which is the best setting for getting coded, but if there's a reason why you send it on a top or the bottom, also do that and this will all be visible in your specs. Now up here you see something called Mobile first. That is very common. What that means is, that my development team told me, take on a start setting up all my font sizes and everything for Mobile first. Mobile is the initial screen and then anything that changes, like you can see that here, here I have my breakpoints. Anything that changes I have to define for larger screens. You could also start at a larger screen and work your way downwards. But it's not so common. It's usually best practice to start with Mobile first. All my other fonts are probably going to stay the same because they're at a larger size of 16. This is also good and large screens, but made headline is definitely going to be too small. I set up a size for L, this is my breakpoint. Later we talk about grid systems and breakpoints and you will learn more about that and why this number is so odd. I have a screen for L and I think I'm going to need it even larger one for XL. However, I am still not so sure about it so I put a little difficult sticker up here, and here, I put my post-it and I said still defining breakpoints. That means that I think I probably need a larger screen, and from my experience, I think that's probably going to be something around that size, but I need to want to do my responsive testing, and there's a whole chapter on that. I will check if that size actually looks good on that breakpoint. Let's get a better overview again. Here you can see an overview again of my style sheet. Here I have my Mobile first, everything I define here, and then any changes I have for larger screens for my size L and my XL, in my case, you might even have more break points. I'm defining here. In my example, this is only the headline that any larger, and probably for very large screens, I need to change the H2 as well for my design to look good. Now I want to have a quick word about line-height, because if your designs tend to come back from development and they're all a bit squashed together, is probably that you didn't set your line-height right. Here you see my copy font that has a size of 16 and align height of 1.7. So 1.7 is the same as 27. In Sketch and in Figma, this is given in pixels. I would definitely recommend that you're using that one point of ratio because then it also stays clean if you're sizing up your font. For example, let's have 27. If you wanted to change your line-height to 1.5, it will be 16 times 1.5, and this is how you get your line-height. If you're coming from Print, you might be used to something called baseline. But online that works very differently. Let me show why a good line height, even if you're not having a paragraph but just a single line is very important. Here's a little example to understand line-height online better. Here's my font, 20 pixel of font size, and my line height is set to auto. Now Figma and Sketch do that alike, they give you a little bit of added line-height automatically if you haven't set it. My box is not 20 pixels height, but actually 23 pixels because of this added line height. What you might be tempted to do is especially if you're having a one-line headline, you go and you say, "No, I'm making the line height the same as my font, now my box is 20 pixels high and everything is nice and clean." I don't do that because what happens is if you're having a second line and this happens quite quickly. If your screen gets smaller, your font is going to be all pushed into one another and it's all going to start to look pretty ugly. What you should do is just be aware of your line-height and that your boxes are just going to be a little bigger and that's fine, and it's going to be exactly the same as CSS later. For example, here, I'm having 20 pixels of font size, line height I want 1.5. That means that my box is going to be 30 pixels high. Now, if I'm having more lines, that will just add up. Two lines in that case will be 60 pixels high. This is how line-height works online, and it's quite important to understand that if you want to have good results with your designs. Now all our styles are decided. The last thing I'm going to do is I'm going to take my styles and add them here in my styles in Figma, in Sketch that actually is the same, but just add them to your styles, give them the names you decided on, and then you can reuse them across your whole project and you're ready to go. 11. Other styles: Any other styles you might have, you make the same, you just make an overview sheet and just add them here because [inaudible] for this will be shadows or blurs, or background effects like for example, that your background darkens if you have a modal coming down. Let me switch on my tools will show you pretty much here. I just have one shadow I'm using, you might have several shadow effects. I save it to my effects, to my styles, and the same with blurs. It's saved and I am giving an overview to my development team. 12. Defining grid system & distances: Let's pin down a general layout of your designs. Basically, you're going to use grids and spacing to do that. Grids, and we're going to look at this in a minute, define a horizontal layout, and how your design behaves across different screen sizes. The spacing that you see here defines more how the elements are distributed vertically, and how the elements within the grid would be spaced. You can see my spacing cubes here, I set up a tenner. So 10, 20, 40, 60, and 120 are the distances that I am using and that you'll find across my designs. If the developer will find a distance of 35, you'll know I probably made a mistake, and he'll revert back to any of my original sizes, or he'll just ask me. I just want to show you how I usually use them. All of these, I just made into components, and sketch that will be symbols. Then what I can do, I have them saved here, in my assets tab, and I can just drag them out and reuse them, I don't need to redraw them every time. You can also just switch onto grids in the background, and then you can toggle this on and off. This is the same as sketching in Figma. Then you can align all your elements to that. One word on the 10 pixels that I am using, I'm using 10 pixels because I knew that my elements were going to be quite large and quite easy, and there's not too much detail. However, it's actually best practice to use an eight-point grid, so definitely look into that. If you've never used that, it sounds a bit strange because it seems uneven, so it would be 8, 16, and so on. But it's actually not because you can really break it down perfectly. If you look closely, for example, a topography, topography also comes in eight steps. It would be 16 and then it will be 24 and 32. This is really nice because then all of your elements will really align and this will be a system, so check that one out. Here comes the grid. The grid is basically the backbone of your design. This is, besides components, I believe, probably one of the most important things, and also one of the places where things tend to get wrong. Make sure that before you start your project, talk to your development team and ask them if there's a specific grid system they want you to use. This might be because there's already things set up with that grid system or because they have experience with it, and want you to use that one. If you can choose yourself, then you can just choose any grid system that you like. In this example, I am using CSS grid. In CSS grid, you can basically set up your grid to however you like it and it's super lies, and have a lot of possibilities. If you don't know it, I really, really love it, check it out. If you want to use a more traditional grid, I would recommend that you have a look at Bootstrap, and we're also going to look at Bootstrap, and I'm going to use it for my examples later on, when talking about responsive design in more detail. On my overview sheet here, I am basically just giving the information about how I am using this grid system. There is a link to the CSS grid, some documentation about that grid system. If you have something like Bootstrap, just link to the documentation and your development team will find all the technical information they will need there. Then I am saying that these are the break points I need. As you can see, this has very few because my design for this website has been quite straight forward. I have a mobile view that can stretch pretty much throughout any tablets. Then I am starting here, as you can see, from 768 pixels upwards, I am starting with a full column design. If you get confused about this strange number of a break point, once we talk about responsiveness, you will see that this is based on a responsive Bootstrap grid, and I'll explain more about that. From there, it's four columns and then when it gets larger, there's just some small changes like I have a bit more padding on the side. I'm having my spacing blocks, and that define everything. I am having, here, my columns are stretching. This is some liquid design within breakpoints. Let me just show you quickly what that looks like in my design file. If I have, here, my screen, then I would go here on layout grids, and as you can see, you can save different grids. I could also just apply a Bootstrap grid here, as you can see, and that one is, for example, one that sits fixed within some break points. I want my CSS grid. Here it is. You can see that that one behave stretches. I can just set that up perfectly here in Figma so it behaves exactly the way I told the development team. I'm going to use this. The cool thing is, because you can use different grids and setup different grids, here I have my mobile grid, and then that behaves exactly the same way. To sum up, you can use any grid system you wish. Just make sure that your development team is fine with it. I still recommend adding a little overview page, just like this, so to make sure that they have the most important details and behaviors that you're going for. If you are having more detailed documentation, for example, if you're using a Bootstrap grid, then make sure to add that link. For your designs, just make sure that you apply the grid and align all of your elements according to it. Now you're probably going to have that last big question, how many screens do I have to design each break point, or how does that work? Bear with me a minute because we're going to talk more about that when we talk about responsive design. 13. Components overview and states: Components. Components are reusable elements across your design. The basic rule is, if you use it more than once, make it into a component. Components are essential to design and code. It works exactly the same as in your design, you have all your little components and then you are constructing your page out of that, or your app or whatever. It's the same for code, it's basically like a little Lego System and you're putting it altogether to create your product. You surely heard about a thing called design systems, one part of that is what we've already covered: the styles, the typography, the icon styles, the colors, all of that. The other huge part is components. You can actually look at those design systems online. The most famous one is probably Google Material Design that I also used for bits and bobs here in my project. So let's have a look at this together. This is the Material Design website. On the design, you find colors, typography, and all of those styles we also already setup. If you click on "Components", you see the component library. Let's pick one out to see what that looks like. Let's go for cards. Here you see the general card. If you go further down, you see all the description in detail. Then here we go to behavior so you can see how this behaves if I click on it, how do it slide. You can see actions. You can see what they look next to one another. You can see different themes they can have. This is probably the one you're right now most interested in. For handoff, handoffs will be programmed all the details with all the different dimensions. Now, the amount of detail that you will need on your component handoff depends very much on the project you're working on. If you're walking on a one-off website, which you might add some detail to, and the developer is sitting next to you in your office, then yes, you need a solid handoff, but you're obviously not going to spend huge amounts of time setting up an online library. Now, if you're working on an app and you have a huge team that is spread globally and you're planning on growing and adding features here and there, then definitely, invest the time to really, really get that component library in order. Now, saying that, a component library, it sounds really easy, but it's actually something that needs a lot of attention to detail and a lot of attention in maintaining it properly. But if you're planning on scaling your project, definitely worth it. I will show you today how I set up my components for, what I would say, a medium to large-sized project. Here you can see my components overview page that I created. On the left-hand side here, you can see that I have different pages, and one is for components. In sketch components are cool symbols. As soon as you create a symbol, it creates this symbol page automatically for you. That is actually the only time I really prepare a sketch over Figma. In Figma, if you create a component, then makes sure that you send your master component by right-clicking and send it to that component page. Also make sure your master components are here so you can keep an overview of all your components. Your components are also saved up here in your assets library, so you see here is my components page. By the way, it is really nice in Figma, it sorts them for impinges. This little symbol, by the way, I put there myself. I can see here, for example, if I want to see all my buttons then all my buttons are here and I can just drag them out anywhere I wish. Just as styles, all of those components will later be shared with your development team automatically, if you're using a handoff tool. However, I create those little frames here, those little overview sheets as well. I'm going to show you those in a little more detail. Let me zoom. Let's look into forms here I have, for example, my input boxes. You can see here that first I will show the master, so this will be my master element. Then I'm showing the different states that this can have. It can be, this is a default state, it can have a drop-down, it can have a harvest state. Then active is once I clicked on it and start typing. Then with an input arrow. This shows that I can actually stretch this, so it would behave, it would sit in the grid and then it will stretch with the grid. Then down here, I have my info, so this will be my specs, actually my developers can use the inspect tool here on the master, but I am just giving a little more detail here just to be sure. You can see I am using my spacing blocks that I set up before. It also means I am not going to show my spacing blocks on every little element on my website. I'm just going to show them here once in my components and that, once and for all, sets the rules, distances to the next one, inner distances, and so on. The font size is explained in detail, again. Then I can add all my description here on the right. I'm having that description for every component that I create. Even here, you can see, this is for my hero image, you could argue that this is only text and I only have a text style. But it's just going to behave the same on every page, so it's always going to sit in these first three columns, it always has the same distance to its sublime, and it's subsurface clickable, some isn't. I'm just going to fix all the rules here and then everything is pretty clear. Also really important for your menus, the behavior. Here, for example, this is my desktop menu, and then there's my mobile menu. I'm having these little red icons, you might have noticed. This means refer to my prototype, and then they can see the animations that I'm having here. For example, how this list is going to slide down. This is going to slide up. Prototyping is also coming at a later stage in more detail. Also remember you don't need to invent the wheel every time, so you can go back here on the community section and, for example, type in "material design". Then you're getting all of these files that people have already set up. You can duplicate them. Then you're getting this library here. Let's give it a second to download. Here you can see you have, for example, all your components already set up. You can zoom in here, you can see what they did with forms, what they did with cards, and then you can use it as a base to set up your own system as well. There's also other libraries out there you can actually use, you can buy. Definitely, talk to development team because maybe they're already using a component library and they would like you to use the equivalent for the design. Now we've done our colors, typography. We have all our style set, and we also have our components sorted out. Now we can have a look at the next step, which is how to export our assets. 14. Images, vectors & exporting assets: Let's start with images. What I generally like doing is to give an overview of all the different kind of images and their behavior that I am using in my projects. Let me run you through that page. Let's get a little closer to see more details, the first one you're seeing here is my thumbnail image, the little intro image on my homepage. Here you can see that I made this into component and I'm saying for more information look to components. Let's just have a little preview what's happening there. Now we're in my component page, and in my component page you see that this, for example, it's not really an image it's a component that has behavior. I'm telling you what happens when you hover over it. The different states. I'm telling you a little bit how the titles are in relation to this image. Theoretically, you could make all your images into components, like the deplete all the free images into components but you don't have to. Whatever you set it up, just make sure you give the information in a consistent way. Let's jump back to our overview. In my overview, I'm telling the development team more about how does generally sits within a website, within my screen. So you can see here that it sits within two columns, and on mobile it will sit in one column. The next one on my portfolio images, this is once you actually click on one of those you get into the project and you see more information. Those are like my large images I want to display while am showing my work. They run through the whole screen so they're not sitting anywhere in these grids. They have 100 percent of screen and they can take any height I need them to have because it doesn't really matter the height here. Then a mobile they're behaving exactly the same. The last ones for my project here is content images. That is like if I am having some writing or any other information, I can just add an image to go with it. That again sits within two columns and can have any height I wish it has. It behaves exactly the same on mobile. It just takes up the whole grid, and then any writing just goes below it. That's all I need here because that's all the images I'm using. Let's go over to icons and have a look at the information I'm giving here. As icons I am using google material icons so I didn't draw them myself I'm using a library and I'm giving the link to the library here. I'm still giving the icons and you could click on them, let me switch on my tools for you. So you can see here that all of those icons are components so I can export to them. I could reuse them in my project. For the programming I probably think they're just going to go here to where there's documentation about Google material icons and it probably going to use an icon font, bet them, but I don't need to worry more about it. I'm just giving all the information I have about the library I'm using. If you're drawing your icons yourself definitely give all of them here as an overview because then you need to export them. Here I am giving the information that all my icons are going to be used in 48 by 48 pixels and this is two different colors they can be used in. But I am mainly using this highlight color. So that's all the information they need to have about images and icons. In the next step we're going to look on how to export or prepare all of those assets for exporting. So here we have a design with some imagery and some vector graphics that we need to make exploitable for our development team. My first question is probably will, who does all of that exporting? Is that me as a designer or is that the development team? Now, there are two ways in Figma it works super well. You don't need to do anything, you just need to give a link through to inspect mode, and then they can just download in any file size in any way they wish. However, it's still good practice to prepare your images and all your assets a little bit for downloading, especially if you're using something like a hand of tool with sketch, like if you're using Zeplin, then everything is prepared and they just need to click "Download". You Might also be asked to hand over an actual folder with all the assets already prepared in it. That's no problem. You do exactly the same setup as we're going to run through and then you're just going to click "Download" and then hand over that folder. To prepare the exporting, you simply click, for example, on this image here, then on your right-hand properties panel you see down here the Export settings. You click on that by the way, exactly the same and sketch. Then you see here, you can change that to a JPEG or whatever file you want or retina as well. By the way, I'm going to run through all of those different kinds of files that you can export and sizes in detail in a second. So bear with me. So I'm setting everything I want here and any can, I can either click here and download it myself or it'll set up and then later in the inspect boat, they will see all my setup and can just download it. The same as here for example, for this vector graphic, I can see my icon here. I add, and I will choose an SVG. That's pretty much it. By the way, a handy little trick. Casey that my-delay off my icons is all named icon/ and then the name of the icon. If you doing this, for example, this same here. If I'm calling this image/about, then if I'm now exploiting this is automatically going to generate a folder called image. It's going to put all my images in there and the same for icons, so all icons are going to automatically be saved in a folder called icons. This is super handy. One around us up and giving you an overview of when you would export what kind of file. So JPEG you would use if you have just rectangular images and photos without any opacity to should always be your first choice because it's quite small. Then if that doesn't work, use a PNG. If you have any transparency in your image, like for example, transparent background. SVGs use for any vector files such as logos and icon's, SVGs are really great because they're really tiny and you can scale them to any size. So you will always have the best quality. A PDF you would use, for example, someone asked you to export a whole page, you could include that in a presentation or to email it. This is really good quality, but it's quite large. Here's some last little bits to remember and then you're ready to go. So if you're exploiting, you might have seen this. You need to export not only one image, 1x is the actual sides you're exporting, but you also need to export it in 2x and 3x. This is for higher density screens and you don't need to do anything except set those exports and then leave on that little suffix and it'll add 2x and 3x, because this is for the code, it will automatically pick the right image for the right display. Fallback images. If you using SVG is just for the rear occasion does your SVGs can't be displayed by the browser. Make sure you add fallback image. Width and height. This is a little trick just in case you need an image to be exported at exactly 2,000 width and you don't want to change around the whole design. Then you can just type in 2,000w and it will export it at that specific width that you were giving. I find it really handy at times. That's it. Once you've done all of that, everything is ready to go. Here you see my inspect tap, this is actually the view my development team would have in Figma, I'm an Inspect, I go on Export and then they'll see all the presets are set up for them. Or in case they just need something else, they can just have presets and download it at any resolution sides or file they need. That's all you need and you're ready to go with all your images and icons. 15. Understanding responsive grids: To set up a well-designed responsive experience, you need to really understand your grid. Most designers happily use a grid and do sovereignty well to structure their design. But very few really understand how that grid behaves in the browser. This is where most misunderstanding happens between design and development. So let's first make sure that we understand the basics. I just checked some of our elements in a standard 12-column grid with some HTML and CSS. Here you see, for example, this is the header that it's placed within the container. This orange line is the container. Then here you see the grid that everything is placed within. Just to keep things a little more simple, I am joining them together here in my view, so I always have three columns where my design are sitting in. By the way, you can join that any way. You can also use the first 10 and then the last last two. The only important thing is that a row always adds up to 12. However, you distributed totally up to you. Now I also have a bit of space to the left and to the right. You can set that up however you wish. The important thing is that you understand how you can place your designs, and therefore you need to understand how the gutter works. I have a gutter set here to 20. I think by default in Bootstrap that will be 30. You can change that. What that really means is that I have 10 pixels on each side of the column. Therefore, 10 in the beginning, 10 in the end, and anything in between would add up to 20. Why is this important to understand for our responsive grid? Well, the important thing is to understand that here, for example, I was giving this column, this blue background color. So that's actually you can go to the edge and use up the gutter like half the gutter that you're giving for that column. Then anything you place inside that column though as images or text will be living inside this space, inside the gutter. So if you want to know gutter that's no problem. For example, you could just get rid of the whole row, put it to zero, and then all images are stuck next to one another. Just be aware of that behavior. Because what you can't do, and what I see frequently is that you just put an image on top and say, well, I'm just going to use this free space and this free space at the other side of the column. I'm just going to put this image here because as you can see, then you literally want to cut off a little bit of the previous and following column, and that's not going to work. Unless you have a really good reason and it's a key element, just stick to the general rules of the grid. Make sure you read the documentation of the grid you're using. There's usually a lot of things you can do you haven't seen before. So now that we know how to place elements in the grid, let's see how the grid behaves. We usually use the term responsive design for anything that adapts to different screen sizes. But when it comes to grids, you should be aware that there's two different ways that that can be achieved. The first one is adaptive design and what that basically does is that you have several fixed layout designs, and the one displayed depends on the screen width of the viewer. So you have fixed breakpoints. Here you can see breakpoint, another breakpoint and change of behavior, and another breakpoint for mobile. The other one is the actual responsive design that we use. That means that you basically mix fluid and adaptive. You have breakpoints, but what they do is they create a range and within that range the design behaves fluid. Now you might have also heard about fixed design and fluid design. Well fixed design, that doesn't work nowadays anymore. What used to be like you have one width for desktop and that's it. That's not going to work with all the devices around today. Fluid design means that it's fluid from the very start to the very end, so for mobile up to huge screens. You might get away with that if you just have a login form or something like that. But in general, if you want that fluidness is responsive design and you still need breakpoints. Here we can see what that looks like in the browser, here is our design, I resize, and you can see it puts everything together, breakpoint, breakpoint. You can also see is that especially topography is something you need to really watch in this approach. You can use either way adaptive or responsive. Just make sure you talk to your development team and make sure that they're fine with it. There might be some technical limitations. Also, if you're working with something that is very, very detailed, sometimes it's easier to use adaptive because you can really fix things down to pixels. As a designer, I obviously really like responsive because I love the fluidness between breakpoints, but it takes a little more attention to detail. So now let's look at our design files and how to set that up. 16. Setting up & documenting responsive and adaptive designs: Let's set up adaptive and responsive designs in Figma. As usually you can follow along with Sketch it's pretty much the same. Let's first look at adaptive layout. For my responsive testing, I said I would own page here called Responsive Testing. As you might have noticed, I did not include this under development. This is because I simply want to use this page to try out how different components behave and if they work well across all screen sizes and in case I need to adopt them, I will note that down here in components. Because I don't want to hand over all of those screens to development, that will be very confusing. For our example, I'm using again my 12-column Bootstrap grid. It's a very classic grid you can use any other system. What you might notice is that they come with similar breakpoints. You can of course also use something like CSS grid which I really like using and setup your own breakpoints. If you're new to this, these breakpoints might seem a little strange, odd numbers to you. What they're based on is that there basically grouping similar devices, so you will get the best possible breakpoints from experience and research. If you're interested in that, have a read it's very interesting, but you can also just take them as they're given here. Remember how those breakpoints work. Basically you're given those breakpoints up here, and this is your container size. Let's take small here for an example. This is my S, my small. I'm having 576 pixels up to 766 pixels in which this design will be active, and my container size which is this here, 540 is what you're seeing here. I can just show you the set up in such a way that if I now stretch this, you can see that the container sits nicely in the middle and this is how my designs would also work in an adaptive layout. We will pick now a base size and that base size is basically the size that I'm basing all my designs upon and that I'll also use as my hand off, and then I'll make sure that on all the other sizes, these elements will also work well. Only if there're differences, I have to mention them. My base has is the size L. I found this because I looked at my Google statistics and saw that in the past in my old website, this was where I got most traffic. This is my base size I'm using. I also set up a mobile view because in pretty much every project you will also need mobile and it will probably be very different from the larger screen sizes. If you don't have any numbers to refer to, then I'll also add your link here at the bottom. You can have a look, this is the most popular screen sizes. I think right now it's probably this size around, I think 1,400 or something like that, but it keeps on changing. But just refer to that page and you can set up your design to the most popular current version. Sketching Figma also come with preset screen sizes. Just press F in Figma, A in Sketch, and then on the right-hand side here you get those sizes. Here for example, is my desktop sizes. I use this one, the MacBook Pro size which is 1,152. Let me just show you if I would now stretch this, 1,152, it's something around that so you can see that lies in that range that I chose as my base size. Now, I'm going to add some of my components to see how they behave, and I'm going to start with my mobile. Because remember my development team told me they want to develop mobile first and I set up my writing sites for mobile, so that's my first screen. I put those here. Now, I'm going over to my hero size and I'm seeing here already added the menu because I know that's going to be different than mobile for sure. Now I'm just adding my mobile elements. What I need to do now is now I need to adapt them to the grid. To position them in the grid, you need to set a thing called constraints, constraints live over here. If you're not used to constraints, they're pretty much the same in Sketch and in Figma. Definitely have a look at the documentation because they're a little tricky to get your head around it and it takes a little bit time to get used to. But after a while, you'll understand how they work. They're not perfect I have to say, but they're the best solution we have right now. Let me give you a little example of how that works. For example, my menu here. I'm going to set to be pinned to the right and always have the same distance to the top. Then this one here, I set this to stretch left and right. What it does is if I do this, you can see that this one adapts and you will also notice that this causes this little gap here. There's a thing called auto layout in Figma. If you set up auto layout that would basically make this little sub-line jump up and always be positioned into correct padding. However, auto-layout doesn't work with constraints right now, so it's little annoying and yes, it's a bit of trial and error here. But I'm also sure that's going to be fixed within the next releases. You can set up all this behavior. For example, here you see I set this up in my master component. In this one here, the writings always pinned to the left. You can also see that I made this two components which it would actually be handy if it was one, but there is a really annoying thing which is that neither in Figma nor in Sketch do the images scale proportionately. I also believe that's going to be fixed within the next releases. Right now that's not working out, so I still have to have this separately and then basically scale them like this which is really tedious but the best solution I have so far and then you need to adapt this here. Because as you scale this basically we don't want this to scale the padding because we want to keep the padding and we want to keep the writing the same. This is also the reason that I'm not using the scale tool up here. If you would use the scale tool, it would seem that it's much easier to scale, but then you're scaling really everything which in case you're using percentages, that might be an option. I'm just going to speed this up and show you how it works. Now because in this layout, this is basically a fixed size that's living inside these two sizes, what I need to do is I need to actually center all of them. I want them to stay centered when this moves, and now I can move it like this. Also I obviously want to look at this with my background. Let's get rid of the grid for a second and then you can really see what that design will look like. If I want to test this for all my break points, this is what it would look like. You can see that I can make sure that it looks good on all screen sizes and I have a perfect overview. Now, the question is, how would I communicate this to my development team because as you can see, I didn't change a component but what I changed is at sometimes it's just one of those and sometimes it's in six columns or in two columns while you set this up? What I would do is I would add this to my style guide or components. For example, here is the information about my images so they can see the components, these exactly the same as a description as you saw about the component and the component section is always the same, same topography size, same spacing, same image ratio. The only thing that changes for the smallest screens, this is how it sits in a grid and for the larger screens from medium to large, this is how it would sit into grid. Now, in a perfect world this is how you should set up all your components that you need to have one components and it just changes in distribution inside the grid. If however you would need a different component for mobile or desktop, that's also fine. Just make sure that in your components section, you then show those to different components and make sure to assign a size where they used. The other thing that you need to adapt is topography. We talked about this earlier. As you can see here, this looks quite good. This still looks quite good, but then here it starts looking a little weird. Let's jump into our screen size L where things start looking a little off. I picked my hero from H1 here and I'm going to detach it. Now I'm going to have a look. I think something around 50 will be good. Remember my line-height, I want to keep the same to have as little changes as possible. This is 1.250 times 1.2 in this case. Now, I just need to adjust a little bit to padding to make sure I get the same result. Put this back up here, at 40. Now you can see if I resize this, that will look much better and it sits nicely in the grid. How I would add this, I would go to my style guide. Remember the style guide we set up for typography. Here you can see I've already added it. Here's my base size, my base fonts, and only if I really need to change it, I changed them. Here for my headline I definitely need it. I change it for size L, 250. Then full-size XL, I test it further. I still need a larger font and I here also need to adapt to sub-line a little bit for it to look right. Then once I've done this, you can see here I've added them to my styles, so I just have my base style here and then you can see for L and for XL, I would use different sizes, and that's it. That's how you can set up your typography nicely and now it's very clear to development team what you're using and what changes will occur. Now remember there were two kinds of responsive layouts to adaptive layout that we just looked at and then the responsive one, the actual response one that behaves fluid within those boundaries. Let's have a look how we set up that one. If we use our Bootstrap example again, you see that we're using pretty much the same setup, so we still have our same breakpoints. The only thing that changes, is that we get rid of our fixed containers and you can see that then within our range, now our container is behaving fluidly. If you look for examples on responsive design with Figma and Sketch, and you getting all of those little examples that work really wonderfully. That looks really great on first sight. What they do is, you actually just instead of setting this to center, you set this to stretch from left to right, and then it behaves with the grid. You can keep things like the menu still attached to the right, and then you get this really nice effect. Now, this really looks good as long as you don't add any images. Because where this tends to break a little bit and not give you the real thing is because what you could do, you can say, now this is my mobile and then I go up here. Actually because it's fluid, I don't need to do anymore layouts, and it's just going to look like this. Now this is obviously not going to look like this because this image for example, would scale proportionally and not like that. Then it would also jump up here as your text uses up more space. But you can't really do that yet with Figma and Sketch. I'm sure that is going to be fixed soon, but for now we're stuck a little bit on this solution. Now use exactly the same example as we use for the adaptive layout and just change everything to stretch. I need to change the grid to be stretched and I need to change all my elements in it to go from left to right. In this case, I can just do this, but you see that it just breaks a little bit with the images. However, this is really still good enough to try out the topography as we did in the other examples, and to then see how you images need to sit. Because basically what I did if I'm going up on this side, let me just delete those. I would take those in here and I would do exactly as I showed you with the adaptive grid. I would just need to size them up and then I can still be sure that everything looks fine. Just in anything in between so In this range, I just need to have a little bit of faith to be honest. Again, with the typography I can do exactly the same as I did with my adaptive layout. I will just try out here and then the size, and then I can see when things start looking good again. To sum up there's two ways that your grid can behave to adaptive layout and to responsive layout that is liquid in between different breakpoints. You probably have the similar setup and topography of a probably have the same changes and your components will probably more or less sit exactly the same. It's actually not such a huge difference. I find adaptive as I said, a little better when you really want stuff to be precise and if you have pretty small elements, because you can really fix it to the point. If you have something with large images, then the responsive one is usually a little nicer. But you can use both of them perfectly well. Make sure you check with your development team and make sure that anything you change across those sizes, you put into your style guides and into your component description. 17. Flowchart and prototypes: By now, everything is pretty much set up, and as you have been working on this file for a while, all the connections will seem pretty clear to you. You probably started your project with a wireframe that might look something like this, or like this, or maybe just some scribbles. In the best case, you also discussed this wireframe at the very beginning with your development team, and then started designing on top of it. To hand us off successfully, just as in the beginning with our wireframes, you now need to show an overview of all connections and interactions. Now my project here is pretty small; it seems quite logic, but as soon as it gets a little larger, you will also notice that this is important for yourself. You might actually do this while working, and then also use this for frequent testing. Testing is super important, but that would be a whole separate course. I'm going to set up two things now. First of all, a page as an overview. Basically, it's like my wireframe but with the real thing showing all the pages I have and how everything links. Secondly, I'm going to set up a prototype so I can really click through my website and see all the animations. You're going to wonder probably, why do I have to do both of those? I generally like doing both because the page gives me general overview and a prototype gives me more of a feel and also I can test. I could do more user testing there. Now, to create an overview page, I created here on the side a page called Flow. You can just call that overview, anything you wish. Here, I'm currently on my screens and prototype page. This is like my master page. All my design happens here. Anything I work on, this is my master. I personally don't like adding the flow in here. I could also put arrows and description in here, but I just find it gets a bit messy. That's why I really like to keep it separate. A little trick I'm going to show you; just select all of your frames and you can also do that in Sketch, the same. Then you just create component, so in Sketch that will be symbols, out of your actual pages. I'm going to create here multiple components. Now, I copy those. I go over to my Flow page, and I add it here. So now, whenever I change something on my master page, it's also going to be updated automatically on my overview page, and there will be no confusion. Then what I like doing, I like to take another frame here, and here I use an A4 paper size. I'm going to make that a little larger, but I quite like using that dimension just in case someone wants to print it on A3 or something. Select it, scale it all down so it fits. A little bit closer. Then what I do to make it really clear that this is the wireframe, I give this some opacity, and now I can add all my arrows and description on it. When I add a description, this is what it looks like. Let me get a little closer and show you. Here you can see that I'm having those arrows. Again, those arrows, you can go to your community section or with Sketch, look at Sketch App resources and just get some ready-made flowchart arrows. Just type in flowchart and you'll find a lot. Then I'm putting in here like how this links, some information they might need. All of these red little dots, that's actions like, if I need to swipe, if I need to click, and those will be, it says, they refer to the prototype. So therefore, the development team could refer to the prototype and then see what I mean, how this animation is really working. For my prototype, I'm going back on my screens and prototype overview. I like having it here. Again, you can have it anyway you want, but I like having all my master elements here in prototyping. On the right-hand Properties panel, up on the top, you see prototype. If I click on it, you see those connections and that I already set up a prototype. Setting up a prototype in Figma is super easy. Let's say you have this element and you want to connect it to a screen, you just click on it in the prototype menu, you connect it with your screen, and then you get this little box here with all the properties you can choose on hover, on mouse, on to click, whatever you want. Then you can choose here whether it moves in, pushes up, etc. All of those are like pretty standard ways to behave. Something else that is quite important here or the handiest I find is this smart animate. If you don't know that, then read a little bit about that one. Because here you can really make animations as long as the layers are called the same name, things we like to dissolve into one another. I can show you that in a second with my menu. I set up the prototype. I want to actually show you my mobile prototype. I have one for the desktop, one for the mobile. I go here on prototype, I want to set a device. Let's use this one here in Space Gray, and then I just press on present. Then here you can see the prototype. For example, here I added a little red button to show that there's an interaction so you can see that this swipes horizontally on my mobile view. Now, also what happens here is for example, if I click on here, notice it pushes down, and there's a little animation. So I also have a button to show this. If you go back here, you can also show the same prototyping for the website because some things might be different. Just make sure you switch off your device. Then for example, I can show here on contacts, for example, what happens to link when I hover. Now, you can do the same in Sketch. The only thing is in Sketch you would upload your prototype on your Sketch Cloud, and then you would have to give that link separately. Or in Zeplin, if you're using Zeplin, you have something called flow, so you will see where there's something to click, but it won't be a real prototype. You might still want to add the actual prototype somewhere. If you're using InVision, there's some really great prototype in there. If that's something important to you and you don't want to use Figma, then definitely check out using InVision or InVision Studio as well. If you're using Figma just like I do, then all of that you don't need to worry about because you will hand off this whole file to your development team. Your prototype will be included, your overview will be included. Here on the right, you can see the inspect mode so you can always double check, and that's also what your development will see. That's what we're going to do. In the next step, we're going to see how we actually share all of those files that we prepared so carefully now. 18. Handoff with Figma the right way: So now we have everything ready to handoff. We have to overview with outflow showing how all our screens are connected. We have our prototype showing older behavior, and we have our style guide that consists of our textiles, color styles, any other styles we need to grid and distances, and our components in detail, and we have our assets that can be exploited, so images and vectors. We also tested our responsive behavior, and made sure everything works well across different screen sizes. Obviously, I want to make sure my files are nice and tidy before I hand them off. I want to see that my pages are in order. For example, here everything is labeled clearly that this is relevant for the development. Then if we look inside the screens, I also want to make sure that all screens are named properly, and I want to make sure that inside those, everything that could be is a component. So my hero, my menu, and then here I have groups that are also named according to what the sections do. Then within those groups you can see that everything is a component. So everything is nice, and clean to go. I will do the same. I would run through my styles, I would run through my components just to make sure that everything is in order. Now the other thing I want to check is that everything is correct on my library. At a library you find up here in assets, and then it's this little book icon, and in the Team Library, if you have not been using that up to now, you can save all your styles. So if we saved styles, those were now local styles like all the ones that you see here. Our local styles tells you this is my typography styles, and my color styles. I can send them up here in my library, and then I can share them with my whole team. Most of my stuff is already in the library. Let me show you if I for example, would now change in my styles. Let me change color. If I would now say I am changing this color here. Let's just go really wild on this one. I'm changing, that went to a blue, and then you can see now it has a little dot here. I go back to my library, and I'll say publish this change, and I can say changed secondary 2, and I can publish it. Now my whole team will get an update, and everybody will be notified that I've changed this color. Basically this is again, a library that lives in the Cloud. You have the same in sketch. This is called a single source of truth. You would store all of your styles once they're handed over, and once they're finalized in the Cloud, and that still allows you to make changes, but to just have everybody notified if there is a change. By the way in Figma in the free version, you can save your color styles, and your text styles to the library if you want to add a components as well, which is really great because then you literally have a design system up there. You would need to have a paid plan. The second thing you should do is to save the current version of your file, and the moment that you're handing off. In Figma we're going to use now our version control. If you're using sketch, then if you're using it was Zeplin version control there, there's different versions it stores, but I definitely recommend you in sketch to also save a file of that moment of your handoff. Now we're going in here in Figma, and we have file show version history, and now here on the right you can see that this, whenever I put DEV this is my way of marking that I had a development handoff here, and the components for example that I just changed, they will always be automatically saved for you, and Figma does this, and saves a version from time to time as well. But it's great if you take your control over your own version history. What we're going to do now is we're going to add a development handoff. We're going to call that DEV, we're going to call that the date today, and that always give it the hour. Because in that way, if I notice in five minutes I forgot something, I always know which one is the latest version. Here you can give a description of what you're handing off, and then we're saving it, and now you see this here. Now in your versions you can jump back and forth to different states of your file. Now if we only want to share that development version, and not the whole file, because if we use the share button, may appear to share, then that's always the current version, and you can actually see it's quite fun. You can see different mouse pointers when people work simultaneously on one file. If I just want to share this version with the development team, I need to go on these little dots here, and then say duplicate. If I duplicate I get this alert here, say file duplicated. Now I open, and what happens is that it will open a duplicate of the version. This is my cover. Then I can go back in here and I see everything in my file. Now I'm going up here, and I'm sharing with my share button the duplicated version. So that's a little complicated, but that's how currently it's recommended by Figma on the Figma website. So up here you can see you can invite your development team, and then he can click rights to edit or rights to view. Rights to edit I will recommend you only give you a design team or copywriters, and rights to view is more than enough for the development because they can still see everything as we will see in a minute ourselves. Rights to view, you can send an e-mail or just copy this link here, and then send that link. Let's now see what the development team will see with the link we send them. Now, this is what I get when I send the link for the view. It looks exactly the same on first sight than what you have working in Figma. But the difference here is, let's zoom in here. If I'm going on my home, I can still get older layers. That's why it's so important that everything is named correctly because the development will see exactly the same information that you do, the differences that I can't move anything here. So I can just see it. Also per default, you might have noticed that all my measurements are on, and my inspect tab is always open. So if I go on here for example, I can see that this is an H1, further down here I can also see in commenting whenever to comment that this is a component that I called hero text, and then they can refer to the components. Furthermore, I can see all the pages so they can look into this styles overview I gave, and into all the components, and further descriptions we made. The other thing is up here in the export tab. You can for example, if you click on this, and now you can see it did not prepare this export, but that doesn't matter because in Figma you can just prepare that yourself. If we prepared exports, which I think we did over here in the About section. Then this is all already set up, and they just need to press "Export". The other thing is if I press here on play, then my prototype will open automatically, and if I go back here, obviously also I have my flowchart. What I like doing is putting the flowchart actually at the very first page. So at the moment I have here my cover which is just a pretty image, and the very first page you have here is your cover images is a little thumbnail, you see when you open the file. That's the first thing people will see. I like putting the flow so everybody knows right away this is the whole project, this is how everything is connected, and then they can go down here in the development sections, and see the styles, the overview, the components, and everything we've prepared. Yes, that's it. You handed off your project, and you're done. I hope this was helpful, and if you're still not convinced with the Figma and the handoff, then in the next section I'm just going to give you a quick overview of how you would handoff with Sketch, Figma and Zeplin. 19. Handoff with Sketch:Figma + handoff tool (Zeplin): Now let's talk about handled with the Handoff Tool. We're going to look at Sketch and Figma and combine it with Zeplin. You might remember this chart. We said that you can use Sketch and narrow sketch cloud. We can see all your prototyping and all your screens, but in most cases is not enough and you'll probably combined with a Handoff Tool. Now Figma, as you saw it, you can just use on its own. But if you wish, you can also combine Figma with something like Zeplin. Make sure it's compatible because Figma is relatively new, but with Zeplin. You can use either Sketch or Figma to upload your designs. To use Zeplin go under Zeplin website on zeplin.io. You get this interests screen and with some videos and down here you can see that you should download the Mac or Windows app. This is what you see when you enter the app, and then we'll just click on create a project. You can choose whether it's app or web design. We just have a web design here, so then we can name our project, and then here you can already share it. Then here you can see that you can import from Sketch, Adobe XD, Figma, and if you really wanted to Photoshop as well, and it gives us a little instruction. Let's see how that works inside our design program. Let's first have a look inside Sketch. I set up the same website project in Sketch here as you can see. That works really well with Zeplin because Sketch has a great plugin. Got to "plugins", and then you can have here your Zeplin plugin, and here you can see you can export the selected screens. You can export colors. You can export your text styles that you set up. Under Export All, you can also have symbols from current page or symbols from all pages. If you just change to your symbol page and then just export symbol from this page, and you can bulk upload all of your components or symbols whatever you call them in one goal which is super handy. If I press this, there's also shortcut I press this control command and E. It automatically opens my app. It chooses to project that I set up and I just have to press on export. Before we move on with Zeplin, I quickly want to show you the Sketch Cloud. I think you'll agree once you see that it's not enough for a Handoff yet, but it is there and you might want to use it to share your prototyping, as you can see here I set up some links to show you the prototyping section. You can go up here and just click on "Cloud" and then it will export your whole document or you can also select certain screens to your cloud. Let's now jump over to to Sketch Cloud, this is what I see inside my Sketch Cloud. You can see that I have a very handy burden control. If I jump into the screen, here on the left I can see the activity of uploads and on the right day is a new Beta version of inspector, you can also see that this is still in progress or I'm sure that's going to be massively improved food. Yes, I can click here on my items and I can see them. But for me, it's not really working if you compared with the inspect mode in Figma or if you compare it currently with Zeplin. But what is handy is that you can click here on your prototype and you'll see it will upload your loaded, so you can share it, and then you can see here these are the active links and you can't just jump in between screens. You can see here an overview as well that you can export all assets. Yes, sketches definitely moving towards improving older Handoff Tools. However, you would still probably combined with something like Zeplin or another Handoff Tools. Because as you will see in a minute that just much, much more powerful than this. Even though we talked about in Figma you don't really need a Handoff Tool. You can still combine Figma as well with a Handoff Tools sometimes that has advantages like connecting to codebases. Let's now look into Figma it works almost the same as in Sketch. Let's have a look what the procedure looks like in Figma. If I choose some frames here it's exactly the same. Actually I go on plugins, and I have my Zeplin plugin for Figma installed. I click on that and I can see that now I chose two frames that I am exporting two frames to Zeplin, and there's some more options, for example that your component get put into the styleguide right away. I have to say sometimes it is a little buggy, for example exporting components. I feel that I always have to export the actual component. Doesn't really find it when it's sitting on a frame. But then it's relatively new as well and besides those little bugs it works perfectly fine for Sketch and for Figma. Let's now have a look what your exports look like in Zeplin. We're back in our Zeplin app. If we click on our project, then you can see that it uploaded all the screens. At the top I have two sections. I have the dashboard where I see all my exports, and then I have here to styleguide, and this is my Local Styleguide for this project. You can see that it exports it automatically, all of the colors for me, and I can just say add colors and it will save them just as they set them up. Then it also uploaded all the text styles for me automatically as I set them up and I just say add them and then I get this nice overview. You also have a section to define your spacing. Here you have a section where it uploads all your master components or symbols from Sketch. If we click on that component for example, we can see that it is a component, it has the name that we gave it. When we can also see which I find really handy older pages we used it in. If we click, for example, on a detail, you can see that here I am using my H2 and you also get all the information and some CSS. We jump back from our styleguide to our dashboard overview. Then we see here again all the screens, and you can set up those nice little section by just selecting some pages and right-clicking you can make your own sections. You can see that besides the screens, I have one with older screens, so I would set up mobile and desktop and then I have one with the style guide because I still like adding some additional information. I just find that this styleguide right here, it's fantastic, but it's not giving me any space for more explanation, and then I have my component details down here because the same for components I just like to give a little more information. Another super Handoff Tool is that you can add tags. For example, you can see here that I set up. If I wanted to do components that are input components, then I can just sorted like this. I can see all the specs or can see all the styleguide sections at once. That's super simple, you just choose one of your screens and then you go Command T and then you can just set up as many tags as you wish. If we jump into a screen it's the same than in our inspect mode that you saw in Figma. On the right-hand side, you get all the information here you can see the style we set up. If we choose an image, and in Zeplin that's super handy it sets up all your images automatically and JPG and PNG in 1x, 2x and 3x, so you don't need to do much here, and it's the same here for your SVG with a fallback. I'd sometimes might it's a little buggy with my icons, so double-check that. As an any inspector you can obviously toggled a grid, that's really clear how your designer setup. You also version control in Zeplin, so I quickly uploaded a new version and it creates this timeline for me here on the right, so I can jump here and you can see that I just changed the headline. This is the new version, so I can jump in between different version. If you want to have a closer look, you can also add comments once you're uploading this. Here you can just keep track about to changes in your designs. Another super Handoff Tool is that you have this overlay feature here in Zeplin. What you can do is first of all, you can just set it to a 100 percent and then you can just see your website in the real size. The other thing was actually useful is that you just put it a bit on opacity and then you can put it on top, on offer coded side and therefore you can see whether your distances and everything is more or less in place. Now we talked about prototyping earlier on as well and that Zeplin aspects will flow. If you will down your shift key, you can see for example here that I link my menu, and if I click on it, it jumps back. Then also a super handy in here, I can see that for example, this one is imbedded and I'm in here and I can see that this is a component. If I click on it, it jumped right back into my component library. As mentioned before you see here, and also if you click this here that you can connect it to code, so this is a really big advantage to use Zeplin. As we saw in the very beginning of this course, Zeplin is just one of many, many Handoff Tools you can use. I personally find that as an amazing tool. If you choose for Handoff Tool, my number one solution is still to simply use Figma and handed off if that is possible, check with your development team. You can of course use any other Handoff Tool as well, all the ones that we were talking about earlier. Just check the documentation and you will see that you will find all of the things that you can implement styleguides, typography styles, color styles, your component, you can have an inspect mode, all of the things you will find that all of those tools that you can choose the right one for you. 20. Before you go: Before you go, I obviously want to say thank you very much for taking this course and well done in completing it. I really hope it was useful to you. I hope this course gives you a solid base for your hand-off, your documentation, and most important, your communication with your development team to improve this quite tricky bottleneck in most projects. As I mentioned a few times during this course, it's super important that design is not something that happens behind closed doors, and then you just throw everything at your development team. No matter how well you presented your files, it's super important that you always talk with your other team members before you start, while you're working on a project, and after handoff. You're probably going to have a few rounds back and forth until things are perfect. Web design and development is a rapidly changing world, so I'll try to keep this course as much as possible up to date for you. Yesterday, for example, Figma just released Variants and there is more to come, so always make sure that you have the latest updates of your software. If you have any comments or anything you're missing or did not quite understand, please send me an email through the channel you booked this course with so I can really understand student's needs and thoughts about this topic. If you can spare a minute and write a review, that would be obviously of great, great help and very much appreciated. Also, if you liked the course, make sure to visit moonlearning.io. You can sign up for the newsletter there to receive general information about UX UI design, and there are more courses underway, so stay tuned and I hope I see you soon. 21. Code peek : As a UI designer, you're not really expected to code your own websites or even understand code. However, I find it really useful to understand a little bit of what's happening on the code side. I just want to give you this brief overview of some very basic things which will give you better overall understanding about what's happening with your designs. This is the website we've just been looking at, coded in React JS, this is a JavaScript framework. I just want to give you a super brief overview of what the elements we've just been looking at look like in code. Here for example, you see this is the colors and all the colors are variables. I only have to change this color and all my text color will be changed on the whole website. Or here my highlight color, which is this red, if I want to go for yellow, I only need to change it here. Then you can also see the general distances that I am using. I'm also using a variable, so this is my available distances. In the layout file, you can see that I imported a Google Font here, and then I set it the same rule for my whole website. So the whole website uses the same font. This is something don't worry about this too much, this is a four responsive fonts, so it means the smallest it can ever get is 16 , and the largest is 35 pixels. I set a general line height to 1.7. Now for my different headlines, for example, H1, H2, primary headline, secondary headline, and so on. I set different font weights and different line heights just as I want them to be. The card, which is a component like I'm showing you. The developer will also just create a component called card. You can see here he can export this component. He can create 100 cards and he can always fill in a different image and different text here. Because this one here is basically a little text holder for an image and this one is a text holder for the description of the project we want to put in here. Here you can see the whole list of all the components the website is made up of. Then the images which we will be exporting, they will be exported and then put into this file, and so you can see all the images in here. This one, for example, is a little burger menu as an SVG. 22. Thank You: Well done for finishing this course. Feel free to reach out to us at moonlearning.io, we're always interested in hearing your feedback. You would also do as a great favor if you could just take a minute and leave a review right here. If you enjoyed this course, then also make sure that you have a look at our additional courses. At moonlearning.io, we cover all subjects from the very foundations of UX/UI design through to Figma, and even some code basics. Make sure you visit our website at moonlearning.io where you can also sign up to our newsletter.