$$ ProgressBar - DoNotEdit $$

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Summary

Previous Employer

Design System

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> In-Progress

This Case Study is a draft and is still being written.

</aside>

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Tokens

Syncing Design with Code

4,000+ Component Variants & 700+ Styles

I created 761 tokens for colors, shadows, spacing, sizing, and more using the Figma plugin Tokens Studio for Figma. The tokens were applied to Figma components so that all component properties were controlled by tokens. The tokens were synced through GitLab to coded components visible in Storybook.

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Styles

Colors

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Styles

Text

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Styles

Shadows

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Components

Molecules and Organisms

Buttons

Input Fields

</aside>

<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Continuation

More Projects

Projects

Untitled

<aside> CALLOUT

Let’s work together.

Ready to schedule an interview?

<aside> <img src="/icons/mail_gray.svg" alt="/icons/mail_gray.svg" width="40px" /> [email protected][Link](mailto:[email protected]?subject=Request%20for%20Initial%20Phone%20Screen%20with%20Leo%20Vogel%20%F0%9F%87%BA%F0%9F%87%B3)

</aside>

</aside>

</aside>

• Case Study Draft [Highlight this row of text then type delete 3 times to make case study public]
• Organisms
• Deleted