€549^.00 Excl. 21% VAT Register for this workshop → Get a single workshop, or bundle with a conference.

Achieving this takes craft, workflow and deliberate attention to detail. A robust and thoughtful component “shape” — naming, anatomy, props, layout, slots, and styling — is essential to align design and code assets that system users leverage to make experiences. Teams agree on this shape through “specs”, whether visualized in design tools or delivered as data to align implementations.

Why You Should Attend

Designers often feel out of sync or left behind when developers build and customize UI components with code. This workshop doesn’t stop at “How do Figma component props work?” Instead, it goes further to explore best patterns and practices for a diverse range of components, and how each aligns with code.

Developers too can be challenged to balance adding configurable props and composable slots into UI components. This workshop presents scenarios to develop both, offers thresholds that tilt one way (configurable) or the other (composable), and reveals examples that blend both together.

Both designers and developers are adapting work with AI tools, both to make great UI components as well as leverage component libraries when making product experiences. This workshop will demonstrate AI techniques to audit design and code, describe components in succinct data structures, and assure the quality of components you build.

Who Is This For?

This workshop is ideal for beginner/intermediate designers and developers that have begun to deliver UI components in their work. In particular, those who are joining or contributing to design systems and are making components for more than just their own team.

Senior designers and developers can use this workshop to reinforce and challenge what you know and identify how to improve your team’s tools, practices and standards.

What hardware/software do you need?

To get the most out of the workshop, you’ll need access to:

• Figjam for hands-on activities (most of the workshop’s activities)
• Google drive to obtain materials used in activities.
• AI chat interface such as ChatGPT, Claude or Cursor.

About Nathan

Founder and design systems consultant at Directed Edges. He’s passionate about information architecture, UX, front-end dev and design systems. He wrote Modular Web Design in 2009, blogs frequently on Medium.com today, and speaks regularly at events worldwide.

Time & Location

This full-day workshop will take place the day after SmashingConf. The workshop will be running from 9:30 AM to 5:00 PM on Thursday, April 16.

Schedule for Thursday, April 16

9:00 AM – Doors open, Registration
9:30 AM – Introduction & Kick-off
11:00 AM – Coffee Break
1:00 PM – Lunch
2:00 PM – Afternoon Session
3:30 PM – Coffee Break
5:00 PM – The End

Save 100 EUR when signing up for the conference and a workshop!