Dwelling Design System
As the Design Systems Manager at Raymour & Flanigan, I am responsible for maintaining and shepherding contributions to our design system, Dwelling. It supports three teams: UX, marketing, and development. The UX team's primary use is to build features for the website, while the marketing team uses it for asset creation. The development team references the provided designs and uses the design token library in feature implementation.
Library Architecture
The entire system is made up of two influences, three design libraries, and a number of outputs. Within that, all of our component architecture is based on atomic design language. This language allows us to categorize components based on complexity. Ions/atoms have their own dedicated library which we use as the base for all our other component libraries. Built on top of that we have a library for the website components and another for asset creation. This way each team only needs to use the library specific to their work. The ion/atom library is to be nested in any current or future libraries, which gives us a lot of control over the overall look and feel with minimal effort/maintenance.
Templating with Content Slots
For our more complex components, we maintain a number of them as templates with various types of content slots to swap atoms in and out within them. The content slots allow for our components to be flexible and prevent the majority of cases where they are needing to be detached in order to modify them to a design’s specifications. This speeds up our design process by making the majority of designs built on these templated components leaving most of the effort focused on net new design work. It also significantly increases the level of consistency being produced in our finalized designs.
Tokens
When it comes to development, Dwelling offers a comprehensive design token library that our developers use. We have a base collection of tokens that store true values which we pass through alias tokens for contextualized use. The naming structure is easy to follow: -category -component -attribute -value -state. There are some exceptions to this rule but it applies to the majority of our tokens. With the addition of variables in Figma we are also building out tokens for our sub-brands that we can easily apply to our components in design and dev.
Conclusion
Dwelling is a product of two years of effort and already we have seen results in terms of design and development turnaround, as well as consistency in the implementation of new features. The main focus for the next phase is better documentation. Right now we utilize a Zeroheight instance, but have found that it’s not being referenced much. So taking a step back to better understand the needs of our designers and developers when it comes to documentation so that we can rework it to meet them where they are at.