Spectacular Component Structure and Styling with Design Tokens
- Your instructor
- Nathan Curtis
- Tickets
- Get a ticket ↓
-
- 🍵 Tea, coffee, snacks, and drinks available all day
- 🥪 Delicious lunch included
Workshop includes:
Full-day workshop • Monday, June 23, 2025.
Developing UI components and design token taxonomy is expanding beyond just design system teams to everyone. Design and code tools are improving quickly, and a broadening community is making and sharing reusable components. With such scale, you must establish, share and grow well-architected UI components and tokens to style them across design and code.
This workshop exposes you to essential foundations of UI component architecture — the kinds of names, purposes, structures, and styling choices leveraging design tokens — to equip you with techniques and activities to make, spread, and maintain spectacular components yourself.
Here’s What You Should Be Expecting:
-
Inspiring & Inclusive
A full day of teaching in a friendly, inclusive group
-
Interactive & Practical
Plenty of time for practice & feedback
-
Hands-on exercises
Working solo, with a small group, and as a class with Nathan
-
Cooperate
Learn from your teacher and other attendees
-
Dedicated Q&A time
To ask all your questions
-
Digital Smashing Certificate
A well-deserved reward for your work
$599.00
🎪 Save up to 25% on this workshop with a Smashing Membership.
This brings designers, developers, and products together. As more people make more shared components, each must be equipped with skills and knowledge to identify, architect, decide on, and enable what to share, whether a visual style or a component with a general or narrow purpose.
You’ll leave the workshop with a toolbox of practical techniques and design patterns to apply for your projects right away.
Note that this workshop does not explore every facet of spectacular component architecture. In particular, a separate workshop — Spectacular Component Props and Slots — digs into component API design of properties, options, and how to approach custom composition within and across components.
This workshop will Cover
Component definition and planning
- How to decide whether to include a component in a library
- How to discover, plan and scope a component
- How to define and format a component name effectively
- How and how much to align naming across design and code tools
- How to describe component purpose and usage succinctly
- How to distinguish responsibilities and purposes across components
Component anatomy and styling
- How to architect what parts make up a component
- When to use platform primitives and nested components for elements
- When to style components with raw values, styles or design tokens
- How to align structure and styling across design tools and code
- How to model the “simple” anatomy of Button, Icon, and Badge
- How to model the “complicated” anatomy of Text Input and Alert
- How to model the “composable” anatomy of Card and Modal
- How to communicate anatomy with diagrams, tools, and as data
Design token taxonomy
- How to set up design system foundations of visual and content style
- What design tokens are and why and how they impact teams
- How to organize generic colors, typography, space and more
- How to create semantic tokens for text, surfaces, forms, alert and actions
- How to organize tokens composites for typography and shadows
- How to theme using tokens beyond just “multi-brand theming”
- How to use tokens for dark mode, density, and responsiveness
- When and when not to apply component-specific tokens
Design token planning and releases
- How to run a project to make a token taxonomy
- How to audit existing experiences for tokens and other design decisions
- How to bridge designs to proposed tokens, with spreadsheets!
- How to demo design token translations across platforms
- How to engage teammates and stakeholders to give feedback
- How to document design tokens for design system users
- How to document design tokens for design system developers
Who is this workshop for?
Architecting UI components and design tokens is a multidisciplinary pursuit. Therefore, the workshop is aimed at designers, front end engineers, product owners, managers, and leaders setting up or optimizing how to operate a design system and build sharable components at scale.
The workshop assumes participants are familiar with user interface design fundamentals and digs in further into details. Content evokes design and code considerations, usually in concert, to bridge disciplines to share the responsibility for scalable 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 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 Curtis
Nathan consults with teams and facilitates workshops to provide his design system expertise to the worldwide community.
Over the past 20 years, Nathan has consulted with over 100 design system teams, leading many of them for periods and coaching designers and developers along the way. He has robust experience in architecting components and design tokens, forming and operating design system teams, and realizing a design system strategy in large enterprises.
Nathan writes a well-known design systems blog on Medium, penning some of the most often-referenced blog posts such as Naming Tokens in Design Systems (2020), “Central and Federated” Team Models (2015), and framing systems as a “Product, Serving Products” (2016). Nathan also wrote Modular Web Design in 2009, maintains the popular Specs Figma plugin, and lives in Fairfax, VA in the US.
$599.00
🎪 Save up to 25% on this workshop with a Smashing Membership.
Location
Microsoft Conference Center is right in the heart of Times Square. Close to transportation and endless food and entertainment options, this technology hub is located at 11 Times Square (with the entrance on 8th Ave).
Time & Location
The workshop will be running from 8:30 AM to 4:45 PM on Monday, June 23.
Schedule for Monday, June 23
8:30 AM – Doors open, Registration
9:00 AM – Introduction & Kick-off
10:30 AM – Coffee Break
12:00 PM – Lunch
1:00 PM – Afternoon Session
2:45 PM – Coffee Break
4:45 PM – The End
Save 200 USD when signing up for two workshops!
$599.00
🎪 Save up to 25% on this workshop with a Smashing Membership.