Design Token and UI Component Architecture
- Your instructor
- Nathan Curtis
- Tickets
- Get a ticket ↓
Workshop includes:
- 🔖 Examples to take away
- 🗣 Interactive sessions
- 📺 Workshop recordings
- 🎤 Dedicated Q&A time
- 🏅 Smashing Certificate
Workshop, 4×1.5h + Q&A • Thu & Fri, June 6–14 2024
09:00 – 11:00 AM PT • 18:00 – 20:00 CET • Check your time zone ⏰
Design systems are expanding in organizations, spreading design and code tools and influencing decision-making across product teams. With such scale, you must establish and share an architecture of style and UI components across design and code that endures and evolves over time.
This workshop exposes you to essential foundations of design system architecture — the kinds of naming, composition, configuration and process challenges involved — to equip you with techniques and activities to make, spread, and maintain a system yourself.
Here’s What You Should Be Expecting:
Interactive live sessions
4 × 2h live sessions
Practical insights
From visual style to the technical practices
Hands-on exercises
With reviews by your teacher
Life-time access
To all video recordings and examples
Dedicated Q&A time
To ask all your questions
Smashing Certificate
A well-deserved reward for your work
A design system brings designers, developers, and products together. It is a platform to identify, decide on, and enable what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
Over the course of four days, we’ll cover the foundations of visual style and UI component design using collaborative practices that get designers and developers to make a robust, high-quality system together.
$300 .00 $400.00
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.
In This Workshop, You’ll Learn:
Sessions will engage participants in hands-on activities, spark new ideas, and moderate challenging conversations so your team can:
- Dig into style like color, typography, space, shape and size,
- Encode visual style in generic, purposeful and component-specific design tokens,
- Compose and arrange elements within a component — from atomic elements to sophisticated patterns,
- Configure and organize component properties,
- Map out and maintain nested component dependencies,
- Deliver high quality, thoroughly tested features that adopters trust,
- Establish a workflow that combines design, code, and documentation
Why You Should Attend
All too often, organizations have multiple products that are disjointed and inconsistent. Multiple design teams and development teams do redundant work that results in a disjointed customer journey that’s expensive or impossible to align and evolve together.
With a design system, your teams can use shared design, code, and documentation tools to align their work. Design systems save organizations time and money and foster positive energy among those who value efficiency and reuse.
With a design system as a backdrop, you will see designers, developers, and product teams align and bridge gaps. All of that leads to the ultimate goal: efficiently delivering a cohesive, high-quality experience for your customers.
Nathan has contributed to or consulted with over 60 design systems over his career, including leading teams through major releases at Morningstar, Verizon, Capital One, Target, Fidelity, Marriott and many more. He’ll combine deep knowledge with a nuanced understanding of how systems work in companies of varying scale, business types, and organization models.
Who Should Attend
Designers, front-end developers, product managers, content strategists, their leadership, and anyone interested in learning how to inject design systems into their broader organization. Content will evoke both design and code considerations, at times together, to bridge disciplines to share visual style, UI components, and documentation.
What Hardware/Software Do You Need?
To get the most out of the workshop, you’ll need access to Zoom (for audio, video and screensharing), Figjam (for hands-on activities), and Slack (using a SmashingConf private channel for workshop communications). You will not use design tools (such as in Figma or Sketch) or code in a code editor. Instead, activities will be collaborative in a team or full classroom setting using Figjam.
About Nathan
Nathan co-founded EightShapes with Dan Brown in 2006. He’s passionate about information architecture, UX, front-end dev, and leads design systems consulting at EightShapes. He wrote Modular Web Design in 2009, blogs frequently on Medium.com today, and speaks regularly at events worldwide.
Time & Schedule
This workshop is split over four days. Our virtual doors open at 8:45, we start at 9 AM PT.
The workshop sessions will run on the following days:
- Thu, June 6, 09:00 – 11:00 AM PT (18:00 – 20:00 CET)
- Fri, June 7, 09:00 – 11:00 AM PT (18:00 – 20:00 CET)
- Thu, June 13, 09:00 – 11:00 AM PT (18:00 – 20:00 CET)
- Fri, June 14, 09:00 – 11:00 AM PT (18:00 – 20:00 CET)
$300 .00 $400.00
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.
Day 1
8:45 am PT
Virtual doors open, registration, chat and introductions.
9:00 am – 9:50 am
Introductions, visual style, color, and design tokens
9:50 am – 10:00 am
Break
10:00 am – 11:50 am
Semantic tokens for backgrounds, text, and other purposes
10:50 am – 11:00 am
Q&A with Nathan on the day’s material. Networking!
Day 2
8:45 am PT
Virtual doors open, registration, chat and introductions.
9:00 am – 9:50 am
UI component anatomy, dependencies and within-component layout
9:50 am – 10:00 am
Break
10:00 am – 11:50 am
UI component composition and subcomponents
10:50 am – 11:00 am
Q&A with Nathan on the day’s material. Networking!
Day 3
8:45 am PT
Virtual doors open, registration, chat and introductions.
9:00 am – 9:50 am
UI component properties and configuration
9:50 am – 10:00 am
Break
10:00 am – 11:50 am
Component tokens, Figma modes and theming
10:50 am – 11:00 am
Q&A with Nathan on the day’s material. Networking!
Day 4
8:45 am PT
Virtual doors open, registration, chat and introductions.
9:00 am – 9:50 am
Putting it together: a step-by-step UI component workflow
9:50 am – 10:00 am
Break
10:00 am – 11:50 am
Component specifications and other topics identified by participants
10:50 am – 11:00 am
Q&A with Nathan on the day’s material. Networking!
$300 .00 $400.00
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.