The idea for this project came from the desire to increase the efficiency of the engineering and design teams output, allowing us to focus on solving business problems - not repeating tasks. However, being a small team this design system had to be built in a reasonable time frame, and had to be manageable enough to really be used effectively.
A Voxel is a "any of the discrete elements comprising a three-dimensional entity". This definition I felt was perfect for Poliigon's new design system, as it perfectly captured both the businesses 3D roots, and the building blocks that make up a design system.
This project is something I would be spearheading at Poliigon, with my role being its primary user. The challenge here was to design a system that was easy to understand and follow for both designers and engineers, and had the flexibility to be scaled as the business grows.
Not only did I want to create a library of usable assets and components, but I also wanted to document how these systems should be used. With every component I created in-depth documentation outlining how it could be used, and appropriate times to break out of its restrictions.
To begin the build out of the design system I decided on a number of base components to create. These would become the building blocks of the system, being able to be combined into larger components in the future. This creates a nested component system that affords us great flexibility and control.
One example of a more complex component in the system is the form field component. This component has a number of variables that allow it to be used in a number of different circumstances at an infinite level of scale.
With these fields you can build out a full form with icons in any position, a dropdown and even tooltips and error messages. This allows us to build forms on the site rapidly, and not waste time even on complex fields. Even the icons have great flexibility, allowing you to search through Google's Icon Library within the component, and select your required icon. I'll be creating a blog post in the future walking through how this was built, so stay tuned.
For a simpler walkthrough on how to create form fields in Figma, check out my blog post on the subject.
As part of creating the design system, it was important to create easy to understand documentation to promote its use across Poliigon. I needed to inform users what a design system is, it's purpose and how it can benefit users. Documentation was created within the Figma files, but also in Poliigon's workspace tool Notion. This was done to allow all members of the-business to learn about Voxel, not just those with access to Figma.
I created easy to understand descriptions and tutorials, paired with videos and animations of the design system in use. Although likely just designers and engineers would be using this system, it needed to be straight-forward enough to be understood by product managers and other stakeholders.
Already Voxel is being used to speed up the design and engineering workflow at Poliigon. The simple design tasks that add up over time are now reduced, and we are only going to see an even bigger improvement over time. The design system still is in progress, but due to the way it was built it can be managed and expanded upon all while in use. This lets us manage the system and make updates when business goals call for it.
On top of expanding the library into more complex components, I would also like to introduce design tokens to the system. Once this process is complete, engineers will have a seamless way to translate design files into real products. This is an exciting process that has real potential to not only speed up workflows, but allow growth in both product and engineering teams.
Get in touch to discuss what will make your next project a success. Do you instead just want to chat about design, or have a couple questions? No worries, let's chat.
Get in Touch!
