Sharpen your design and development skills with our in-depth recorded workshops.

Watch Brian Alfaro lead a design workshop for our v1 rollout of the new WPDS. (Recorded
March 16th, 2022).
 

<YoutubeEmbed videoid="cODayPp8b_U" />
 

**Chapters:**

 

[**0:00**](https://www.youtube.com/watch?v=cODayPp8b_U&t=0s) - Agenda & intro

 

[**3:16**](https://www.youtube.com/watch?v=cODayPp8b_U&t=196s) - Our new tokens

 

[**5:49**](https://www.youtube.com/watch?v=cODayPp8b_U&t=349s) - Color tokens

 

[**7:26**](https://www.youtube.com/watch?v=cODayPp8b_U&t=446s) - Numeric tokens

 

[**12:47**](https://www.youtube.com/watch?v=cODayPp8b_U&t=767s) - Context (light and dark)

 

[**17:24**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1044s) - Color intention (theming)

 

[**21:26**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1286s) - Figma plugin (Token
tools)

 

[**25:09**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1509s) - Component API

 

[**27:47**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1667s) - Zeplin code/style guide

 

[**30:30**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1830s) - Zeplin extension

 

[**31:59**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1919s) - Navigation our doc site

Watch Brian Alfaro lead a design workshop for our rollout of the new WPDS.

To the right of the image, a woman sits at a desk looking down at her computer. Around her head are bubbles depicting a quote, a video, a website, and a message. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 1 - WPDS for Designers'. 'WP Design System' appears on the lower left.

WPDS v1 - Design Workshop

{" "}

## What we learned

Hey there! We just had our design workshop number 2 and it was great joy to share with you all of the new things we have been working on. Here is what you missed:

- Answering some frequently asked questions since we released.
- Learning about our new component api.
- Deep diving on our button component
- Our new css framework
- Slots (new figma pattern for components)

 

---

## The workshop video

<YoutubeEmbed videoid="e_jzDfTdjow" />

Continuing our deep dive in our new design system.

To the right of the image, a woman sits at a desk looking down at her computer. Around her head are bubbles depicting a quote, a video, a website, and a message. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 2 - WPDS for Designers'. 'WP Design System' appears on the lower left.

WPDS v1 - Design Workshop 2

Watch Arturo Silva lead a developer workshop for our v1 rollout of the new WPDS.
(Recorded March 17th, 2022).
 

<YoutubeEmbed videoid="CN-vbXz0asI" />

Watch Arturo Silva lead a developer workshop for our v1 rollout of the new WPDS.

To the right of the image, a man stands holding a text box with both hands. In front of him a large website floats in front of him. He appears to be inserting the text box into the upper left of the website. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 1 - WPDS for Developers'. 'WP Design System' appears on the lower left.

WPDS v1 - Developer Workshop

## What's happening

Watch Arturo Silva lead our second developer workshop for our v1 rollout of the new
WPDS. Same topics as the first one, but with a different approach. (Recorded April
7th, 2022).

 

## Topics discussed

- Box component
- Theme package's OOTB Stitches functions
 - `css`
 - `styled`
 - `theme`
 - `utils`
- The differences between SASS/SCSS and CSS-in-JS
- How to use the `css` function in Svelte, Vue.js, and more
- and much more!

 

<YoutubeEmbed videoid="pDQK-UJ2LJQ" />

Watch Arturo Silva lead our second developer workshop for our v1 rollout of the new WPDS. Same topics as the first one, but with a different approach.

To the right of the image, a man stands holding a text box with both hands. In front of him a large website floats in front of him. He appears to be inserting the text box into the upper left of the website. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 2 - WPDS for Developers'. 'WP Design System' appears on the lower left.

Workshops

WPDS v1 - Design Workshop

WPDS v1 - Design Workshop 2

WPDS v1 - Developer Workshop

WPDS v1 - Developer Workshop 2