A UI Component Library for Designers and Engineers to accelerate Product Design and act as the backbone to a unified suite of products.
Pick Your Flavour: Vector or Code?
Helix is accessible to all and fun to use.
We built Helix to be beautiful, compliant, easily composable, and scalable. And we serve it in two “flavours”: Figma and React. The components stay in sync, regardless of which version you’re building with. We have a dedicated UX Designer and two front end Engineers who maintain our library. And regardless of if you’re building in code or in a designer tool, you can pull in the latest updates from the Helix library. So when a designer has an update for a component, the engineer can pull the latest NPM package and gets the update instantly.
We intentionally turned our “UX” skills inwards when creating the infrastructures that our internal teams would use when working with Helix. We took feedback from designers and engineers and crafted something easy and enjoyable for everyone to work with.
Established UI Patterns
We do have a few rules…
Beyond having a set of components that have a cohesive look and feel, I also wanted to standardize on common UI patterns. This give our platform users a reliable and predictable experience. Plus, there’s less re-inventing the wheel for our designers and our engineers have an easy way to replicate similar UI screens. The UI Patterns are published within the Helix’s documentation so anyone can reference it easy. They even come with copy and paste code examples.
Eight Major Application Rebuilds
(and Counting.)
My goal in building Helix was to unify Lone Wolf’s various products, all built at different times by different teams. Many were acquired as the company grew. However, my long-term vision was a cohesive suite of products that functioned as an enterprise solution. We are currently building with Helix 2, which is technically Helix 3. But I digress.
To date, we’ve built accounting, digital paperwork, digital forms, eSignature, analytics, and reporting application with Helix’s React library. And that’s not including smaller-scale projects and the multitude of mockups the UX team has created for proof-of-concept apps.
Having a Figma library makes it infinitely quicker for our UX designers to build gorgeous UI designs, all while staying consistent with our unified look and feel. The screens below are all from different products that the UX team redesigned using the Helix Design System.
Modern, Composable, Plug-and-Play Design
Helix Components can be quite small or surprisingly large; but they are designed to nest, stack, & Play Nice together.
We designed our individual components to work together well by standardizing on things like spacing, typography, padding, border-radius, shadows, and colour palette. In Figma, these attributes are confidently stored in the properties panel. Component variations are just a dropdown menu click away. In the code version of Helix, we have a library of class names that can be added to any element on the page. To avoid conflicting with other code, all our class names are prefixed with “helix-“. So applications can pull in a single component, or many, without worrying about style conflicts from our library.
