Design Systems Part 1 – Create a Visual Design Language for Colours & Typography ( Beginner Guide )

October 9, 2019 posted by


in today’s tutorial design systems part 1 will be diving into colors typography and shared styles so what is a design system well a design system is a collection of reusable components with standards that can be assembled together to build any application and it’s based on a common visual design language I’ll be using sketch to create reusable components by taking advantage of a feature called shared styles shed styles are rules which define the properties of a layer which can then be reused throughout your design document for this tutorial I’ll be basing our typography of the material design type system I’ll add the link below but they actually provide a lot of properties to get us set up quickly [Music] we’ll start with heading 1 and set our font family size line height and letter spacing keep the laya selected and created textile for hitting one you can now go ahead and repeat the steps for all your other font styles [Music] I’m going to rename my textiles left representing left-aligned I’ll also create a right align and center align textiles [Music] [Music] you I’m also going to add state styles which represent feedback [Music] now we have our typography set up it’s time to set up our color palette as shared Styles your color palette in your design system generally includes one two three primary colors that represent your brand and some neutral colors typically gray that represent background borders and fonts just as we set up typography state styles we’ll also be adding colors for state to go ahead and insert a rectangle shape and you can add in your primary color I’ll be selecting a turquoise blue color to create a shed style keep the elements selected and under appearance in the right panel click on no layer style a drop-down will appear and you’ll want to choose create new layer style I’m going to name mine primary I’m also going to create a primary light color which is just the primary color but lightened by 20% and I’ll create a primary darker which is also just the primary color darkened by 20% these colors are going to be useful for button:hover focus and active states when we create those elements go ahead and create new layer styles for your neutral colors for text and also for your state colors such as infirm or nning success and danger [Music] [Music] [Music] now that we’ve created all Evalia styles for our colors we can select organize layer styles and we’ll be able to view all the layer styles and textiles that we’ve just created and I’ll just tidy up the names here I hope you enjoyed this video beginner’s guide to design systems part 1 in part 2 we’ll be looking at buttons [Music]

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *