April 13, 2018 // By Manjiri Acharekar, Jeff Szpak, Meghan Lien
In the previous blog–Part 2 of this series—we learned about proven methods for successfully constructing pattern libraries & design systems. We also emphasized the importance of creating a shared vocabulary amongst organizations to ensure product success in the future. In this third blog, we will review a variety of helpful tools that create a strong foundation for well-constructed systems and libraries.
Recap of Methods
- Interface Inventory workshops are valuable in getting the entire team on the same page through the process of auditing site components.
- Leveraging the Atomic Methodology helps create design systems in a hierarchical way.
- Design Systems consist of a variety of components such as: principles, style guide, writing, resources, and pattern libraries.
- Pattern Libraries are comprised of several elements, including: typography, colors, iconography, form elements, navigation, and code.
Let's explore tools!
If you are looking to get started creating a pattern library or design system, there are many great tools available today. Whatever tool you decide to go with, make sure to do the research required to ensure that it suits your needs and is scalable within your organization.
Sketch
Sketch is currently the preferred design tool among many UX professionals due to its simple, intuitive interface, community popularity, and access to a large library of free resource templates. Sketch can be used to create static user flows, wireframes or mockups, and also has the ability to prototype right within the software. Designs are brought to life with powerful plugins, libraries, symbols, sync tools and prototyping capabilities.
With Sketch, you can provide a standardized set of UI symbols, guidelines and rules for creating design systems and pattern libraries. A shared design library can also be created to keep all files and assets updated and consistent—reducing merging conflicts and increasing design team efficiency. By building nested symbols, color overrides, font styles, reusable icons, interactive buttons and form field systems, designers can establish a consistent foundation for product design. Additional benefits of Sketch include: smaller file sizes and faster software performance.
Invision
InVision is a very powerful design prototyping platform in the world of UX design tools. Via Sketch’s CRAFT plugin, screens can be synced to InVision to create a clickable prototype with effects, transitions, gestures, and animations. InVision is also a highly collaborative tool—allowing various project team members (e.g. developers, PMs, stakeholders) to leave feedback, comments, share assets, and more. Developers can access real code, dimensions, and graphic assets through the Inspect feature as well.
Invision Studio
InVision recently introduced a brand-new design tool called Studio that offers screen design, responsive layout, rapid prototyping, advanced animation, shared design systems, and collaboration. Studio will have its own app and assets stores as well, so designers and developers can build products within the tool itself.
Adobe XD
Adobe XD is another great tool for designing mobile apps, websites, and design systems. XD is an all-in-one solution which easily transforms designs into interactive click-through prototypes within the software, eliminating the need to sync to another software such as InVision.
Many of the same features are available within XD: symbols, transitions and animations, collaboration and commenting, and developer hand-off. Designers can save time by creating common symbols in XD and easily edit multiple copies of the same component across the document, all at once. The design specs feature lets you collaborate with developers by sending a link that automatically generates assets such as: colors, styles, measurements and more.
UX Pin
UX Pin is an another fully collaborative product design platform worth mentioning. It allows UX designers to build interactive, realistic web and mobile wireframes and prototypes. It comes with a library of pre-defined device & operating system-specific components—making it easy to instantly build prototypes aligned with guidelines. Users can also import Sketch files into UXPin and build upon the design to add interactive features such as: animations, transitions and gestures. This software also includes the critical product design capabilities, including: symbols, font styles, color palette, and icon/image libraries.
Their new style guide feature allows users to download individual properties (e.g colors, typography, and image assets) to their computers, open the files, and copy + paste rendered code in the editor of their choice. In addition, the Spec mode helps developers build local components like GitHub. They can save time with auto generated specs (colors, grids, fonts, typography and dimensions), CSS, use cases, code snippets and more. Any extra documentation can also be added to UX Pin.
As your team builds the Design System, you can easily set permissions for viewing and editing the corresponding design system library to avoid miscommunication. You can easily collect feedback from everyone involved in the project such as Designers, Developers, PMs, and stakeholders. This keeps members of the team updated, request approval from the stakeholders, and gather feedback all within one place.
Pattern Lab
Pattern Lab is an open-source, static site generator that provides a flexible, scalable infrastructure for building and maintaining pattern-driven user interfaces. It can be the single source of truth for designers and developers –reinforcing team collaboration and constructive workflow. This solid foundation also makes browser, device, performance, and accessibility testing easier.
Pattern Lab IS…
- A static site generator tool for building atomic design systems
- A pattern starter kit
- A pattern documentation and annotation tool
Pattern Lab is NOT…
- A UI framework like Bootstrap or Foundation
- Language, library, or style dependent
- A replacement for a content management system
Pattern Lab simply pieces everything together, so the front-end code, UI styles, naming conventions, syntax structure, libraries and scripts are the responsibility of the project team building it. It is not a UI framework like Bootstrap or a CMS platform; it’s language, library and style independent. Being tool and language agnostic allows Pattern Lab to conform to your environment and workflow. You choose the tools and conventions that are right for your team. This flexibility makes Pattern Lab a great choice for new or existing projects.
Conclusion
The toolkit you decide to build your design systems and pattern libraries with will be influenced by your organization’s environment, technologies, workflow, and culture. Whatever you choose, be sure that the suite meets your needs while enforcing consistency, scalability and optimization across your organization.
In our next blog—part 4 and final in the series—we will dive into the process of maintaining and testing a design system for your organization’s long-term success.