How do web developers use a design system?
While there is an abundance of information available about building design systems (including a great breakdown of Atomic Design methodology from our art director Elena Nazzaro), there are fewer resources available for developers to understand how to implement them.
Here at PRI, we have developed an efficient process for translating a design system into a website, and we want to share what we’ve learned along the way. In this blog, we share our insights and tips to help you get the most out of your design system and to make the implementation process as simple as possible.
1. Involve Developers in the Design Process
To ensure a seamless implementation of the design system, we involve developers in every step of the design lifecycle. This does not mean that developers provide creative feedback, instead they evaluate design decisions from a technical perspective, ensuring that we are all following design and engineering best practices.
Collaborating with the design team and ensuring that all participants in a project have a developer-first approach helps us work toward feasible designs and find alternative solutions.
2. Use Tools to Streamline the Implementation Process
Well-established toolkits like Bootstrap can help developers create the building blocks of the application. The team as a whole, including developers and designers, decides upfront which toolkit will be used to build the application. Choosing and using a toolkit eliminates confusion and provides a starting point for the project, saving time and helping us adhere to best practices.
A design system is more than just UI components, colors, and typography. It is a collection of elements, colors, typography, components, rules, and a style guide. In addition to layout-specific elements like grid definitions, other global elements like colors, typography, and icons are identified and finalized during this phase. Dependencies like icon libraries, fonts, etc., are identified and documented as well.
3. Conduct a Design Review
The next phase in the implementation process is the design review. Design review is a workshop-style meeting where designers and developers review all parts of the design system, make decisions, and assign action items. A developer’s goal at this meeting is to check for feasibility and ensure project requirements are being met.
The questions you ask during your design review will set the parameters for the rest of the project, so you need to ensure that you’re asking the right questions. But where do you start? PRI has a set of questions we have found to be particularly impactful. We always use them as a jumping-off point and customize them depending on the project at hand.
|
Download PRI’s |
4. Facilitate a Design Handoff
After our team has completed the design review, the next step before implementation is the design handoff. This is a workshop that happens after approval of the design deliverables, where designers and developers come together to formally hand over the design system.
This is the time for designers to educate developers about the design system, inform them about guides and rules, and ensure they have all the documents needed for the build.
Here are a few examples of deliverables for the design handoff:
- The final version of the design system in Figma or Adobe XD containing complete mobile and desktop mockups and a component library to go with them.
- A guide for the developer about the building blocks of the system, such as colors, typography, and component states.
- Assets and custom icons used in high-fidelity designs.
- Dependencies like icon libraries, web fonts, fallback fonts, and specific JS snippets for animations where possible.
5. Implement the Design System
The formal implementation phase begins with evaluation and preparation work, then evolves into building out the components and adding customizations as needed. This phase usually runs in sprints, culminating in demos and receiving and acting on feedback from the QA team, design team, and the client.
The developer starts by evaluating the design system and making detailed notes on what types of components can be used from the existing framework. They also notewhere custom builds are required, and the specific markup that will be used.
The developer then builds a development environment, installing dependencies using package managers like npm, including helpers as needed. Helpers are snippets and scripts that perform specific actions or conversions. If the application is using a toolkit like Bootstrap, we might use the Bootstrap build tool to customize and generate the build, minimize CSS and JS files, and include them in the project.
After these steps, the developer is ready to build the structural layout of various templates and pages. In some cases when custom blocks diverge from conventions for previously agreed-upon reasons, custom CSS needs to be added to accommodate these customizations. To avoid conflict, the developer will try to isolate the styles to the minimum required level, asking themselves if it affects the component, the content block, the page, etc. This step ensures that the developer does not introduce conflicts in other conventional areas of the application.
Some of our developers find it easiest to start with the footer block and work their way up to the most complicated blocks. Others prefer to prototype in HTML and then pull them apart to build blocks.
More Tips For Implementing Design Systems
- Avoid using external plugins and libraries to build feature blocks like sliders and galleries. This introduces conflicting presentation methods and results in excessive CSS rewriting, which impacts page performance.
- If your team is working on an inherited project, look for existing styles already defined and add new ones only when absolutely needed.
- Clearly define tablet behavior. Generally, our policy is to use mobile layouts for tablet portrait view and desktop layouts for tablet landscape view, but on occasion, we have noticed some unexpected behavior and have needed to write isolated styles to address these issues.
- Test, test, test. We test across multiple browsers and devices using tools like BrowserStack.
- Build from the ground up, starting with elements, components, blocks, templates, then pages.
This process is constantly in motion, and there are infinite opportunities to fine-tune it. The road ahead (here at PRI and with your project) is exciting, and we are always looking for ways to build more quickly, efficiently, and accurately.
Want to work together to implement a design system for your website? Reach out to us today.
Further Reading
Inside a Design System: What You Need to Know and Why
This article provides a general overview of design systems and why they're important.
Your Introduction to Design Systems
This resource provides further information about design systems as well as links to other useful tools for both designers and developers.
Design Systems for Developers
This guide is a helpful overview of the implementation process specifically for developers.
