Agile Workshop Outline (Colors, Typography, CTA Buttons, Icons, Images, Components, Input & Form, Stroke & Effects, Interaction & Behavior, Error & System Status, Spacing Guide, File/Layer Naming Format)

Notetaker?

Step 1: What is a design system? - 5 min

1. Popular design systems
2. What is a design system?
3. How does a design system differ from a ui kit/ style guide?
4. Design system designer (job) and how it relates to engineering.

Step 2: Design System Overview - 5 min

1. Brand colors, typography, CTA buttons, icons, images, components, input & form, stroke & effects, interaction & behavior, error & system status, spacing guide file/layer naming format
2. Colors and shades should not use transparency to achieve an effect as it can lead to visual issues down the line
3. Colors and shades use a 100 / 200 / 300 / etc. scale for flexibility
4. Spacing guide: 8pt or 4pt?
5. Screen org: “Number. Page Title - Page Screen” (eg. “4. Report - File a Report” or “4a. Report - File a Report - Confirmation”)
6. Make sure elements are linked to the frame you’re working on. And try to organize the layers from “top to bottom” of the screen.

Step 3: Review our existing designs activity (lo-fi) - 15 min

1. Label all the different types of assets such as (text field, icons, buttons, banner, pop-up, etc)