Terracycle's Figma UI Kit
A detailed kit for building new designs & experiences
Timeline/Days
2 months
Year
2023
Role
UX&UI Designer
Client
TerraCycle
Overview
Using components and variables, I created a Figma file to be the primary source of truth when making new pages for TerraCycle's website. It contains the primary components used to produce new designs in Figma and currently saves the product team hours of work time. Each component has its Component Properties set up so the designer 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 kit includes scalable designs that can be quickly adjusted for each needed device screen.
Creating forms in minutes
The extensive list of options for each type of input field in the UI kit enables the designer to create new and custom forms quickly.
Buttons that are ready for every scenario
The designer can switch between button styles, add icons, change the text & more, with just a few clicks through the Component Properties panel.
Variables: ✅
With Figma's new Variables feature, the TerraCycle style guide will be much more powerful and easy to use. Once the feature is out of Beta, the text styles and sizes will be added to the Variables. Also, the spacings and paddings have already been applied to the aforementioned scalable designs.
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.
