Project Vision

Webprints is a startup that aims to build a vibrant 3D printing community through their social platform, allowing users to easily discover, download, and upload 3D projects for seamless sharing and printing. The Forge team set out to create a design system that enables rapid development of new features, themes, and even new products or brands, without compromising consistency. By providing a comprehensive library of reusable components and guidelines, the Webprints team is able to ship new features and scale more quickly. The close alignment between the design system and codebase enhances efficiency and collaboration, allowing for swift adaptations to meet evolving user needs and driving Webprints' mission forward.


Product strategy and design, User Experience, Content strategy


Multi-brand design system, Product design



The Challenge

Given Webprints’ status as a start-up company, their primary focus is on quick ideation and testing. The Forge team needed to create a design system that is easy to use, aligned with code, and flexible enough to handle creating new features quickly.

Flow from Figma to code: Figma, Tokens Studio Plug-in, Github, Style Dictionary, Visual Code
Flow from Figma to code: Figma, Tokens Studio Plug-in, Github, Style Dictionary, Visual Code

The Solution

We developed a versatile and customizable design system that is platform agnostic and themable. By leveraging Token's Studio plug-in, which syncs with Github and other various platforms, we could effectively managed foundational styles, ensuring consistency between design and code. Applying these tokens directly in Figma enabled seamless theming. Easy maintenance was prioritized we prioritized while keeping the end user's experience at the forefront.

Collage of Figma's UI, Token Studio plug-in and design token naming

Establish Foundations

Laying the ground work for a successful design system starts with the foundations. We meticulously put together the typography scale because it ultimately informs the entire sizing system based on line-heights and font sizes; allowing all our components to work together flawlessly. Furthermore, we create our color system with easy theming in mind while always maintaining accessibility standards.

Collage of foundation styles

Create easy-to-use components

We approach component creation with atomic design in mind. We create a wide range of sizes for our base components (buttons, inputs controls, etc) that can easily be adjusted with our assembled container components (cards, lists, accordions, etc.) We are constantly thinking about the end user and what will make each component intuitive to use.

Using design tokens for theming for multi-brand companies

Using the Tokens Studio plug-in we are able to apply tokens directly in Figma making it possible to switch themes with just a couple clicks. The plug-in create .JSON a file(s) that push to a GitHub repository so that design and engineering can stay in sync. We are able to maintain styles that Figma doesn’t natively let you set such as border width, border radius, spacing, sizing, and more.

Product UI going from light to dark mode with a couple clicks.

Staying in sync through the governance process and file management

When it comes to creating new features in product it’s inevitable that new components will need to be created from time-to-time. We established a governance process based on Brad Frost’s methods; a very high level can be seen below. We also introduced a better file management system to keep files in order, up-to-date, and ready for engineering to build.

Flow of the governance process and film management

Helping the product community

We value generosity and love teaching others. Throughout this project, we created a variety of how-to videos for building a design system and are always adding more.

View the Forge Studio Youtube Channel →

Youtube UI showing a preview of a video for a typography set up in tokens studio