Terracycle's Figma Design System
A detailed design system

Timeline/Days
2 months
Year
2023
Role
UX&UI Designer • Full-time
Client
TerraCycle
Overview
Using components and variables, I created a file in Figma that now works as the primary source of truth for TerraCycle's website. It contains the primary components used to produce new pages & content in Figma, and currently eliminates hours of extra work. Each component has its Component Properties set up so I can change the component's properties with a few clicks, and it is based on the existing website that TerraCycle had provided me with.




Designs that are responsive for every screen breakpoint
Since TerraCycle's website has multiple breakpoints, the Figma design system includes scalable designs that can be quickly adjusted for every size screen.

Creating forms in minutes
The extensive list of options for each type of input field in the design system enables the quick creation of new and custom forms.

Buttons that are ready for every scenario
I set up the system for quickly switching between button styles, adding icons, changing the text & more, all done with just a few clicks through the Component Properties panel.

Variables: ✅
With Figma's latest Variables feature, the TerraCycle design system is even more powerful and easy to use. Text specifications, spacings, paddings & booleans have been used to create a system that is easy to use and most importantly, modular.
