Best Design System tools

Here is our curated list of the best tools for Design Systems.

Developers tools

Backlight

Screenshot of Backlight

Backlight lets you build your component library in isolation using the Component Story Format from Storybook.

The online capabilities of Backlight provides innovative opportunities for collaboration between developers but also with designers and UX writers.

The GitHub and GitLab bots enrich your existing git workflows with visual review.

And the integrated release management let you release on npm in one click.

Key features for developers

  • Local or online coding
  • One click share with co-workers
  • Storybook stories compatible
  • Integrated bot for GitHub or GitLab
  • Instant Pull Request visual review
  • One click release management to npm
  • Extensive framework support including React-Native for Mobile and Web
  • Supports multi-framework Design Systems
→ https://backlight.dev

Storybook

Screenshot of Storybook

Storybook helps you build components in isolation and create component catalogs.

It has a collection of addons that extend the development experience.

Key features for developers

  • Open-source
  • Large community
  • Addons for everything
→ https://storybook.js.org

Designers tools

Figma

Screenshot of Figma

Figma is a collaborative vector graphics editor and prototyping tool used mainly by designers to make UI and UX designs of mobile and web products, as well as graphic design work. Launched in 2015, it's a web-based software but it is also available for macOS, Windows and Linux as a desktop app.

Figma is taking the design industry by storm due to its real-time editing features, its cross OS nature, good prototype interactions and the management of component libraries like no other.

Figma’s features can be extended thanks to a wide variety of optional plugins that can be easily installed when needed.

In comparison to its competitors, Figma includes features of 3 separate softwares designers previously would have to manage (design, prototype and cloud storage) for a much more affordable price. It's main disadvantage is the limited offline options being that it's a browser-based platform.

Key features for designers

  • Design system features (shared component library, basic set of tokens, component documentation)
  • Web-based
  • Prototyping
  • Mobile prototype preview with app
  • Collaborative with live editing features
  • Large community
  • Plugins
  • Integrations
→ https://figma.com

Framer

Screenshot of Framer

Framer is a design and prototyping tool that was launched in 2013. In contrast to its competitor, Framer has the ability to design interactive prototypes of websites and applications with production components and real data.

The transitions, code-based components and overall control of the prototype is what makes Framer stand out.

Key features for designers

  • Strong prototype features with code generated components
  • Design system features
→ https://www.framer.com/

Sketch

Screenshot of Sketch

Sketch is a vector graphics editor released only for macOS. In recent developments sketch offers a browser-based experience, with limited features: commenting and viewing files only.

With Sketch the UI and UX of mobile and web application can be easily designed and prototyped, as well as graphic design work. It also has a component library capability like Figma however it can't be easily maintained in a central location, for that the design team will need a third party software such as Abstract or Dropbox.

It is also possible to extend its features with the installation of plugins. The files are normally shared with developers to inspect the design files in order to extract measures and color values. Sketch had the first-mover advantage when it was launched in 2010 and when it received Apple's Design Award two years after its launch.

Key features for designers

  • Intuitive and fast
  • Design system features (component library, basic set of tokens)
  • Prototyping (requires plugins for more advanced prototyping)
  • Mobile prototype preview with app
  • Third-party plugins
→ https://sketch.com

Adobe XD

Screenshot of Adobe XD

Adobe XD is a vector-based software for the ideation and execution of UX and UI designs of web and mobile apps. It was released in 2017 by Adobe Inc as a way of maintaining its relevancy in the Digital Product Design industry since many designers moved from Photoshop and Illustrator to the more relevant tools. For those who are active in other Adobe products, like Adobe Fonts, it's easy to sync everything. It also has the option for a collaboration if the document is hosted in the cloud.

Its prototyping features is pretty advanced in comparison to Sketch and Figma, and it's an application available for both macOS and Windows.

Key features for designers

  • Easy to use
  • Prototyping
  • Mobile prototype preview with app
  • Design system features (component library)
  • Integrations: Trello, google sheets, Airtable and more
→ https://www.adobe.com/products/xd

story.to.design

Screenshot of story.to.design

story.to.design is a Figma plugin that automatically generates and updates a full UI kit from your component library code. It works with Storybook or Backlight, taking all stories and bringing them into Figma as a design UI kit. story.to.design also supports Figma variants, so there’s no need to maintain thousands of variants manually; they are automatically generated and updated when needed. Maintaining both design and code in sync is no easy task. story.to.design was created to make this sync easier, allowing designers to focus on real design work, as opposed to manually updating their UI kits every time there’s a code change.

