My Dear Friends of Figma in Welcome back in this lesson we’ll join Kai and the habits team as they build their design system we’ll focus on some Core Design system features in figma Styles and components as well as some tips for defining and organizing your system we’ll explore the different types of styles you can create components variants and other component.
Properties and establish consistent naming conventions across the system before we get too far ahead let’s define what figma means by Styles components and libraries Styles allow us to define a collection of properties or settings we want to reuse we can use styles to capture.
Specific color values for fills and strokes Define text properties like font line height and letter spacing make presets for shadow and blur effects and create reusable Scaffolding in the form of rows columns and layout grades you may have heard about tokens or seen them in another design system figma is working on features to support tokens.
Which we’ll explore in a future video components are the building blocks of our design system in a design system they’re the elements structures and patterns we want to reuse in our designs they can be individual elements like icons or buttons or a collection of elements like menus and layouts there are two aspects to a component.
A main component that defines the properties of the component and an instance or copy of the component which you can reuse in any of your designs which receive any updates made to the component libraries are collections of styles and components shared within a team or organization they establish consistency.
Streamline workflows and keep elements up to date across designs select the Styles and components you want to share publish them as a library to your team or organization access libraries to use Styles and components in your files review updates and apply them across the file there are lots of different ways to set.
Up a library in figma each published library is linked to a file but a library could use Styles and components from another Library you could keep everything in one file as a single source of Truth Or Break It into individual files to better suit your team or organization’s needs here are some things to consider when.
Deciding on an approach does your product design team share colors and assets with your brand Team does your company have multiple themes separate products or a collection of brands are there resources that you want to share or don’t want to share between brands or products do you have separate design and Engineering teams for desktop.
And mobile development do your design system users need access to every style and component the habits team are a small company with a single product they’re still exploring the value a design system could bring to their product design team it may take some time for the rest of the company to get on board for now Kai.
And the team will create a single file for their style and component Library as their design system matures they may need to consider breaking up their components between files for example a separate file for their foundational Styles a dedicated icon Library separate component libraries for web and mobile and perhaps some functional components.
Like a wireframe library or sticker set the approach that works for you may be different to what works for Kai in the habits team check out our best practices guide for more information and guidance Kai sets up a Design Systems project within their design team and creates a new design file they want to use pages to organize the different aspects of the.
System they set up a welcome page to introduce the system as well as Pages for foundations components and patterns back in the audit file the team made earlier the habits team have organized their design elements into groups they’ve identified a variety of elements that exist across their designs a range of colors a number of fonts and text.
Sizes and a bunch of icons Beyond those foundational elements there are some other consistent patterns across designs as well as some obvious discrepancies when it comes to Turning these into components the team are a little overwhelmed and don’t know where to start Kai suggests they use the principles of atomic design to rebuild.
Their components from scratch Atomic design popularized by Brad Frost takes cues from the structure of chemical compounds atoms molecules and organisms and uses this analogy to describe a modular approach to building components atoms are the basic building blocks of matter in a design system they represent elements that can’t be broken.
Down any further without losing its function like an icon input field or button molecules are groups of two or more atoms that are bonded together in a design system there are collection of individual elements that together form a single unit like a search bar made up of an icon input field and button organisms are complex structures made up of.
Molecules and atoms like a navigation menu that includes a search bar along with a logo and other menu items the habits team take a look at some of their more complex elements check to see if there are parts of that element that are reused elsewhere and identify the basic building blocks of each there are some components in the habits app that have.
Stricter applications the team have decided to capture these as patterns separate from their more Atomic and molecular components this makes it clear to people using the system that these components should be implemented in the specific way they’ve been created in this header element we have an avatar the brand wordmark and a notifications.
Icon each of these elements are Atomic components that can function alone or be combined with other atoms and molecules to create new designs but the header must always consist of these elements in this specific order so we treat this component as a pattern even if you don’t call them Atomic components a modular.
Approach that has that flexibility is worth considering to learn more about Atomic design check out the resources we’ve linked the team have identified Universal attributes of their designs like color and typography they’ve also grouped elements from their audit into components and patterns before they.
Start building out these components they need to align on an approach for naming them Kai reached out to the engineering team to align on a common naming convention to make it moving from design to code easier for everyone the engineering team already uses camo case for their elements in code so Kai decides to also use this approach for.
Layer names components and component props but you might prefer another approach for your design system like snake case title case or all caps or maybe you’ll separate words with dashes or dots whatever you choose having the same name for an element in design and code is more important than the way you write it with a clear path forward the.
Habits team divides the work between them and gets started building out the system in the previous lesson we talked about spacing and how it contributes to the architecture of our designs the habits team uses a modified version of an eight-point grid system which allows for some limited flexibility around four and.
Six points as they work on mobile experiences there are a few figma features they can use to keep things in line but for the most part spacing will be communicated to design system users through their documentation we’ll follow Kai as they document these decisions in their next video.
To help enforce the grid system Kai can Define layout grade Styles layout grids can be made up of rows columns or uniform grid like the eight point grid Kai starts by creating a frame and naming it default Grid in the right sidebar they click the plus icon next to the layout grid then click the grid icon to adjust the properties update the size.
To 8 and leave the default red color now they’ll make it into a style click the style icon in the layout grid section then the plus icon Kai names at eight point grade adds a description and clicks create Style another inconsistency in their existing designs were icon designs and sizes a modular layout grade a combination of.
Two or more grids would help designers create standard dimensions and padding for icons in figma you can apply multiple layout grids to a frame and Define them as a single style Kai wants all of their icons to live in a 24 by 24 frame with consistent padding between the icon and its parent frame they create a 24 by 24 frame add a layout.
Grade and change the type to column set the count to 1. gutter to zero and the margin to 3. they hover over the Grid in the right side bar and press command D to duplicate it then switch the type to row finally they create a new layout grid style and naming icon grid they also want to make use of Auto.
Layout a property you can add to frames with auto layout you can Define the space between layers in a frame as well as any vertical and horizontal padding this allows you to maintain consistent spacing and layout as the frames content changes the habits team can keep elements aligned to the 8-point grade by making sure each Auto layout property is.
A multiple of 8. foreign to make it easier to quickly update the distance between layers Kai updates their big nudge settings to eight point nudge values are set per person so Kai makes a note to add this as a suggestion for other designers you can see colors in every aspect of.
The habit’s designs there are different Hues tints and tones that represent the Brand’s primary colors without a limited palette of colors it would be easy for the team to end up with an infinite number of colors or inconsistent values between designs the habits team can use styles to not only Define their colors but to make it easier to apply and.
Update colors across the design system they’ve already collected their different colors used in their designs the next step is to create color styles for all of the colors they’ve collected before they do that they need to define a system for naming and organizing the color styles there are a few different approaches you could take if you had.
Multiple brands or themes you could organize your colors that way you could organize Colors by type like by primary and secondary functions or by application like text buttons and alerts or you could arrange Colors by Hue if your engineering team already has an established color palette you can align with that to avoid duplicating your.
Efforts Kai wants to make it easy for designers to find the right Styles so they’ll start with some basic functional groups with a goal of partnering with the engineering team and moving towards a semantic token system in the future with a functional approach in mind four distinct groups emerge the primary brand.
Colors with a variety of tints and tones a range of neutral tones for less important elements and actions a selection of colors for dividing user habits and some colors for specific functions in the app like destructive actions and alerts the habits team can use the slash naming convention in figma to organize the.
Styles into groups for every slash they add to the Style’s name figma creates another folder or level of organization Kai creates styles for the two functional colors to name the Styles they add its function followed by a slash than a value they use the description to guide designers towards any specific use cases but.
They’ll also need to build out some documentation that explains this approach to naming thank you typography is an important aspect of the habits app you can see typography and core elements and experiences like habits app cards and even the calendar Kai can use textiles and figma to define.
Properties like font family wait and size as well as line height and letter spacing they need to define a semantic type system that captures how the text is used in the app and is easy to understand and apply during the audit Kai identified two typefaces or font families space grotesque a futuristic monospace font which they use for larger.
Text sizes like headings and titles and DM Sands a lighter sans-serif typeface which they use for smaller text sizes like descriptions and the calendar layout between these two typefaces they identified 12 unique combinations of color size weight line height and letter spacing in figma a text layer’s color is defined by a color style not a text.
Style so Kai consolidates any text differentiated by color alone there’s also typography for specific applications which they can document as exceptions instead of including them as distinct Styles like this third typeface smooch Sans which is used more like a visual element than a textile during the ad habit flow or these text layers in.
Different weights now they have seven distinct combinations of text properties with font sizes that Loosely follow the major second scale and fit within an 8-point grade from these Styles they can identify two main use cases four title styles for core elements and wave binding like page headings and card titles.
And three body styles for page contents or long-form texts like descriptions calendar days and dates they could categorize them further by use case but they’d end up with multiple styles that share the same properties instead they decide to organize them further by size both title and body styles have a base size of 16 points as well as medium and.
Large styles with an extra large title Style they update the tech samples to better reflect their size then create a textile for each one they use the slash naming convention to create separate groups by use case title and body and size.
In our previous lesson we spoke about how elevation can establish hierarchy create separation and communicate interaction the habits team has embraced a flat minimalist approach across most of their designs but there are a few elements that stand out from the rest buttons cards and the main navigation menu they all share a bold neo-brutalist.
Style with a thick black border and a solid offset Shadow while you can interact with other elements in the app this dialing draws attention to the core focus of the app creating and managing habits at the moment the elements all have the same properties so technically Chi only needs one entry for elevation in the.
Design system but Kai and the team have been considering other ways to use elevation they were inspired by responsive or dynamic elevation and the material design system changing an element’s elevation when you interact with it Kai thinks an extra chunky Shadow for focused elements would help low vision habit trackers they decide to.
Define three levels of elevation four to match the value of the current Shadow and two extra values consistent with their spacing system 6 and 8. by aligning on these values and defining these Styles now the team has approved resources whenever they’re ready to explore those ideas they create a square frame bound the.
Corners and add a fill they add a text layer to label the Shadows they create two more frames and update the labels accordingly then select all the frames apply Auto layout and adjust the padding and space between them in the right sidebar Kai adds an effect and edits the setting of the default drop shadow to get that.
Neo-brutalist style they set the blur to zero and the shadow opacity to 100 they repeat the process for the remaining two levels looking good now Kai can create effect styles for these properties they select the first frame and click the style icon in the effects section then the plus.
Icon to create a new style they name it elevation 4 and add a description then repeat the process for the six and eight level Shadows if we view the file’s local Styles all three shadows are grouped in an elevation folder nice the habits team uses icons and illustration to support the personality.
Of their brand a bold Neo brutalist Style with some Whimsical elements they’ve also aligned on supporting three different icon sizes 16 24 and 32 they start by building the middle icon size they placed each icon in a 24×24 frame aligned to the icon grid they created earlier this makes your icons are centered aligned and consistent in size.
When swapping between icons they did the same thing for icons with dimensions of 16 and 32. with every icon in their collection selected they select create multiple components from the toolbar and turn each icon into a component Kai check with the habits engineering team to make sure icon names are consistent with code as well as searchable by.
Anyone using the design system they aligned on a naming structure of Icon slash size slash name and applied that to all icons this makes sure icons are grouped in the assets panel first by icon then by size because the icons are now components they can add descriptions to communicate their intended use they can also include.
Extra Search terms to make the icons easier to find habits uses illustration to reinforce their brand and add that touch of Whimsy to the product like icons illustrations benefit from consistent frame sizes and thoughtful naming and descriptions the habits team uses illustrations in two ways as large hero images during.
Onboarding screens and as smaller illustrations for the action presentation cards these smaller illustrations also have an optional accent color Kai wants to create two separate component sets one for each use case this will make it easier for designers to find the right illustration for their context.
They start by giving each illustration a name that captures both its use case and type with the hero illustration selected they choose create components from the toolbar in the right sidebar they update the default property in the properties section property 1 to rename it type for.
The action presentation card illustrations Kai wants to add another attribute to each name to account for the accent color Kai selects the action presentation card illustrations with the accent color and uses bulk rename to add slash true to the end of the current name then uses slash false for the.
Illustrations without the accent color with all the illustrations selected they click create component set because of the extra attribute the action presentation card component set has two properties with correct values for each variant they update the property names to type and has color respectively to make the illustrations easy to find they.
Decide to add illustration to the beginning of each component set’s name now that Kai has the foundations of the design system captured it’s time to put these Concepts together one core flow of the habits app is creating a new habit as part of this process users select which days they want to include in their habit schedule Kai wants to create a.
Pattern for this schedule but to make a pattern they need a component that is the toggle for an individual day the component needs two different states a deselected state and a selected State Kai uses this existing element of the selected State and turns it into a component renames it day toggle adds a variant from the toolbar which also.
Creates a new variant property which they’ll set to false for the new variant then they rename the property to is selected style the false variant by removing the stroke property of the new component and changing the color to primary slash one and then set that property to true for the original selected variant habits.
Also allows people to track a habit multiple times a day how would you make a variant that shows the Habit frequency check out the file to see what the habits team made the habits team will need to use this component for every day of the week I could create a variant for each day but to better support multiple languages they create a text component.
Property instead this allows designers to update the text to match the day they select the text layer and in the content section create a text component property and name it date character lastly Kai wants the deselected variant to be the default component in this set in bigma the default variant is the component in the top left corner they swap the.
Variants to suit in addition to call to action buttons habits has interactive cards made up of three elements an editable tax layer an illustration and an icon because the cards are interactive they need four states default hover focused and pressed Kai starts by building the default state with the three elements we mentioned.
Earlier foreign properties for the aspects of the component that designers will be able to adjust first Kai needs to Define how the card illustration can be swapped for another illustration with the illustration selected they create an instant swap property they name it.
Illustration and click create property next Kai wants to make it so people can update the contents of the text layer they select the text layer and in the content section click the create property button then name it text and make sure the default value is ADD finally Kai wants designers to be able to change the component’s default icon.
To another icon they can do this using an instant swap property they select the icon and click create component property in the right side bar they select create property and name the property icon now that Kai has component properties for the default State they can set up variants for the remaining States Kai selects the default.
Component and adds a new variant from the right sidebar they rename the variant hover and the component property to State the only difference between the hover and default States is the color so all kind needs to do is Click primary 1 in the right sidebar and change the color to primary 5. all done the focus state has a more prominent stroke.
Compared to the default to create the focus State they select the component set and add a new variant they rename it to focused and increase the stroke weight to four finally Kai creates a new variant for the Press State they name it pressed update the fill color to primary 20 and remove the elevation style Kai and the team continue to build out more.
Components for their system to see all the components they’ve created check out the components page in the habits file with their flexible components created Kai now has to build out some of the fixed patterns in the design system a core part of the habits app is letting people set a schedule every time they create or edit a habit given its.
Importance in the app Kai wants to create a fixed pattern so it’s always created in the same way Kai decides to build the weekly schedule using the existing day toggle component from the assets panel Pi finds the day toggle component and drags it onto the canvas to create an instance to make it easier to add new toggles High ads and auto.
Layout frame around the toggle they press enter to select the child layer in this case the toggle then use the command or control D shortcut to create seven toggles in total they update the padding on all sides to zero and the space between to 10 in the component section of the right side bar Kai can see the component properties they set up.
Earlier they update the day character property to the correct day and change each toggle to match then click create component in the toolbar then name the new component day selector the order of day should always be chronological but they can be arranged to accommodate Regional differences for the first day of the.
Week like Saturday Sunday or Monday Kai wants to communicate this to anyone who uses the component in the right sidebar they click the edit icon and add this information to the description Kai continues by defining another pattern this one is a core navigational element in habits a floating menu bar where users can create new habits and.
Move between different pages of the app the navigation element has a fixed layout with no customizable properties it changes state depending on which page the user is on in the app Kai uses variants to represent each date an alternative approach might be to create Boolean properties for the pattern however this could allow for a state.
Where both indicators are active variants are a way to ensure that only one state is selected at a time if you want to see exactly how this component was set up grab a copy of the habits design system file and check it out foreign order out of chaos they turned a jumble of different elements and Designs into a.
Comprehensive library of components they’ve created patterns for the system’s more structured components they Define styles for color typography elevation and layout grids they curated a collection of brand-friendly icons and illustrations and they were intentional about what designs to include in the design system and what to leave out.
Before the habits team makes the design system available to the whole company they want to set everyone up for Success the team wants to make sure everything is documented so that other people know how to use the system they also want to create a process for updating and maintaining the system over time lastly Kai wants to get feedback from Key.
Stakeholders across the company like Brandon engineering teams to make sure the system fits in with other teams practices and resources in the next video we’ll check back in on Kai in the habits team as they document their design system support people who want to use it and decide how to maintain it over time I’ll see you in the next next.
One
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,build,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:,