Tools for Productive Design Systems

Music Listening: SCANDAL “Take Me Out”
Photo Credits: Balázs Kétyi

Web technologies are more progressive and modular than ever. Managing UI across multiple platforms has introduced a need for design systems. Whether you are building a simple site or simply using Sketch or Figma, here are tools to assist on building design systems for single or multiple projects on the go.

Storybook

“Storybook provides a sandbox to build UI components in isolation so you can develop hard-to-reach states and edge cases.”

React style components can be visualised in Storybook.js. It is a useful tool to check, test and organize. It’s tutorial has helpful ways to get started, and you it’s free to download on github.

Figmagic

“Automate the generation of design tokens and specs from your Figma documents.”

Design Tokens are a way to store design guides such as Typography, Colors and Spacing into a working project — that communicates with your design file. Figmagic is a Figma plugin on github, where you can install and configure the settings to communicate with your design file. Although you will need your document structure to be similar with it’s template.

Style Dictionary

“A single place to create and edit your styles, and a single command exports these rules to all the places you need them — iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.”

Style Dictionary by AWS, is a tool to organise our styling files through a json file. You can choose to use their CLI or npm module. A nice feature is that it has a documentation website that updates accordingly. The demo shows how changing the values on the json file can speed up work for both Android and iOS.

Diez

Diez is a cross-platform design system framework that compiles design token components written on typescript into pure native SDKs for iOS, Android or web code base. Changes can be made to typography, images, font sizes and strings, as explained in the video. Diez will be available as open source soon, sign up for an Early Access.

Do you have a tool to recommend? Which tool do your prefer? Let me know your thoughts and hope this article is useful in your future projects.

Tracey Wong

I lead teams to positive outcomes by combining my skills in web development, product strategy and user experience.

Leave a Reply

Your email address will not be published.