Key features for designers

  • Automatic generation, no manual work
  • Easily installed with Figma, no additional tool required
  • Design system features (sync component library code with design)
  • Integrations: Backlight and Storybook
→ https://story.to.design

Design Tokens tools

Specify

Screenshot of Specify

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets for your design system — automatically.

Specify helps you:

  1. Collect design decisions
  2. Store design tokens and assets
  3. Distribute your branding at scale

Key features for tokens

  • Easily connect all your favorite tools to your Design API to create a fully networked design system.
  • Build consistency across teams, tools and platforms by creating a single source of truth for your design tokens.
  • Quickly build custom delivery pipeline that adapts to your technology and platform — automatically.
→ https://specifyapp.com/

Figma Tokens

Screenshot of Figma Tokens

Figma Token is a Figma plugin allowing you to define & use tokens directly in Figma, including smart aliases for colors, typography, spacing, border radii, etc.

Extends Figma's built-in tokens:

  • Colors (Fill, Border Color — hex, rgba, hsla)
  • Spacing (Horizontal, Vertical, Gap)
  • Sizing (Width/Height)
  • Border Radius (individually or each corner)
  • Border Width
  • Opacity
  • Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)
  • Shadow tokens (both dropShadow and innerShadow)

Key features for tokens

  • Extends Figma token support.
  • Import and Export capabilities for system integration outside of Figma.
→ https://jansix.at/resources/figma-tokens

Documentation tools

Backlight

Screenshot of Backlight

Backlight is a code-side design system platform with built-in documentation features.

Backlight is a code-centric documentation solution. The documentation can be written in multiple Mardown flavors (mdjs, MDX, MDVue, Mdsvx, Astro) and live in the same repository as the component code. It provides a full version-controlled documentation always in line with the component code and released at the same time.

The online studio of Backlight allows less technical members to push changes without the need to be experts in CLIs, npm installs, git and Pull Requests.

Key features for documentation

  • Large technology support: mdjs, MDX, MDVue, Mdsvx, Astro
  • Documentation 100% customizable
  • Design Tokens and Components are always up-to-date in the documentation
  • Version-controlled with code in Github or Gitlab
  • Automatically released and versioned with the Design System
→ https://backlight.dev

Zeroheight

Screenshot of Zeroheight

Zeroheight is a collaborative platform for front-end team to document design systems.

It provides a WYSIWYG experience to import design assets, add code snippets and import stories in the documentation. It is built for the front-end team to collaborate around documentation.

Key features for documentation

  • WYSIWYG
  • Collaborative
  • Import from design tools
  • Import storybook
  • Version management
→ https://zeroheight.com/

Content Design tools

Figma

Screenshot of Figma

Figma is a collaborative vector graphics editor and prototyping tool used mainly by designers to design UI and UX of mobile and web products, as well as graphic design work. Launched in 2015, it's a web-based software but it also available for macOS, Windows and Linux as a desktop app.

When designing content, it’s important for the copy to stay in context. The process is also smoother when we co-design with fellow product designers, ideally in the same tool. More and more design teams are turning to Figma, which is why content designers and UX writers should, too.

Key features for content

  • Quick learning curve; no need to be a product designer to use it
  • Keep content and UI in the same place, in-context
  • Find & Replace plugin: essential for implementing copy changes across designs, without the time-consuming copy-paste
→ https://figma.com

Notion

Screenshot of Notion

Notion is an all-in-one workspace. It’s a wiki tool that brings together documents, roadmaps, databases, task lists and more into one place. Notion is ideal for content design because of its flexibility and ability to link docs and external resources together. A perfect tool for note-taking, documenting ideas, showing iterations and more…

Key features for content

  • Simple, no-frills and content itself is protagonist
  • Document content decisions and guidelines
  • Place to get organized, keep a content hub
→ https://www.notion.so/

Ditto

Screenshot of Ditto

Ditto is a tool and Figma plugin that acts as a source-of-truth for all product microcopy. It’s designed as a reusable text component library, making it easier to manage text in mockups. Ditto is also great for editing copy across design files with features like bulk editing and syncing edits across duplicate text.

Key features for content

  • Ability to manage text as components - great for consistency!
  • Ease of syncing copy across designs
  • Track content versions and feedback
