Transcripts
1. Trailer: I'm [inaudible] and I'm a product designer here at SkillShare. Today, some of the biggest challenges facing UI/UX designers, are fighting inconsistencies across their app or website, as well as trying to streamline their design and development workflow to build products much more quickly. When there's a lack of reusable design assets, designers tend to make each component from scratch, which is really hard to scale. It also creates a lot of inconsistencies across the site. This can lead to a lot of user confusion. When there's too many patterns or visual elements, users aren't sure what to expect when they're interacting and going through different user flows on a site. Recently, a lot of design teams have been adopting much larger, more complex, and scalable design systems that will help combat these issues. These might include simple color, typography, and different pattern documentation, but they can also include much more complex components that are specific to that exact app. For example, on SkillShare, we have very repetitive components to indicate class cards. These designed systems are adaptable and reusable. It makes your design process much more efficient and it increases consistency across a large app, or even set of products. Well, these have become very mainstream in corporations, I think there's a great use for these, whether you're a freelancer, a designer working on a project on your own, or even a small team of designers. These systems can be easily put together and can really streamline any designer's workflow. In this class, I'm going to show you how you can really quickly create a personalized custom style guide to use on an app. This might be an app that you're working on personally, or an app that you've decided to look into more closely, you're going to get an insider's perspective into the workflow of a UI/UX designer. Well, this might be a slightly niche sounding topic. This is definitely something that anyone can use in their design workflow, whether you're just starting out in the industry or really looking to polish some of your sketch skills. Everything you need for this class can be downloaded online for free, or for a free trial. So don't worry if you're new to any of these tools. We're going to start this class by identifying and documenting the existing design patterns on your app. We'll then use a custom template that I provided for anyone taking this class to really jump-start the style guide process. Next, we're moving to creating custom components in sketch on our own. These will be unique to whichever app you've decided to work on. Finally, we're going to share a little bit more about how to use these systems across teams or even across different computers if you're a freelancer or an independent designer. My goal for anyone taking this course is to incorporate a design system into your UI/UX workflow. By following along with this class, you'll see just how simple it can be to set up this design system, and you'll end up with a pretty comprehensive style guide that you'll be able to work of off immediately following this course. I'm so excited to help each of you harness the power of sketch, to create a custom style guide that will help speed up your workflow, as well as eliminate inconsistencies across your app or website. I hope you'll join me.
2. What is a design system?: I wanted to take just a minute to describe some of the differences between style guides, designed systems, and a lot of other buzzwords that are used in the industry right now. In the past, style guides were produced more as an artifact. After all the UI styles were finalized, a designer was responsible for going through and really documenting all the visual elements that were included in the initial designs. Because this was an artifact of the design process and not really part of the process itself. These style guides became quickly out of date and really not referenced much past their initial creation. Today there's been a shift in people using these design systems as a more integrated part of their design work flow. So instead of just documenting the initial design, these become the single source of truth of what designers are able to pull from in their designs that they are creating. So when a designer is creating a new mock-up, instead of designing each thing on their own independently, they'll have this design system that's integrated into their sketch workflow. That they'll be able to pull pre-made elements that are flexible and responsive, that will fit any needs they might have for that design situation. By working from this unified system, design changes are reflected across the entire app or across the entire website. This makes the process much more fluid for designers and developers, since developers are also able to reference the same elements and know that there's consistency across all instances in the app or website. Airbnb, Shopify, IBM and many other large companies all have really well-documented and interesting design systems that are great to look through, to just see the potential with these types of systems and what you might be able to do at a larger company. I'll include links to these below in the class describes these types of systems can be great for your whole team, both designers and developers, and really anyone else that might be touching your product in the future. Because these styles are predefined and repeated, There's a lot more consistency for everyone on the team. No longer will you have to annotate every single instance, every mock-up or any other time UI patterns are applied in your designs. Developers are already used to these components and patterns and know how to implement your designs, right when seeing them. It's also much less efficient. You're able to design much more quickly when being able to see all of your options of different elements that might go into your designs. Better consistency is definitely a great way to have better UX on your site. Designed systems range from a simple documentation of colors and typography, to system who document editorial content and implementation guidelines, and even fully integrated design systems that are aligned with the front end libraries of developers that they use to build and maintain huge applications. For this class, however, we're going to be focusing more on the design system for designers. So something that fully documents all the styles and components in the application. But this will be a tool that's used only by the designers or design team. Now that we understand what design systems are and how they differ from style guides of the past. I think we're ready to dive into getting our project started. See you in the next lesson.
3. Creating an Interface Inventory: Creating a design system is a great way to help speed up your workflow and create less inconsistencies across your app. The first step towards making the move to creating a design system is to create a design inventory. What that means is that we're going to go through the existing state of your app or website and take a much broader picture of how things are working right now. We're going to go and capture screenshots of all the different elements and components on your site. When I say elements, I'm referring to the smallest pieces of designing your site. These might include color and topography. Components refer to much more independent and repeatable elements on the site. This might be the class card on Skillshare or the home listing on Airbnb. Something that is dynamic and the content changes, but as a whole the design is repeated across the whole site. The interface inventory is really a phenomenal tool for showing off the design problems that are existing on the current app. This is a great way to get stakeholder buy-in as well as just for designers to understand the full scale of the issues they're dealing with. That said, this definitely can be the most time-consuming steps, so don't be let down if you're spending a lot of time looking through your existing app and finding lots of inconsistencies that you need to document. We first need to select an app or website that we're going to be working with for this project. This decision will carry through for the rest of your projects. Definitely, select something that you don't mind spending a few hours working on. I'm going to be working along with the design of this Skillshare iOS app. I encourage anyone that's a little newer to Scratch or newer to symbols and sketch to follow along with me as it might make it a little bit easier. Some other great options would be well known apps such as Medium, Airbnb, Apple Music, something that you really admire the design and consistency of. Your also definitely welcome to use a personal project but I would warn you that it should be something that's pretty far along and has an established style guide already so that you're not creating new design elements as you work through the project. Once you've selected your app, you can go ahead and download the interface inventory keynote template that I've included in the class resources section below. This will just go ahead and give you a framework where you can start dropping different screenshots of all the elements in specific categories. This will give you an overview of a place to add buttons, a place to add different form designs, really just help you organize and structure your interface inventory. You want to identify all the different designs and things that occur frequently on the site. You don't need to necessarily screenshot every instance of a button, but you're going to want to specifically look for a button that might have affiliated corner versus a square corner, or maybe icons and buttons versus non-icons. You can identify all the existing styles that you have to work with. Once all these elements are documented and ready to either be corrected, deprecated or included in your design moving forward, we're ready to take the next step. We'll need to decide which visual style makes the most sense for your particular app. Something that works well in one app might not be the best fit for your project. Think of your users when you're doing this step and think about how the experience of your site should be. Next, you'll have to decide which styles you want to adopt moving forward. You definitely want to eliminate any redundancies. There should only be one primary button for example. Once we've made decisions on which styles are going to move forward with us into the next phases of this project, we're ready to start building out our style guide.
4. Intro to Sketch Symbols: For those of you that are brand new to sketch, I'm going to give a quick overview of the interface so that you're able to follow along with the rest of the lesson. If you're interested in diving in a little further, I'm going to provide some links below to the sketch assets on their website. They have some great introductory videos that'll really help jump-start your knowledge and get you moving really quickly. If you're more experienced with sketch, this might be a slight review for you. You're welcome to jump ahead or stay with us and just get a little refresher on the interface and how to use some of these different tools. So when you first go to download Sketch, it's really easy. You're welcome to download a free trial. There's also a very affordable license option. They make it really easy to get started when you open sketch for the first time, you're going to see an interface similar to this. Obviously all this content is personal to me. Years will just be a blank Canvas, but right now we're just going to focus on the different elements of the sketch interface. Off to the right, you're going to find the inspector. Inspector is going to let you adjust the settings for whatever the current selected layer is or the options for the current tool you're using. When you have a layer selected, you'll see the inspector divides into several sections. These include alignment properties, sizing, styling as well as some export options for these individual layers or elements. Over to the left, you're going to find the Layers panel. This is a layer list that contains any layers on the current page, you can view any layers attributes such as whether it's hidden or locked, as well as being able to organize your document by reorganizing and renaming layers. Finally, at the top, you're going to find the toolbar. Sketch does a great job of really illustrating what each tool does and making it easy to follow along. Especially if you've used Illustrator or Photoshop in the past, you're going to really be already pretty familiar with a lot of the tools that sketch provides. By right-clicking at the top of the page, there's a customize toolbar option, which will open a prompt that allows you to drag and drop different tools that you would like included in your toolbar. For now the default setups fine, but it's great once you start using Sketch more frequently to customize this and save you even more time. We're now going to look at how to create symbols, insert them, and use them throughout your document. We're going to start with a really simple example, just exploring some basic shapes. But this will really help illustrate the power of symbols and nested symbols and how these can be used in a real project. I'm going to start off with this simple document with just a couple of shapes. You can download this and follow along with me and the class resources. You can see it created several pages, which can be done by hitting the plus button here, which will create a completely blank page that you can work off of when you're ready to start a new section. For now, we're starting in this first page called Intro to symbols. You can see it created several pretty basic geometric shapes. Through Insert, Shape, rectangle, oval, star, whatever you're in the mood to create right now. So we're going to start off by making this green rectangle a symbol that we'll be able to use throughout our project. The first thing we're going to do is hit select this rectangle, and then hit the Create symbol button. It allows you to type in whatever you want for a name. For now, I'm just going to keep this one called rectangle. At first glance, it doesn't look like much has really happened. But if you double-click on this rectangle, you can see it's taken me to a page called symbols. This rectangle is now in the symbols page. If we were to want to add another instance of this rectangle is now available to us in the symbols library. I have a few other symbols that are here for upcoming lessons, but you can see that our rectangle symbol has been added to this section as well. If I select the rectangle option, I now have another instance of the rectangle to add into my project. This becomes really interesting when you'd like to make changes to any of these down the road. So say I was working on a project and I wanted to change this rectangle to be purple. In the past, this could be pretty cumbersome, digging through a whole app or all of my mock-ups and really finding every example of this rectangle and making sure we update each one to be a new color. But with this new process of sketch symbols, I can just go back into the original symbol and update the color to yellow, and then when I returned to my original page, you can see that both of these instances have turned yellow. So the next thing I want to review is how to organize your symbols and make sure they're easy to find, even if you're working alone. But even more importantly, if you're working with a team of designers, being able to quickly find lots of different symbols is really important. Let's say I have another symbol that I want to create, that is another rectangle, but it's an outline version instead of the filled inversion here. So when I go to create symbol, let's say I'd like these two symbols to be grouped together into a folder. Maybe I want the folder to be called rectangle. I'll start with rectangle, and then by adding a backslash and another name that will add this symbol into a folder called rectangle. Let's name this one, outline rectangle. When we double-click on this one, it's going to take us here as well. Since I've already named this original rectangle, I'm going to need to go into my Layers panel here to edit it. But all I need to do is add the word filled. It would be rectangle, backslash, fill rectangle. Now, when I go to my symbols drop down here, you can see that I have a folder called rectangle and two instances inside of it that represent these different rectangles. We're going to go ahead and do the same thing with these two ovals. Oval flash, fill oval, and oval slash outline. Now, I'm going to show you the fun part and that's where the nested symbols become really important. What we're going to do is create another rectangle, a larger one, and return the borders off in this inspector panel over here. We're going to create a symbol out of this. I'm going to name this one card. Let's say this is a card design that I have on an app that I'm working on. Within this card, there's some different elements that change from instance to instance, but the design overall is the same each time. When we double-click on this, I can then go in and design my card to be much more dynamic. I can insert a symbol within another symbol, which will allow me to have overrides. Let me show you how this works. So it's a little simpler to understand. When I go and I can insert a symbol within this card symbols. Maybe I want a fill rectangle to go down in this corner here. I would like an outline oval to go up here in this corner. When I go back to my instance of this card, now you can see that there's these two override options that weren't previously there. That's because there's these two symbols within this symbol itself. From this drop down, I can now select from all of my different shapes to choose from. You can see how this would be really powerful as you're creating elements in sketch. If you are creating a house listing, for example, on Airbnb, you might want the image to change from card to card, even the name or the avatar of the user that was the host. By creating this symbol of the card, you're able to place other symbols inside of it that can dynamically update throughout every instance on your site. A couple things to note here before we get moving on. These symbols are all available as override options because each of these four symbols is the same size art board. If this our board was shrunk to these just slightly smaller. You would see that now, not all of these options are available as overrides. So this is definitely something to note. If you're including lots of overrides in your designs, you want to make sure each our board is really specifically sized only for elements that you want to appear in this overrides panel. Another great thing to note is looking at how these names appear in the overrides panel. If you have incidences where you have 30 different override options, you want to make sure that they're named and ordered in a really strategic way. It's easy to edit your components. If we're to look in this car design, I might want to name this layer here, object 1 and this one, object 2. Now, when I go back to my original instance, you can quickly see an edit, which one I'm going to be editing. One final thing to note is thinking about which elements in a component are not going to change from instance to instance. You might have a card where there's a symbol. Let's say it's our outline oval. It is always present in this top left corner on every instance, just so that you don't get a very bloated and hard to follow overrides panel. You're going to want to go ahead and lock this layer. By right-clicking on it and hitting lock layer. Now, when you go back to your original symbol, you can see that this object is not appearing in the overrides panel. This is definitely a great tool when you are building much more complex components to take advantage of and remember. Now that we understand the basics of sketch and know a little bit more in depth how to create, edit, and manipulate symbols as well as utilize the power of nested symbols and symbol overrides, we're ready to move on to creating some more custom elements specific to the app you've selected for your project.
5. Customizing your template: The most important thing about having a design system is really having everything you need in one file, so you're ready to go and able to focus on more important things than collecting all the UI elements to start building mock-ups. Today, I've included a template for you to get started and really jump into the creation of a style guide very quickly. The template can be found in the class resources below, and it's going to include a lot of the assets that you'll need to get started building your app or website. This is something that can be used again and again when starting projects. It's especially great for freelancers or people that are often working off of diverse systems and want to create style guides quickly for their projects. This can be a great value add for clients and can really come in handy to expedite your design process. When you download this template from the class resources, you're going to want to go ahead and open it up. Here, you'll see that there's three pages that I've created. The first is a symbols page. Don't be too overwhelmed when you're first looking at this. These are all symbols that I've created already for you that are going to be dynamically updated as we customize the style guide for your app that you're working on. I'll jump into a little more detail about all of these components individually, but first, we're going to start by focusing on this section here that says initial setup. Here, I've set up a system that'll be very easy to update and can jump-start all of your design process. In the first step, we're going to go ahead and update the colors in our app. You can see here that these colors are symbols, you can tell by the purple writing that's at the top. Also, when you select one, you're going to see that there is this icon next to the layer name, that indicates that it's a symbol. These contents below are going to be what is actually in that symbol itself. There could only be one element, but as we touched on before, nested symbols are going to include multiple symbols within that symbol. You'll see several elements underneath this symbol name that include any symbols that are nested within it. For this example, we're going to go ahead and select this box here. You'll see in the inspector that there's a fill color applied that corresponds to the color of this box. This color is actually the Skillshare color. But I'm going to go ahead and make some changes just so you see how this can affect the overall design of all the components in this template. Let's say that the color of the app that I was building was, how about this red color here? Instantly, you can see that all of these buttons and different elements here have updated to reflect that change that I've made. This can be really handy if you ever need to make changes across your entire app, or want to customize something really quickly based on feedback from another team member or a client. Go ahead and update all of these elements here and as you do each one, you're going to want to go ahead and sync this color. What that does is sync the color in your palate across the entire template so that it will be there for your reference in the future. I'm going to go ahead and change this back since we do want to be following Skillshare style guide and I'm going to go ahead and refresh this. You can see everything's gone back to our blue color. Go ahead and take care of these. You don't need to use every single one. I've included what I thought would be a pretty typical number of colors, but you don't need to utilize all of these options. The next thing we're going to do is customize our typeface. You can see at the left of this screen that I've included all the font styles that are included in this template. You can always add more or use less, but I thought this was a good starting point for us to get a sense of how type styles work and how we can apply these throughout our design. If you want to add more, you can do that in the future. For now, we're going to start by just selecting all of these type styles. You can see here that there's a place for typeface. Here, you'll be able to select which typeface you want all of your fonts to be across your site. For me, I know that Skillshare uses Proxima Nova. I'm going to go ahead and select Proxima Nova and hit the sync button. Now, you can see any text here has been updated to be in Proxima Nova font and that'll be consistent across any application of tax throughout my app. The next thing we can do is select specific font colors. Let's say I want my primary text to be green. We can go ahead and sync those styles. You can see this is a little tougher because there's not every application of textile throughout these components, but anywhere that that text was applied, you will now be able to see those changes throughout the app. I'm going to go ahead and undo that since I do want my text to be blue, but you can update any of these styles to match your needs. I would say overall, it's definitely best practice to have, at least, one or two versions of a gray or black font that you can use throughout the app, as well as something that's white in each size so that you can apply those on darker buttons or a darker UI. Now that we've customized our type and synced those styles across the app, we can also customize borders. This is definitely an optional step because I've already included affiliated option, a rounded option, as well as a square option of border. But if there's anything custom that you're looking to include, go ahead. Select all these borders and make any changes that you might want to the radius, the thickness of the border, or anything else that you might find fit for your specific app. You don't really know or you aren't sure what you want to do, don't worry about this step for right now. This is getting a little more in the nitty gritty and might come in handy when you're working on another project in the future. Final step is adding your logo. This example, I just use Google quickly. You can use add in your logo for your app. You definitely want to make sure that the outer edges of your logo are going all the way to the sides of this art board or symbol container here. We have a place for you to have your white logo as well as your dark logo. You can see that these are named in the structure that I mentioned earlier. These are going to appear in a logo folder with both options available. You can also add different color options or variants of your logo in there as well, depending on what your needs are. Now, we've done all this work to customize our template here. We can play with some of these symbols that I've added in just to get a feel for the power of all of these nested symbols and customization that we've done in this template. A great example is this form. You can see there's options to change the text color with all of the different text styles that we set up before. If I would like the text to be my blue color, you can see here that that's now updated. It's also very easy to edit this text. You can say, Form Title, and that's going to update really quickly. You can also update some of the styling in here. If you wanted a different form type, maybe, you wanted an icon in there, it'd be really quick to add that as well. You can also see my text is being cropped a little bit. Luckily, this component is responsive for me, which we're going to learn how to do in future lessons, but I'm able to click and drag and make sure all of my text is fitting in. I can also customize this text and do any other options that I might want from here. If I want my border to be blue as well, or my background color to be blue as well, that's very easy to edit. Same thing with this button. You can see I'm now able to really quickly make changes. These are going to be how you're quickly updating instances of symbols across your app. After customizing this template, I'm sure you now have a much better understanding of how powerful these design systems can be with all of the nested symbol tools that are in the new versions of Sketch. I hope you're just as excited as I am about all of these tools and ready to move forward with building some more custom elements for the app that you're working on.
6. Using symbols in your workflow: I'm just going to run through quickly and show you a little bit more about some of these different components that I've already created for you to use in your future projects. I've tried to keep things pretty basic. You definitely don't want be creating these design systems in a way that you end up with so many elements and so many symbols in your file that it's really hard to manage and keep track of all the different options. I've included what I thought you'll need to get started, you're obviously welcome to remove and add things as needed. I'm going to run through in the next lesson, how to create custom components. For now, I've given you options for add-ons such as cursors, some avatars, lots of buttons and badges. These are definitely very common UI elements that are going to appear frequently throughout your app or website. I've also included lots of forms which are very common as well. Settings options such as radios, check boxes, and other labeling systems, as well as list and menu items that appear frequently, especially in iOS and Android apps. Also having navigation elements such as headers, status bars, and other things that are going to appear frequently such as a tab bar that appears at the bottom of an app. Another thing to note is, all of these text styles that are shown here as elements. If you ever want your text styles to be editable, you'll need them to be added into a component as a symbol instead of just as a text style. If you want the text to always be a certain size, weight, and color, then you don't necessarily need it to be assemble. But if you want to be able to override white text for black on a different button from instance to instance, it's important to add that into your symbol as another symbol. For example, in these buttons, you can see that these are actually texts symbols. Looking here in your layer panel, you can see this little icon that indicates it's a text symbol. That'll allow me to override it with any other texts symbols that are the same size. This is definitely handy for buttons, but there's also instances like in forms and other header and navigation items that you're going to sometimes want to use black texts, sometimes use white, and you don't want to have to create a different symbol for every text color. That would be redundant and definitely defeat the purpose of symbol overrides and sketch. The same thing applies for different colors and button fills. Because your different UI elements might be varying in color from instance to instance. You want to make sure these colors are available as symbol overrides in that specific symbol. You'll definitely see this come into play later in the process. But even in instances like your icons or different tags, you'll want the color of this background on the tag to be editable. You can see here that the container, is actually a symbol and that allows me to edit the UI fill to be different colors depending on the instance that I'm using. Let's say we wanted to go in and add another text style here of this 20 point. I'm going to show you this example on text, but you're definitely welcome to do this similar process for other elements in this page or at other simple building block components such as these, anywhere you feel like they're necessary for your app. If we go ahead and copy this symbol, all I'm doing is holding control' and dragging. You can also just select the symbol and hit 'Command D' which will duplicate it for you. Either one of those is great options. Here, you can see it's a duplicate because it has the word 'Copy' at the end. But I'm probably going to want to rename it. Let's say this one is going to be primary, which will indicate that it's my primary color, which here is blue and it's going to be bold. The background color on this symbol is black, only to let you see that this white text is here. We don't need that since my text is going to be blue. So I'm going to go ahead and turn that off, but I will select this text and I will create a new style, and that's going to be called 20 mobile normal and then again, primary, bold. All I need to do, is go in and update this to be my blue color and hit 'Sync.' Now we have a symbol that is my primary blue color and it's going to be interchangeable with any of these other symbols when they are used in nested symbols. To test that out, we can go ahead and just quickly create a new page. Let's go ahead and insert my symbol. If we go to symbols and then under text 20, normal and then primary bold. This was a symbol that we just created. You can see that now this is interchangeable between all of these different elements. This is definitely even more useful if it's nested inside of another symbol. If I go back to my symbols page, let's go ahead and test out how this could be used. Let's say that, I know that this size 20 style is used in my button, large symbols. Let's go ahead and create a new page by clicking this plus sign. This is just for an example so we don't need to name it. We're going to go ahead and insert a symbol and it's going to be our large button symbol. Let's just do a left-hand button here. I want my text to be, oh, there it is, text 20 point normal primary bold. That's the symbol we just created and you can see it's now interchangeable in dynamic within this nested symbol. Once I select that, probably want a different backgrounds. You can see already now I'm able to select from all these new background colors. Maybe I want a light gray background. Now, you can see by having all of these different options, I've created a really dynamic system for creating buttons styles. Hopefully, you're now able to see the full power of nested symbols and how to create a style guide quickly, that'll really speed up your workflow. In the next lesson, we're going to go through creating some more custom and complex components for you to use in your app design.
7. Building custom components with symbols: To do a quick recap, components can be thought of as larger elements that are made up of small, simple elements within your UI. This could be a button that's made up of a text style, a background color. It could also be much more complex items. A class card on Skillshare or a home listing on Airbnb are both great examples. There could also be more general elements that are used throughout all user interface designs such as forms, models, and other elements that you'll commonly see on websites and apps. When you did your interface inventory, you probably noticed many of these components throughout your user interface, and probably have a good idea of some of these that might be a good thing for you to build and sketch. By building these as dynamic and flexible components, you'll be able to use one single element numerous times throughout your sketch design, and save tons of time instead of building an editing each symbol. Then having to go back and update each one individually if any changes need to be made. We're going to go ahead and select 1-3 components that you would like to build and sketch. They would be helpful for you while building out your interface in your style guide. To start, I would suggest choosing something pretty simple with only a few elements. Then we can build on something more complex that has more dynamic updates that need to be made throughout the interface. Go ahead and think of something that you saw commonly throughout your interface that you would like to build as a component. If you think of an example like Airbnb that we've been discussing, they have this very commonly repeated component that is a listing of a specific rental. This element itself does not change, but things within it update from instance to instance. You can see here, lots of different home listing options that are all the same component, but are very dynamic to reflect the needs of each individual listing. Some more examples you can see here from Airbnb show how many components are really used throughout an interface. You might have hundreds of different components that are dynamic and flexible enough to build out full screens throughout your app. When looking at the Skillshare app, I identified three components that I would like to build as flexible sketch components. I tried to pick things that weren't too complicated just to illustrate how we could build these very quickly. But then I also wanted to build something more complex such as a row of multiple classes that would be able to be inserted really quickly, customized, and feel like a real live app. To start, I wanted to build this empty state of our app. This occurs frequently throughout the app's design, but the icon, text, and button, style, and contents may be different on every instance. This is a great example of something that you might want to build as a nested symbol. The first thing we'll do when we start to think about building these components is, look at which elements change and which elements are consistent throughout the design. For us really, everything will change in this specific example except for maybe the spacing between each element and the width overall. I went ahead and copied some of these elements from below just to pull out only the specific items that we're going to be working with. As we mentioned before, a nested symbol is just a symbol that contains other symbols inside of it. We're going to start off by creating a symbol that just simply has all the contents of this element right here. Just simply create symbol. For now we can call it Empty State. Later as we start to build more components, we'll definitely want to be more aware of how we're naming this, and how it'll fit into the file structure of the rest of our symbols. When I double-click on this, it'll take me back to our symbols page, and you can see that it's created a symbol here. If it ends up in a group, you're welcome to ungroup there so you can see what's all is in here. For me, I was actually already using an icon for this specific design, which is great because now I'm able to use overrides panel to select other icons in this option. If you aren't using icons or any other symbols here, you'd want to go ahead and answer these things as symbols. For example, you see that this button is actually just a group. It's not a button symbol, so we're going to want to replace this with a button symbol so that we can dynamically override it in different instances. If we go to our Symbols drop down and we go to Button, I'm going to go ahead and select a Small and Centered button. You can see that the styling is a little different. This really illustrates the purpose of having a style guide. This button design actually wasn't included in my style guide, which means it was a singular design that wasn't aligned with the rest of the UI in the app. It's really important to make sure you're keeping a good inventory of your styles and not letting the system get too bloated as your app grows. We're going to go ahead and actually just remove this old button since we have this one here now. In this overrides panel, I'm able to update the content, maybe I just wanted to say sample button for now. Since we're designing this as a component that's going to be used throughout my design, it doesn't need to be specific to this empty state. I can go ahead and add this in here. We need to think about how this empty state is going to be used. Is this texts going to need to change its styling? Might we want a light gray in some instances, a dark gray in some, maybe it would be blue sometimes. I'm not sure, but just to be safe, I want to go ahead and use a text symbol here so that it'll be much more flexible down the road. Again, this is size 17. I'm going to go ahead and say, "Symbols". We're going to go to Text 17, and will be Centered, and we want gray one. Now we have our headline text, and I'll go ahead and add some placeholder copy, and we'll make it the full width of this, and we'll put that right in there. Now, we can delete that original one. Then we want to also have our subtexts. Let's add another symbol that is Text, and this one is size 14. We'll do centering, and maybe start off with grade two. Whichever styling option you select originally will be the default option that appears when you insert this symbol down the road, but you're not stuck to that design. I normally just try and select the style that I think I'll most commonly use, but then from there, you can edit it at each instance. Go ahead and update this so it's the correct height. The next thing we want to do is actually utilize a plug-in for Sketch that's really going to make it a lot easier to arrange these items in a way that they can be varying heights in different instances and still have the same spacing. Say this drop-down to being three lines or one line instead of two lines. With the way it's currently designed, this button would not be responsive to that change and so you would have some spacing issues. What we're going to do is download a plugin called Launchpad for Sketch. I'm including a link for this below in the class details but it's free and it's very easy to install, just download, double-click, and it's going to auto-installed on Sketch for you. Once you get that installed, it's going to appear in your bottom right corner of your screen and you'll see some added functionality. The functionality we're going to review right now is this auto layout functionality, but the rest can be explored through the apps' website. In your new component you've created, you're going to go ahead and select all of the different layers, and this is going to give you a lot of added options that aren't included in Sketch to begin with. Right now we want to vertically align all of our elements. Other options would be left lining, but we're going to stick to a vertical line and then it's going to let you specify the spacing between each element. Maybe we want 15 pixels between each element, no matter what how many lines of text are in each of these or how big the icon is. We also, while we're still in our symbol, want to make sure that the layering of this object is in a logical way that we'll be able to understand when we're looking at the overrides panels. For example, right now this headline is at the very bottom. Maybe a little confusing since this button is actually the last element. We want to go ahead and move this up to be right below the icon, and then we'll have the subtext here, and we might want to even name this so we might want to rename this layer, Subheader, and then we'll name this layer Header, and then we'll name this one CTA. Great, so now when we go back to our components, we can see that the Header and the Subheader clearly labeled so that we don't have to do any guessing as to which texts we should be editing. Maybe we want our Subheader to only be one line. You can see that the button automatically moved up to accommodate that change in spacing so that our spacing would be fixed no matter which instances in. This is a great tool to use when you're creating these more dynamic symbols that you aren't really sure how long each text element is going to be or how big different graphic elements might be that'll allow much more spacing consistency throughout the app. The next thing I'm going to do is run through one more example of a slightly more complex component that would be used very frequently in the Skillshare iOS app. Here you can see the full mock-up of a pretty standard class page on Skillshare. This is definitely used when you're doing browsing, when you're searching, when you're discovering new content, or even when you're looking at recommended content on your homepage. This is a very frequently used element that we definitely want to be really reusable, easy to update, and customizable to different pages on a site. I'll walk you through a little bit of the logic of how I might build an element like this. I would start by looking at which pieces of this are flexible and changing, and which might be more consistent throughout each instance. You see this hairline, this is something that's going to be in every instance this component. When you look down, you can see it's applied to almost every row of classes. In this instance, and really on all of our pages. Obviously, something that wouldn't update. Also being able to see all classes, that's probably something that's going to be on every instance. We'd think of that more as a static element. The trending classes text is something that would be on every element, but may or may not change as far as the copy goes. We would want that to be flexible, but it we would always have that as an option in that component. For each individual class, we would always want to display the time, but the actual time written there might vary from instance to instance. As well as the title, artist and background image of the class cover. The way I would think about building this would be starting by building a single element of one class and then building a single element of this header and then being able to compile that into a larger, more nested symbol that can be applied as a class row overall. I've already gone ahead and set this up a little bit, but I'm going to walk you through some of the logic here. I started by creating this single class element, and it really is only made up of four specific things. One being this class background image, one being the time, and then we have the title and the artists, and then we have the title and the teacher. We definitely want to think about these. These are three specific items, but we already went ahead and we grouped those together into a group called Time. We also went ahead and grouped the class image and the Time together since they're really in the same object and we want to keep those nested together. We also made sure to use a specific text style. We'll go ahead and use size 12, normal and we'll go ahead and do white bold here. Now that is a set style that's going to match everything else in our app. We also used a specific icon in this design so that it can be edited and updated to be other icons if we ever needed that functionality in the future. This also maintains consistency. If we ever want to update the clock icon across the site it'll be really easy for us to update it in a single location in our design system. We want to do the same thing with the class title and teacher. For this, we'll go ahead and apply text style as well as for the teacher. There's a setting here that allows you to adjust the content on this card to fit the artboard size. When I should return that off if we're ever adjusting the overall artboard size here. I'll turn that off just to edit this, and then we can turn it back on so that the symbol is adopting whenever we change the instance size. I'm going to cover this more in depth in the next lesson, but it's just important when editing these symbols. I also went ahead and applied our stacked group functionality as well, and you can see when I hit my stacked group layer, I can go in and view the settings again so I can always edit it to be closer together or further apart. Let's go back into my overall artboard and look more at this composition. You can see that we would have two instances of this class object, and then we'd have an instance of this header item. I think the next thing that I would do is build out this header. I've already started this in my symbols library as you can see. I've started by creating a simple component that has two text styles here. One being the see all and one being popular classes, as well as this horizontal line, and like I mentioned before, this horizontal lines consistent across all instances. I'm going to go ahead and lock this layer. That's going to hide it from the overrides panel and just make everything a little easier to work with. Now when I go back to my symbols, you can see that under "Content", which is how I nested these. I now have an option for a section header as well as a single class. I'm going to go ahead and add my section header in here, and I can delete these objects that aren't assemble anymore. You can see that I now have three symbols where it used to be a whole list of layers. Much simpler to see on my layers panel and understand what I'm looking at. The next thing I would do here would be to create a symbol out of all three of these. This isn't necessarily something you would have to do, but I know that since this row is going to be used many, many times in the app, I'd rather have all of these be together instead of always having to insert three symbols. For me, this makes the most sense in this instance. I went ahead and created this content class row component that has two classes as well as this section header that we created previously. You can see in this object, there's a stacked group already created and it's going to have the header as well as a group that has two classes in it. When you create a group, the stacked group functionality will actually count that group as one item. Because we've grouped these first, these are able to be directly adjacent to each other. The styles from auto layout won't be applied to each of those components individually. Now we have a pretty flexible component that can be used over and over. Now I want to show you just how flexible these components can be. When we go back to our original page, you can see that we have some instances that I might want to apply this new object. If we go to our "Symbol" and go to our "Content" section and we look at a class row. I can go ahead and insert this here, put it in the same positioning, and then just go ahead and delete the old one. Now we have a full row with all the same content as before, but now we're able to quickly override and customize all of these options without having to individually manipulate these across a large scale. This is definitely handy. If you ever want to make changes or make something that looks like a very realistic mock-up without having to do as much customization. Even choosing a class image here we can go in and I have some saved, go in and update these really quickly, and you can see, instead of having fake content, you can really make things look convincing, which is great for clients, even presenting to stake holders if you work in a larger company. This definitely comes in handy when presenting your work to others. One last thing I want to show in this lesson is how making changes to these complex symbols can be such a time-saver. By going in and clicking into our symbol, you can also double-click into a symbol within assemble to take you to that symbol. This will be really handy if you aren't sure where in your file that symbol is. Just double-clicking will jump you straight into that symbol and let you edit it from there. Let's say I decided that instead of having this text be black, we actually wanted to change this, one of my clients, let's say asks me to update this to be a blue and bold text. I can just update this in this single location, and now you can see it's updated in this symbol as well as also being updated in the final mock-up. If I had this applied a 100 times in my project, they're all now updated, saving me so much time from having to go and locate each instance and update them individually. Hopefully, this is really illustrating the power and time-saving capabilities of these nested symbols and components in Sketch.
8. Sketch resize settings: You want to learn a little bit more about resize settings, that we can make our components even more flexible and responsive. This is really helpful, especially if you're designing for multiple screen sizes or devices. Resize settings can be a little bit complicated when you first start out, but I've included some great resources in the Class Resources Sketch File, in the Class Description below, that can open up and get a great idea of a lot of the options and how they work in real applications. Looking at this sketch file in the resize settings here, you can see that there's an example with four very simple applications, but different resize settings. In the first example, you can see that there's no resize settings applied. This means that this white box is going to just simply stretch to fit the same ratio and proportions as the overall group itself. So when I go on this overall group and I go to resize it, you can see that this white box is simply stretching to fit the same ratio as I'm dragging the overall object today. The second example has different resize settings applied. This one has all four corners paint. This means that the number of pixels between the outer edge of this green box and this white box on all four sides, will remain consistent no matter the overall size of this object. When I go to resize this whole group, you can see that the spacing on the sides of the object and the top are consistent. In the third example, you can see that we've applied a fixed width and a fixed height to this white box. That means that when I click on the overall group and go to resize, the white box doesn't actually change in size no matter what size the overall group is. In the fourth example here, similar settings are applied, but we also are applying pin to the top right corner. So it's pinned to the right and the top here. You can see that a similar thing's happening except for the object is now pinned to the top right. Understanding these four types of settings, is definitely really helpful when first starting out and applying resize settings to objects in your components. To look at some more complex examples, you can see here several groups of objects that together make up a larger gallery, potentially with an avatar and some tax or different objects here. It could be applied in different ways. To familiarize yourself with how some of these resize settings would work in these larger groups, you can go ahead and start playing with this sample group to the right. By making some changes to the size and ratio of this object, and then re-referencing these settings applied here, you'll get a better understanding of how these work on actual components and how they might be applied to your specific components for your app design. To give some slightly more realistic, but still pretty simple examples, I want to reference this menu item here, as well as this form field that I've applied in this file. This is a great example because forms are definitely something that is used across different devices and many different applications with different constraints. So this instance seems to be working pretty well right here, but let's say we want to make a copy of this. If we were going to apply this same design on mobile, we might be constrained in the width of our objects. If I go ahead and shrink this down, you can see now the text is spanning on to two lines. This could definitely be an issue. It's not very legible and it's not very realistic looking for how this would look on a live application. If I go to adjust the height here, you can see that I've set this up so that the field itself has a flexible height responsive, but these other objects, such as this small icon here are a fixed width and a fixed height, and they have different resize settings. By applying these settings in strategic ways, you can make each item very adaptable and customized to its specific needs. For one more example, for this menu item here, if we were to shrink down the width to be much narrower, you can see that now my text is getting cropped off. I may want to increase the height so that it's more legible and more realistic looking, but you notice that my avatar has settings that were fixed width, fixed height in pin to corner, while some of these other items are more responsive and able to text wrap without changing any of the ratio of the overall component. Now I want to go ahead and jump back into our other sketch file with our template here, and show you how some of these settings might be applied to our empty state component that we made in the last lesson. Looking component in our original file, you can see when I go to resize it, that there's definitely some issues that probably aren't ideal. You can see that our button is really just stretching to fit the size of the overall component that I'm adapting, but it's not really working well for the tax or the legibility of any of these objects. In addition, I think that this icon at the top might be better if it was a consistent size. I'm not really loving how it's adapting and growing and shrinking with the component as I move this around. So I'm going to go double-click and jump back into the Symbols Page and make a few adjustments. The first thing I'm going to do is deal with this button. I definitely wanted to be a fixed width, I don't want it to be able to get so narrow that the text no longer fits in the button. I also want to fix the height. If I have to drag out the height of this object overall, I don't want my button container to be growing and shrinking. The second thing I'm going to do is add a fixed width and a fixed height to my icon here. So now when I go back to my original page and you can always say, set to original size as an option, which is a great thing to have. Now you can see when I go back and scaling the size of this, the button is much more consistent and the icon is a consistent size as well, which is what I was looking for with this component. So you can see that by making these small changes to the settings of these individual items within a component, they become much more customized and flexible to your specific application as well as dynamic, if you're designing for different devices or different screen sizes. Hopefully this is helping make your components and your designs seem as a much more flexible and usable for your application.
9. Sharing your styleguide: Now that we have a much more comprehensive Design System established, including responsive and dynamic components that are built just for a specific app. I think it's time we learn how to share this System with others on our team, or even just across Computers. Even if you're just a Freelancer working on your own, it's a great idea to have the System stored across multiple devices and with easy access in case you're jumping around or want to share with clients. The first tool we're going to look at is a plugin called Craft by InVision. Some of you may know InVision as a Greek prototyping software. They also have some great plugins for sketch. There's several that they offer, but the one we're going to touch on today is called Library. You're going to go ahead and download Craft online. Really easy, free tool that you can download and install really quickly. It's going give you Craft Manager installed in your toolbar where you can see all the different options to install, as well as when you have updates like I do currently, you'd be able to update straight from here. Since I already have it installed, you'll see a Panel right next to my inspector that allows me to quickly access the tools that they provide. This second option down is a Library tool. When you click on that, you're going to see a pretty simple interface that allows you to either import a library or create a new one. In this instance, since we're the one creating the style guide, we're going to create a new library. You can name this whatever you want. I'm going to go ahead and call mine Skill Share. Then you're going to need to choose a destination. I'm just going to choose my Desktop for now, but you're going to want to choose somewhere such as Dropbox or a shared folder if you're going to be sharing this across multiple teams or even multiple computers. Just hit Create Library and now you will see an interface that allows you to add items. When we go into our, I'm going to go to my Symbols page so that I can see all of the content that I would like to add in here. Craft libraries, definitely a great tool to store all of your type settings, all of your colors, anything that's more of a style setting that you're going to want to see across devices, this is a great tool for that. As far as storing overall components, I'm going to touch on that in the next tool that I share in the next lesson. For now we're going to add some colors to our Craft library. When you hit "Add new item", you can see that you get a dialogue to grab different colors from your screen. You can just grab straight from your symbols page and start adding all of these colors into your Craft library. One thing that's a great idea to do is after adding these while you're adding them, go ahead and give them a name that's going to correspond to how you refer to the color across your teams. That could be, however, your developers referred to the color in their code base, or it could just be how you want to remember it throughout all of your style guide references. Once you add all those, you can also go ahead and add your text styles. A great way to do that, is going to be just selecting all of these textiles that we had as a reference before and hitting "Add new item." Might take a minute, just a minute if you're doing multiples of the same time. But you can see really quickly now I have all my text styles as a reference point in my Craft library. At this point, it's really easy to share this across, as I mentioned, multiple computers or with teammates. Also what we need to do to use the same libraries, you would be to have that same folder accessible to them. I recommend Dropbox sync as a great option, but there's plenty of ways to share these files across teams. When someone's going into Ava's library to their craft panel, they would just select, "Add new library", "Import library", and then they would be able to quickly choose that same location. This allows you to update the Craft library and have those changes reflected on a team mates computer or on your home computer, if you made changes at work. Definitely a great way to stay on the same page with your whole team, making sure that changes are reflected across all computers and all instances of these symbols. The next tool I'm going to share with you guys today is new in sketch version 47, which is the most recent version of Sketch. This is going to allow you to add all of your symbols into a single library that can be referenced from all of your sketch files. Again, this is great for teams, but it's also great for anyone working on multiple files that wants to share the same style guide across all these files or multiple computers that wants to have the same library reference. What we're going to do to use Sketch libraries is we're going to go to our "Sketch preferences". and we're going to click on the library's tab. This makes it really easy to add new libraries into your shared libraries folder. All you're going to do is select "Add Library" and select a actual file to use as a library. In this case, you might want to select the file that we're actually working on right now as your Sketch library. What that's going to do, if you were to select one, I have an example from my other style guide for the skill share desktop version. I've added that here as a sample style guide, and what you can see is that now all of my symbols from my style guide desktop version are available to me here. It's a really great way to cut down on file size and makes symbols much easier to access because they're not actually stored in this file we're working off up they're stored in the library file. We don't have to have every symbol listed in our symbols page, we can have one large reference file that's holding all of these symbols for us. This also allows us to make changes to the symbols library once, and that then is reflected across any sketch file that's referencing that library. If I were to have a file that I worked on six months ago, but have this same library embedded in it, when I open that file again, it would alert me that all of my styles would be updated to reflect the changes that were made in that symbols library. This is definitely a good tool, especially for larger teams, if anyone is responsible for making changes, they're making updates to that symbols library, it makes our job a lot easier because they only need to do it in one place and everyone will automatically be updated, that they need re-sync with the library. As you can see, definitely the naming conventions and organization tools that I taught you in earlier lessons were great way to help keep everyone on the same page and allow everyone to be working off the same library. Hopefully these tools have really helped you, whether you're a freelancer working on multiple computers or working on a large team to really make your workflow more efficient and keep more consistent style guides across all of your files.
10. Recap: I want everyone to remember that this system is supposed to work for you. This is definitely not one size fits all and feel free to tweak this process, or even approach to better fit the needs of your project or your work style. I'm really excited to see some of the work you guys produce and I'd love to have everyone post projects and screenshots in the project section below in this class. Definitely, I love to hear any questions you guys have, problems you run into, or anything else you'd like to know about creating style guides and design systems for your projects. There's definitely so much information to learn about this topic. There's lots of people that are very active in the community that I love to stay up to date with. I'm going to post some resources below, especially from larger companies that are doing really cutting edge stuff with design systems, and really pushing the industry forward into being much more well adapted to the way developers work and the way that design teams and developers should work together in the future. Thanks so much for taking this class. I really hope it's been helpful in showing you how to create these custom and dynamic design systems that can really help evolve your design process, as well as make your overall app or website more cohesive.
Rye B., Product Design @ Skillshare
