Design Systems
Target’s design system delivered a 10X increase in speed with teams one quarter of the size.
American Express was able to deliver work with 1/3 less person hours.
ExxonMobil built 50+ web apps in 10 months using their new design system.
What is a design system?
Design systems provide a usable, centralized ever-evolving kit of colors, type, interface components, templates, tokens and usage guidelines guided by brand standards that can be used across all digital products. This is a living, breathing document whose concepts and elements serve as a North Star for all design work. Maintaining a design system as such allows your design team to save time and resources building and refining flows and high fidelity designs.
Go from design stress to design success with Impekable.
How do you know if you need a new design system?
You’re a design team in need of organizing your design files.
You’re a team of developers looking for consistency across your product and access to design changes immediately.
You’re a larger organization looking to create efficiencies across multiple products and design teams. Fewer reviews mean more go-to-market designs.
You’re looking to switch design tools, and want to preserve your user interface elements as you migrate.
Why Adobe XD?
We’re a trusted Adobe Partner
Our close partnership and expertise in Adobe XD means that we will create your design system using the latest and greatest XD features with end result being an extremely organized, intuitive and scalable design system your entire team can leverage.
Click below to download the kits we’ve created in partnership with Adobe.
iOS 14 Kit
Google Material Kit
Bootstrap Kit
Our process
- 1
We start with an in-depth onboarding call to understand how you’re currently leveraging a design system, UI kit, or existing design files. We’ll talk through your needs, pain points and the goals you have for implementing a design system moving forward.
- 2
Depending on your timeline and existing frameworks you have in place, our team may begin by auditing your existing files and creating recommendations for your updated design system. We can incorporate principles from enterprise systems like Material UI, Bootstrap, Fluent, etc.
- 3
We’ll improve existing components and patterns while also creating new elements to fill any gaps in your system, utilizing Adobe XD to its fullest capabilities to create a living, breathing document that can be easily updated over time.
- 4
We offer both training assets and long term maintenance to accompany the delivery of your design system. We can help up-skill your team on Adobe XD and/or supplement resources to maintain your system over the long term.
CASE STUDY
Salesforce Lightning
Where we started
The Salesforce Lightning Design System is used across the Salesforce CRM/Sales Cloud, the Service Cloud and the Marketing Cloud spanning both desktop and mobile applications. There are a variety of products that live within the Salesforce Ecosystem and are built by companies without access to the Lightning Design System.
Adobe wanted to offer the Lightning Design System design toolkit on Adobe XD for all designers and developers creating products within the Salesforce Ecosystem, and they asked our team to build a fully responsive XD document that could be downloaded as a Adobe Creative Cloud (CC) Library for easy access to Lightning design assets.
The goal
We wanted to create a living, breathing design system that encompassed all of the Salesforce Lightning brand, web and mobile elements, as well as larger patterns and resources.
This system needed to utilize Adobe XD features that allow designers to use components quickly and seamlessly within their files, while pushing all changes through CC Libraries so they cascade across teams and projects.
Our process
We started by working closely with Adobe to understand how they envisioned designers and developers using this kit. We were then able to organize the files in a way that allowed for the most seamless updating and sharing process through CC Libraries, while also breaking out files into product specific files for teams that would find them the most relevant for their use case.
We migrated assets from Sketch and cross-referenced with the Salesforce Lightning documentation to make sure all components were the latest versions.
Since we were building everything with XD in mind, we utilized features like Stacks, Padding, Responsive Resize, Scroll Groups, Component States, and Repeat Grid. This would ultimately increase efficiencies for design teams as they put the kit to use.
Go from design stress to design success with Impekable.
The final product
We created a variety of key files spanning web and mobile components with supporting usage guidelines. Interface components included buttons, inputs, tables, tooltips, pickers, breadcrumbs, chart builders, welcome mats, progress trackers, tabs, trees and more. All files were connected by an asset library encompassing the Salesforce Lightning color palettes, design tokens, type styles and icons which can be accessed directly from the assets panel of each key file.
This kit can be used by designers and developers across the world looking to create Salesforce products compliant with the Lightning Design System.
Ready to get your design system started?
*ROI data is from this article written by Distillery Tech. and this article written by Platform