→ https://www.dittowords.com/

Hemingway app

Screenshot of Hemingway app

Best practice says to make sure your content is understandable for an average 12-year-old. Tools like the Hemingway app scan your content to assess the readability score and ease of understanding of your copy.

Key features for content

  • Indicates use of jargon or complex words
  • Highlights grammar and spelling mistakes
  • Detects comprehension level and readability
→ https://hemingwayapp.com/

Maze

Screenshot of Maze

Content designers and UX writers should be doing research as much as any product designer. They should also be testing their content design choices with users. Maze is a great tool for hosting user tests. It allows you to collect user insights that fuel product decisions. With a variety of formats and methods included in the same tool, Maze is a favorite for remote testing. For content design, it’s great for sending out surveys and unmoderated tests to get direct user insights, and help make copy decisions at design stage.

Key features for content

  • Wide variety of formats and methods for gathering insights
  • Get feedback on clarity, tone of voice and user’s perception
  • Quantifiable user insights to help back-up your copy choices
→ https://maze.co/

html.to.design

Screenshot of html.to.design

html.to.design is a Figma plugin that allows you to convert any website into fully editable Figma designs. It leverages an existing website and imports its html to Figma so you can start your own designs without building each element from scratch. And it’s great for content design, too! If you need to update copy of an old website, or want to propose content changes in a visual way, html.to.design allows you to import the full page and start editing text right away.

Key features for content

  • Make changes to an existing webpage without chasing a designer to help you design the UI.
  • Show copy changes to existing sites in a visual way.
  • Experiment with different copy and see exactly how it’ll appear on the site.
→ https://www.figma.com/community/plugin/1159123024924461424/html.to.design

Miro

Screenshot of Miro

In an age of remote work, online brainstorming tools like Miro are essential. Miro is an online whiteboard where teams can collaborate on the same canvas, at the same time. It’s great for both real-time collaboration and asynchronous teamwork. Miro comes with a bunch of templates for mapping-out processes, sharing ideas and co-designing. It allows teams to brainstorm, plan, design, iterate and even host meetings.

Key features for content

  • Digitized sticky notes; great for brainstorming
  • Templates for mapping-out flows, processes, etc.
  • Real-time co-designing and iteration
→ https://miro.com/

IterationX

Screenshot of IterationX

IterationX allows teams to annotate and edit a website or web app, right from the browser. A newer, but promising, tool for remote teams. IterationX has an editor mode, annotate mode and issue management feature. It’s great to see how copy tweaks will look in-context, as well as showing and iterating together with the team.

Key features for content

  • Edit content live and in-context
  • Iterate and explore different solutions in one place
  • Share with anyone, no need to screenshot or download anything
→ https://www.iterationx.com/

Thesaurus

Screenshot of Thesaurus

While consistent wording is key to designing great experiences, a thesaurus is still a must-have for any professional writer. A thesaurus can help find the right words, but is also a great brainstorming tool. For naming projects, for example, a thesaurus can fuel ideas and remind us of all the words out there. Especially if you’re the sole UX writer on the team, a thesaurus can be that writing buddy to bounce ideas off of.

Key features for content

  • Brainstorming tool
  • Source of inspiration for naming projects
  • Easy to access and always free
→ https://www.thesaurus.com/

ReallyGoodEmails

Screenshot of ReallyGoodEmails

If you have to design transactional or marketing emails for your product, this website should be in your bookmarks. Reallygoodemails.com is a curated collection of emails from different types of products and companies. When brainstorming ideas, this site is a great source of inspiration, and is even categorized by email type to make searching easier.

Key features for content

  • Collection of all kinds of transactional and marketing emails
  • Categorization by type
  • Search bar to look for emails with specific words
→ https://reallygoodemails.com/

Grammarly

Screenshot of Grammarly

Grammarly is an AI-powered desktop app that scans your content and offers corrections as you write. The free version checks spelling, grammar, punctuation and conciseness. The best part is that Grammarly works in all desktop apps and browsers, to propose improvements right where you’re working. There’s no need to copy-paste anything into an online editor. Even the most proficient writers make mistakes... Tools like Grammarly are today’s version of the good-old spell check, and should be in every writer’s toolkit.

Key features for content

  • Suggests simpler alternatives to complex words
  • Checks spelling, grammar, punctuation and conciseness
  • Works where you do, correcting as you write
→ https://www.grammarly.com/

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.

Try for free