Udemy Course: Complete Web & Mobile Designer in 2023: UI/UX, Figma, + more by Andrei Neagoie & Daniel Schifano.

Episode 19: Design Systems

Introduction

I know that previously we had Episodes dedicated to learning about Components, Styles, and all those different types of features that Figma offers, but they play a much larger important role when we're thinking about design systems. So let's look briefly into what a design system is and why we use one.

What is a Design System?

A lot of people give different names to Design Systems.

For example; People like to call them UI toolkits. That's okay, that is what they kind of are.

A design system is more so involving your larger and broader team. Your development team is helping to make those changes and implement the systems that you've created.

The next thing I need to learn here is how to use a design system within Figma and why it's important.

Moving forward, the instructor separated our Design System into three(3) sections:

1. Foundation

The foundation houses all the styles that we are going to use throughout the application/product, including certain components.

For example: Colour, Grids + Spacing, Iconography and Typography.

Let's look deeply into what Foundation as a section holds by breaking it into sub-sections.

a. Colour

Take a look at the image above, which is a colour palette in our design system consisting of our Primary, Secondary, Accents, User Interface, Background and Text Colours.

These colours have been separated to make changes in our design easy.

For example, we can have a white colour with a hex code(#FFFFFF) across our User Interfaces Colours(like button) and still have another white with the same hex code(#FFFFFF) in our Background Colours, this makes it easy for us to easily target any edit we want to make on either the User Interface or Background Colour in other not to generalize the Colour.

b. Grids & Spacing

Looking at the image of the Grids & Spacing above; in our design system, we created different types of Grids & Spacing to fit different scenarios.

For example:

• Mobile Layout Grid,

• Mobile Baseline 4px Grid,

• Mobile Baseline 8px Grid,

• Mobile Layout + Baseline 4px Grid and

• Mobile Layout + Baseline 8px Grid.

  Note: Grid + Spacing varies based on the product, if it is responsive, then we can have a tablet version, a desktop version or even an extra large desktop version.

c. Iconography

Icons are very important, we created our icons in this course and we have also found different types of resources that give us a bunch of icons. We don't import all icons into our design system. We have taken only the icons we need for this application and broken them into two sizes. [i.e 24px Icons and 16px Icons].

d. Typography

Typography makes up a lot of our actual designs. And I don't think designers put enough thought and care into how they distinguish variations between typography and how they use it.

In this course, we took a close look into creating a nice type scale:

For Headings: It ranges from H1 to H6 (Although we may not use all of this presently, it opens doors for us easily when the need arises in the future.)

For Text (Body Copy): We have the Large, Regular, Small, an alternate Small just in case and a Hint Text.

For Interactions: We have Link, Strikethrough and Pill.

1. Components

Think of the component section as a section of atoms. And when you build up atoms, they create larger components.

For example: Avatars, Buttons, Cards, Checkboxes, Input, Navigation, etc.

Components are very important to every design system and one of the most important components that we create are buttons.

a. Buttons

In our design system, we have a base button version. This is a type of button that is built with a very simple outlook/style without including the brand colour or other properties relating to the product we are building, it is just a very minimally designed button but it stands as an atomic element to every other button components. A change in our base with affect the rest of the button components.

We have two types of this Base Button in our Design System; one is a grow base button while the other is a fixed-based button.

The grow base button expands as the text/content in the button expands while the fixed base button doesn't change despite the changes in its text/content.

b. Inputs

I talked about inputs under one of my episodes named "Forms + Input". But here, it is very important and deserves to be in our Design System.

c. Cards

Cards can be complex components that can be simple. So many different elements make up a card.

1. Recipes

The differences between these sections are;

Components will use the Foundation and Recipes are more complex components that use a bunch more components together.

For example:

• It may be a bunch of cards together.

• It may be a bunch of checkboxes. etc.

This is what we would call a recipe. And they also use things from the Foundation to bring this all together.

Here are a the list of things contained in recipes under our Design System.

a. Vertical Cards

b. Search

c. Order List

Note: Design System isn't necessarily just providing styles, but also providing so many different things like context, more deeper understanding of these styles when a developer wants to come in.

The journey gets better💪...

#Figma #ProductDesign #UIUXDesign #UIUX #UIUXCourse #Branding #BrandStrategy #UIElement #Design #Motion #MobileApp #DesignSystems #Udemy #UdemyCourses #ZTM #ZeroToMastery #DocumentingMyTechJourney #BuildingMySkillset #TechSkill #SkillSets #ProductDesigner #EngrShege #ES