Index
File creation
First, we are going to create the cover of the design system file, we need to create a file and put the cover on
File Pages
The pages that we need to create for the Design System File are:
- Cover
- Foundations
- Colors
- Typography
- Icons
- Images/Illustrations
- Components
- Buttons
- Navigation - Others
- Inputs - Tables
- Alerts
- Pages
- Website
- Application
Naming convention
Each type of component has its own name convention that would help us organize these components, and easily find them
One important rule in name conventions is that the use of slash / will create a subsection, for example, button/primary/default this means that we have let’s say a “folder” called the button, and inside that the types and inside each type the state
PS. If you use frames to organize your components you’ll be able to first search the frame and then the components inside that frame.
Foundations
- Colors:
The color we are going to use for our app, the way I create this name convention is:
One way to do it is Type/function-color-saturation
For example: Primary/success-green-70
Another way to do this is: Function/Color-name-status
For example: scantypes/delivery
In which cases use one or another?
You can use both on the same file
1️⃣ is for colors of the file, like primary, secondary
2️⃣ is for specific functions in the app like “scan types” that the user might need a color for each status and these color could be different than the brand colors
- Typography:
The fonts we’ll use in our app, the name convention is:
type-number-size For example: heading 1 (24) or Normal Text Medium (18)
- Icons
icon/name or icon/name/status
- Images/Illustrations:
The most common usage is for illustrations since the images are usually placeholder or may change in time
illustration/section/description or images/section/description
Components
- Buttons:
We have different types of buttons and states, so, we need to have this on mind at the moment of create a new component, size can be represented as sm(small), md(medium), lg(large)
type/size/status For example primary/sm/default
- Navigation - Others:
This one is going to depend on the type of component such as top-nav-bar, bottom-nav-bar, sidebar, or a home section with a group of buttons
type/function For example sidebar/dashboard
- Inputs - Tables:
The inputs are like buttons since they have the same different types and states.
input/type/size/state For example: input/text/sm/default
Tables are different because usually we create components that allow us to create custom tables Types of cells and states.
cellstyle/type/function/state
For example: cellstyle/header/checkbox/default
- Alerts:
This could be pop-ups, success, error, any feedback message.
alert/type/size/feedback For Example: alert/pop-up/sm/success
PS. The size is optional
Atomic Design
All this components are created based on the Brad Frost Atomic Design methodology this means that all the component should be create from the atoms, let’s say creating a button with icon, the icon is the first component, we should use an instance of that icon in our button, so, it’s easier to change things around, see example attached.
Pages - This ones should be “The source of truth”
- Website: All the web pages done ✅
- Application All the app pages done ✅
Type of components
Buttons
- Primary Button — Indicates one or more recommended actions on the screen. There is at least one primary button in a button group.
- Alternate Primary Button — Indicates alternate action. Usually appears on selection or hover where a primary CTA already exists.
- Secondary Button — Used for most secondary actions along with a primary button.
- Text Button — Low emphasis and lightweight button used for secondary/tertiary actions along with a primary button.
- Dropdown — Multiple selection of options
States for buttons
- Active — The active state can be used for the click or down press of a button and may often resemble the look of a pressed button.
- Disable — This state signifies that a button is not available for interaction.
- Enable or Default — This state is the normal state when it isn’t being interacted with but is available to be interacted with.
- Focus — Focus state is important for accessibility or while using the keyboard to interact with the screen.
- Hover — The hover state is only for devices where we use a mouse or trackpad to interact with the screen. This state shows that the mouse is on the button and is available to interact.
- Loading — The loading state is used when an action has been taken, and the system is working to process that.
Inputs
- Text Input — These are the text input for forms (Numbers and text) For example: Name, username, mail, number of something, age, etc.
- Date — For selecting dates or range of dates
States for inputs
- Active — The active state can be used for the click or down press of a button and may often resemble the look of a pressed button.
- Disable — This state signifies that a button is not available for interaction.
- Feedback — This state is giving feedback to the user like error, success, etc.
- Enable or Default — This state is the normal state when it isn’t being interacted with but is available to be interacted with.
- Focus — Focus state is important for accessibility or while using the keyboard to interact with the screen.
- Hover — The hover state is only for devices where we use a mouse or trackpad to interact with the screen. This state shows that the mouse is on the button and is available to interact.
- Loading — The loading state is used when an action has been taken, and the system is working to process that.
Tables - Cell style
- Text input — These are the text input for forms (Numbers and text) For example: Name, username, mail, number of something, age, etc.
- Text — Showing information could be text or numbers
- Icon — Functional icons like checkboxes in case the user have the ability to make changes in batches
- Label or status — Showing informative labels or status labels
- Dropdown — For selecting specific information
States for tables-cells
- Active — The active state can be used for the click or down press of a button and may often resemble the look of a pressed button, could be use for when a checkbox is checked.
- Enable or Default — This state is the normal state when it isn’t being interacted with but is available to be interacted with.
- Disable — This state signifies that a button is not available for interaction.
- Focus — Focus state is important for accessibility or while using the keyboard to interact with the screen.
- Hover — The hover state is only for devices where we use a mouse or trackpad to interact with the screen. This state shows that the mouse is on the button and is available to interact.
