Hire UsWebprints 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.
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.
Design Systems, Design Tokens, Product strategy and design, UI/UX, Product Design, User Experience, Content strategy
Design System, Multi-brand design system, Token Library, Component Library, Design Guidelines and Documentation, Product design
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.
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.
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.
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 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.
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.
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.
Zero-to-one product strategy and design for a platform helping creators run their businesses.
Learn about Mink