When do design systems start to pay off?

There’s a long list of benefits associated with, and expected from, using a design system. The ROI of working with a design system is well-established, and its benefits are wide-ranging across a product organization, from better UX to reduced time-to-market.  

What’s the magic sauce: is it learning to use your chosen platform? Documenting components? Taking advantage of design tokens?

All of those, and none of those. The benefits of design systems are the benefits of sharing and reusing existing design and code. Design systems are tools: they’re the means to an end.

For a design system to be valuable, it has to be used well: the value isn’t in the tool on its own, but the behaviors it facilitates. Design systems are valuable when they’re used right—and that value starts kicking in when you’re ready to commit.

Design system gains (can) start on day one

Design systems pay for themselves, with benefits like:

• Decrease production costs
• Increase product velocity
• Increase consistency
• Increase democratization of design 
• Increase sharing of innovation
• Streamline onboarding for new team members
  

Whether your system is live, in-progress, or only an idea, developing healthy habits and behaviors is what will make design system implementation worthwhile. While they infinitely increase the benefits of using a design system, these behaviors are not only applicable to design system practice. Learning to collaborate more effectively and work more transparently will benefit everyone.

Build while you’re building

But design systems take time to build!, they say. We counter: design systems help you stop creating design debt. You don’t have to stop everything you’re doing to build your design system: on the contrary, the best thing you can do is to keep building. 

Want to help us learn more about design system adoption? Take our survey and keep an eye out for an upcoming report.

Designing a button today? Coding a component? Take what you worked on today and put it into the design system. Good design systems are never finished—and they don’t need a ribbon-cutting ceremony to get started. If you’re committed to creating reusable components, then start with what you’re working on.

Get other people on board 

A design system’s most important contribution to your organization is how it facilitates healthy behavior. For your design system to deliver at max capacity, you’ll want to get everyone you can on board with you.

Sharing your knowledge and involving players from different levels of your organization will help you build an impactful system fast. By expanding your internal design system ecosystem, you’ll not only develop a more thorough design system—you’ll also have a larger group of users to give feedback and help you continue to expand and improve your system and practice.

User feedback is a gift. For system teams, examples of how the system is used or how they solved for something the system didn’t is the best feedback you can get to inform the next iteration.

Design system contribution can be easy for everyone

The goal of implementing a design system platform is to make contribution a simple, iterative step in existing workflows. Using Knapsack, designers and engineers can quickly integrate their work into their design system—within their flow of work.

Engineers: Connect templates and examples

Each time you build or reference a component for a UI you're building, ensure it is connected to Knapsack for reference and reuse.

Want to learn more about working with Knapsack? Check out our guide to getting value from your Knapsack-powered design system.

If you’re working locally and your component isn't documented yet, connect it using the following steps:

1. Find or add a page: Find the existing Pattern Page with the design asset. If it doesn't exist, add a new pattern page to Knapsack.
2. Optional: add usage guidelines using the Markdown content block.
3. Add a Code Tab to the page, selecting the proper renderer.
4. Connect the source template: Add the package path and namespace for the pattern.
5. Optional: configure the props: Infer or document the pattern API spec
6. Update statuses:Adjust the statuses to reflect the components current status
7. Commit the change: Merge your code or submit a PR for the design system team to review

Once the PR is created, the system team can choose whether to publish the contribution for all users to see and share or keep it private for reference and future planning.

Designers: Document the components you use

Each time you have a UI design ready for handoff to engineering, take a moment to make sure each design system element is documented in Knapsack. If a component is already documented, include a link to the Knapsack page for your engineer to reference or contribute to. If a component isn't yet documented, add the page using the following steps:

1. Find or add a page: Search for the existing pattern page with the coded pattern. If it doesn't exist, add a new pattern page to Knapsack.
2. Locate source design asset: Copy the share link for the design component (e.g. Figma component). If you use a platform that doesn't support live embeds, provide a link or directions to where the source file can be found, along with an image showing how it appears for designers.
3. Add design asset: Add the relevant embed content block (e.g. Figma, Xd, Framer, Abstract) or a generic iFrame embed and adjust the settings for proper display.
4. Add guidelines: Add design usage guidelines using the markdown content block
5. Update statuses: Adjust the statuses to reflect the components current status
6. Propose a change: Submit the update as a PR for the Design System team to review

As with engineering contributions, the system team can choose whether to publish the contribution for all users to see and share, or can keep it private for reference and future planning.

Design systems don’t work; design system mindsets do

Design systems are a means to end: creating reusable, high-quality work that’s accessible to the entire team. For your system to be successful, you have to commit to working together on building shared assets; once you’ve started on that path, your work will immediately benefit.