My Dear Friends of Figma in In the previous video we learned about design system principles or the why behind your design system this video is all about foundations foundations are the what of your design system the building blocks you’ll use to create product experiences like visual styles colors.
Typography components as well as patterns like structures behaviors and conventions there’s a lot you can include here and it will vary from system to system we’ll cover just a few key aspects to consider one important practice to include in your foundations is accessibility.
Accessibility which you might see in its abbreviated form is a type of inclusive design focusing on people with disabilities disabilities take many forms and can impact the way we see hear speak touch and understand the world around us they can be permanent like blindness temporary like a broken arm or lost.
Voice or situational like low visibility while driving as designers our decisions impact the way people experience the world foreign people can’t access or use what we’ve built we’re denying them these experiences it can make people feel unimportant forgotten or unwelcome.
You’ll see accessibility as a foundation in many Design Systems it’s an effective way to empower teams to create more accessible experiences at scale accessibility is a vast but important journey to take if you want to learn more check out the resources link below color can express personality invoke.
Emotions and influence behavior it can mean different things to different cultures in products it can create hierarchy and provide affordances an effective color palette should offer a selection of colors having too many can create chaos but having too few can limit the flexibility in your designs.
This can get especially tricky when considering how colors adapt to different themes for example if you’re creating a dark mode for your product this involves more than just swapping light and dark colors you may need shade variations for colors or if your company has multiple products you want them to look and feel distinct.
But adding Too Many Colors to achieve this leads to inconsistency in how they’re used brand confusion and a palette that’s difficult to work with to create a balanced color palette it’s important to assess colors against the functions your system needs these functions can become a semantic color system or single color values provide.
Semantic meaning for functions like messaging status priority actions and more try it out go audit your team’s designs is your team using many similar colors that could be simplified into one value are there functions being represented by more than one color maybe there are five different colors being used for the.
Primary buttons in your product try narrowing those down to fewer colors keeping your color palette simplified also makes it easier for consumers of your system to use color appropriately it will help designers avoid clutter and create balance designs like this one that follows the 60 30 10 rule where approximately sixty percent of the.
Screen is a neutral color thirty percent of primary color and 10 is secondary or call to action if you have one a color system is ever evolving start small and grow it over time with your team’s needs there are also a number of accessibility considerations for color.
Contrast the contrast between foreground and background colors impacts our ability to see an element clearly there are many tools available for measuring contrast and accessibility in figma you can find plugins in the community to make sure your designs meet web content accessibility guideline rules there are three acceptable levels a double A and.
AAA the more A’s the higher the standard these guidelines are the minimum so aim for double A or higher this system isn’t perfect and sometimes you’ll get results you might not expect there’s no substitute for testing your designs and getting feedback from actual people make sure to include people with different accessibility needs especially.
Those with assistive Technologies it’s not just contrast that’s important for accessibility not everyone sees and distinguishes color to the same extent so we can’t rely on color alone to communicate status or give meaning to elements consider adding a symbol icon or help or text in addition to color to better.
Distinguish elements a strong typography system creates consistency personality and readability across your product there are many things to learn about type but we can only scratch the surface in this lesson if you’d like us to dive deep on type in the future leave a.
Comment and let us know choosing a typeface or a font from that typeface can be a challenge the right or wrong choices can have a huge impact on our designs you might need to work with other teams like Brandon marketing to find alignment your brand Team might want a large display font for brand recognition.
Or a handwritten font to bring a playful personality but you may also need a modern Sans serif font that’s easier to read it’s likely that you’ll end up with a few fonts in your typography system so try to aim for a balance between personality performance and on-screen legibility.
Choosing a font could be an hours-long lesson on its own but we’ve included some resources in the description if you want to go deeper now let’s chat about type scales a type skill is a collection of font sizes and styles that make up your type system it starts with a base text size often 16.
Pixels and a predetermined scale factor you multiply by your chosen scale factor to create larger text sizes or divide for smaller text sizes the goal is to create a harmonious collection of font sizes that you can use across your product using a popular scale factor is a great place to start like the major third or.
Perfect fourth try out a few multipliers using plugins like typescale by Sam Smith or scale with three A’s by Nicholas Massey in figma and see which scale works best for you here’s a tip if you’re using a grid system like an eight-point Baseline grid try rounding your type sizes to the.
Nearest whole number that is a multiple of eight you’ll want to do the same for the line height too not sure about grids we’ll cover those soon it’s common to see a type skill presented in a hierarchical format this type scale includes fonts for headings subtitles body text and elements they.
Each have properties for font weight size and letter spacing if you use this skill for a blog or a documentation site you could make some assumptions about which fonts to use like a headline font for your headings and a body font for your paragraph text but if you were designing an app with.
Custom elements and layouts you may struggle to choose the right size in this situation it might make more sense to approach your type skill with its intended application in mind you can see this approach reflected in this type system instead of a list of six headings and two subtitle fonts we have display fonts.
Title fonts and body fonts each with a small medium and large variation we can first choose a font by its function or role and then its size there’s no limit to how many sizes you can include in your type scale but if you have too many font sizes it can be tempting to use them in the wrong way or be inconsistent with how you apply them.
Sticking to a few sizes will make it easier to create consistent and harmonious designs as we saw in this type system size isn’t the only property to consider think about some other ways you can create distinction with type how does letter spacing impact density or readability how does font weight impact hierarchy.
What line height makes sense for headings versus body text work with your team to find all the text in your main user flows of your product you can even reference your audit findings from the previous lesson how many font sizes and styles are you using are they consistent between different pages in your designs what.
Different functions does text perform is it used to signpost convey information in bulk or alert users to something important in Design Systems elevation is used to provide hierarchy separation and give visual feedback this can be achieved through various styling techniques like.
Using colors Shadows transparency and overlays elevation can also be used to support animations and interactions like how button style changes when you hover over it indicating that it’s active and ready to be clicked elevation tip.
Be mindful of where and when you apply elevation or if you use it at all if you’re designing a mobile app it might not be the best choice to add hover states to objects since there isn’t a way for users to hover on a touchscreen device find an alternative to communicated interactive object bonus tip when adding Shadows avoid.
Using true black as it can make designs look muddy and dull instead use a darker value of a color from your color system to make it complement the rest of your design foreign system is a collection of icons used throughout a product or brand a well-designed icon system helps.
Reinforce a company’s visual identity it can also improve usability and create a consistent user experience icon systems can be in a variety of different styles some Styles you might know are line flat 3D and illustrative icon should be functional and recognizable.
To help users understand and interact with digital products to be effective people need to understand them at a glance that’s why many icons look similar or familiar it also means you don’t have to reinvent the wheel abstracting an icon can make it stand out but go too far and you risk losing.
Its meaning an icon isn’t very effective if people don’t understand what it means wondering if an icon is easy to understand try testing it with your customers alongside some Alternatives user research can also help with naming and documenting icons if we use a well-understood naming structure we can make sure icons are easy to find and use.
We can even include related Search terms to help guide people to the right icons consider what different people might call an icon or what they’d search for what keyword would you search for to find this icon one person might search I While others might search visible or show try it yourself think of Search terms.
Someone might use for each of these icons think beyond what the icon literally is what ideas or concepts are surrounding it what problems might a design system consumer be solving for to need this icon.
include these terms in your icon’s description to make it easier for people to use your system when building out your system make sure your icons are consistent in size this applies to the icon itself its container and any padding this makes it easier to keep icons.
Aligned to text baselines swap between icons when designing and maintain consistent interaction targets you may also need a variety of styles for icons at figma the icons for these tools appear both in the toolbar at 40 pixels and in the layers panel at 16 pixels.
Consider where icons will live to decide which sizes are necessary an icon grid is another helpful tool for creating consistency across icons it provides a blueprint for the icon’s dimensions alignment and padding let’s talk about grids next grids layouts and spacing are the Unseen scaffolding that provide structure and.
Rhythm to our designs the human eye is always on the lookout for patterns and discrepancies having incorrect or inconsistent architecture can impact the customer’s experience of our products by creating rules for these properties we can establish a spatial system this makes designs more consistent eases.
Decision making in teams and reduces errors we often need to design experiences that work across a range of devices and screen sizes to create the best experience our designs need to respond to a device’s dimensions in a way that people expect breakpoints are specific screen sizes.
Where the layout of a page changes for example you might have one layup or screens that are less than 768 pixels wide another layout for screens greater than 1280 pixels wide and one in between that’s 10 24 pixels wide many systems have even more we can help designers account for these breakpoints by providing layouts layouts.
Are a collection of predefined templates for various screen sizes they function like building blocks that make up a screen or page each region in a template acts as a container for elements with related or similar functions like this layout which includes a top app bar a sidebar and Main body section.
With breakpoints you need to Define fixed pixel values for when they apply a device can also change its size like when you shrink your browser window or when you rotate your phone with so many devices on the market it can be difficult to Define breakpoints that work for every device it can also be hard to maintain as new.
Devices become available to address this you can approach layouts in a way that’s responsive or fluid this allows you to account for all the spaces in between responsive fluid layouts like content grow shrink and Reflow as they respond to changes in the screen or Viewpoint size.
grid systems ensure elements have consistent size alignment and spacing the most common grid formats include column Baseline and modular grids let’s start with columns you can divide layouts into vertical columns then Place each element of your design in one or more of these columns.
This makes it easier to align elements and create a consistent look and feel for your designs you’ll often have a different number of columns for different device sizes a mobile device may use four columns while a larger desktop screen can use up to 12. the space around the edge is called the.
Margin and any space between the columns is the gutter columns in a fixed grid system won’t change their width based on the size of the viewport while flexible or stretch grids will grow and Shrink with the viewport a baseline grid consists of horizontal lines and rows at even intervals.
The great consistency and Rhythm and make sure your vertical spacing is consistent the eight point Baseline grid is one popular choice with an 8 point grade you position elements relative to the Baseline the vertical spacing between elements is always divisible by eight like eight 16.
24 32 and so on a baseline grid should also play a role in defining your type system text in your design should have a font size and line height that are divisible by 8 or by the size of your Baseline grade this improves Rhythm and consistent alignment when reading no matter the.
Length of text you can even extend an eight-point grid to be a modular grid with both columns and rows perhaps this is what you imagined when we said the word grid but why is eight the magic number those break points we mentioned earlier they’re all divisible by eight huh that’s weird or is it there are even.
More grid types we haven’t included but these are a great place to start remember these grids are guidelines you can always go outside the lines as long as it serves a purpose like being fun it’s hard to talk about grids without talking about spacing spacing helps establish hierarchy and relationships between objects when we talk about.
Spacing we’re referring to a group of properties that contribute to the negative space in and around an element this includes padding margins and any extra space between elements most spacing systems work off a baseline grid that includes additional spacer options using the base as a multiplier remember the eight point grade from.
Earlier what do you think is the base spacer in that system you guessed it it’s eight and any additional options may be a multiple of eight again like 16 or 32. spacers are usually captured in documentation for your system and don’t exist as physical objects or components.
You place in your layouts you can also document exceptions like when four point spacers might be appropriate conflicting or competing values create ambiguity they can make it hard for designers to make decisions and can obstruct the harmony of your designs.
It’ll be difficult to make an eight point Baseline unit for a spacing system work with the base font style of 15 with a line height of 20. that’s why it’s important to consider the other scales you’re using in your design system in these lessons we’re talking about the foundations as separate pieces when in.
Reality they’re all connected that’s the nature of systems the relationship between the elements is just as important as the elements themselves patterns are reusable solutions to common problems or user goals in your product for example creating new habits and connecting Health devices are common goals for habits users.
Having patterns for these common actions documented in our system can help designers create similar flows or extensions of these ones more consistently to identify patterns already in your product conduct a system-wide audit and document your findings what user flows and goals happen most.
Frequently to start establishing patterns first identify the most common user goals in your product and their current Solutions then find the high quality ones not sure if an idea is quality or not refer to analytics and data logs in your product ask yourself questions like how many.
People successfully complete the user flow you documented in your audit or where are they failing to progress don’t have data try conducting user research with your customers to get feedback instead then document the winning patterns thoroughly speaking of documentation that’s what we’ll cover in the next video.
We’ll learn all about how good documentation describes problems and solutions with clear do’s and don’ts along with recommendations
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Habitz design system Community file: https://bit.ly/3BVcql4 Video course: …
Figma Official Channel,design,define,your,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:design_systems, event:none, series:intro_to_design_systems, type:workflow_tutorial, level:intermediate, primary_feature:, secondary_feature:,