Design Systems (feat. React)
Join us for an Awesome Workshop on:

Design Systems (feat. React)

RSVP to Attend Online

Live and in Full HD
OR

Join in Person

From Downtown Minneapolis, MN

You're Registered to Attend Online!

This Workshop's Online Chatroom is Currently Open!

You can watch video of this workshop!

Design Systems (feat. React)

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • You will be able to advocate for the value confidently a design system will bring to your product.
  • You will be able to evaluate the risks and benefits of various design system architectures.
  • You will be able to recommend the correct team structure needed to not only establish your design system but to keep it healthy for years to come.
  • You will understand how React.js can be used to break down a small application into smaller, connected components.
  • You will be able to break a design down into systems of components effectively.
  • You will use visual regression tests to help ensure that the visual integrity of your work remains intact.
  • You will come away with in-depth knowledge of some of the tools and frameworks used to create modern design systems.

Your (Awesome) Instructor

Micah Godbolt

Micah Godbolt

Senior Design Developer at Microsoft and author of "Front-end Architecture"

Colloborate efficiently and ship application designs quickly with modular approach

Workshop Details

Design Systems empower designers and developers to collaborate more efficiently and build applications more quickly. Learning how to look at a design, and break it down into a system, is just as important as the tools and workflow needed to enable the system’s success.

In this workshop we will break down of a small React.js Todo application into a published pattern library of reusable, testable, documented components. Along the way we will learn about how design systems are built, how the code and teams are organized, and how you can take your own design system from a grassroots project to a market shifting force.

Daily Schedule

We've already held over 150 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

  • 9:30AM
    What is a Design System?
  • 10:00AM
    Benefits of a Design System
  • 10:30AM
    Taking an inventory of our project
  • 11:00AM
    Variations of a Design System
  • 11:30AM
    Writing a “dumb” React component
  • 12:00PM
    Lunch
  • 1:00PM
    Code Organization of a Design System
  • 2:00PM
    Writing a “smart” React component
  • 3:00PM
    Code Structure of a Design System
  • 3:30PM
    Writing an iterating React Component
  • 4:00PM
    Design System Staffing
  • 4:30PM
    Writing documentation and tests
  • 5:00PM
    Design System Intermediaries
Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

This workshop has a few opportunities to write code, but everyone from developer to a designer to project manager will benefit from watching the creation of a small decoupled, documented, testable design system along with discussions around how to establish, build and nurture your design system and design system team.

Any Prerequisites?

  • We will be writing a bit of JavaScript during this course, but solutions will be provided for all exercises, and I don’t expect any expert level knowledge
  • This workshop will be a completely node based project, so having node installed and working, as well as basic command line knowledge to run scripts and move around directories, will be expected.
  • The code exercise portion of this workshop will be relatively short, so if you choose not to participate, you will still benefit greatly from listening and joining in the discussion.

Event Details

What

One Full Day Workshop Session

Replay Videos (available immediately)

When

Where

Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN