top of page
Terracycle's Figma Design System

A detailed design system

#Web Design
#Animation
#Packaging

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. 

More Projects
Loop Mobile App

Based on user feedback, improvements were made, and I worked closely with the BA and developers on a tight timeline.

tiniest Biome

UX&UI for a new product, which included static pages & a multi-level user profile area.

bottom of page