Now you'll need to generate shades for your colours. Step 1: Choose your color categoriesĬhoose three categories of colours: a primary colour, a secondary colour, and greys (neutral).ĪDVERTISEMENT Step 2: Generate Shades for the Colours If you're working with a client, they may already have a colour palette in mind. If you don't have a specific colour palette in mind, you can try sites like or to get colour inspiration. You must be able to pick colours that complement each other for your style guide. Getting the right colours is very important for creating great designs. Now we'll create a style guide from scratch in Figma, including the elements listed above. You should include these elements with their specific states – default, active, disabled and hover. Elements are essential, as a user cannot function effectively without them in your design. UI Elements: UI elements in a style guide typically includes buttons, input fields, checkboxes and alerts and notifications. You cannot afford not to include a grid system in your style guide. Grids are indispensable in establishing consistency across all screens in a design. Layout grids: a grid is a system that aligns a page based on rows and columns. You can choose a collection of icons that you'll use in your designs to keep them consistent. Icons make communication easy and they are typically universal. Iconography: this is the use of mostly symbols, figures, and images to convey more meaning to a user. You can use them for micro interactions like arrows, progress bars, and even headings. Secondary colours complement the primary colour(s). Primary colours are colours that are displayed frequently across all screens and elements in your design. You should have three categories of colours in your style guide: primary, secondary and neutral colours. Remember to choose typefaces that complement each other.Ĭolour palette: the right choice of colours for your designs can help determine the reaction of your audience, make them feel comfortable, and increase user satisfaction. Limit your design to 2-3 type faces in order for your design to look neat and professional. Your style guide should include typefaces, font sizes and font weights. Typography in your designs should be legible, easy to read and understand, and visually appealing. Each font you choose for your designs conveys a message to your user.
Typography: this plays a huge role in every design. Some of the components of a typical style guide include: And it can help boost your productivity.It improves communication between designers and developers.It's a learning resource for newcomers and helps them onboard more quickly.It helps all your user interface elements remain consistent.
Having a style guide is important for various reasons, which include:
0 kommentar(er)
