Tool Options for the Design System

Mikes Notes

I need to determine what third-party design and management software to use and how to integrate it with the Ajabbi Design System.

This is for both future customers and for the Ajabbi team.

These notes came from Vitaly Friedman, editor of Smashing Magazine, a fantastic resource.

Requirements

Needs to work with design tokens.

Options

  • Figma
  • Token Studio
  • SuperNova

Figma

Notes

"Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. The feature set of Figma focuses on user interface and user experience design, with an emphasis on real-time collaboration, utilising a variety of vector graphics editor and prototyping tools. The Figma mobile app for Android and iOS allows viewing and interacting with Figma prototypes in real-time on mobile and tablet devices." - Wikipedia

Pricing

  • Starter (free)
  • Professional ($15/m per seat)
  • Organisation ($45/m per seat)
  • Enterprise ($75/m per seat)

Resources

Token Studio

Notes

Tokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.

It gives you reusable tokens that can be used for a whole range of design options, from border radius or spacer units to semantic color and typography styles. It allows you to change tokens and see these changes applied to the whole document or its styles. - Token Studio

Pricing

  • Free (free)
  • Pro (19 Euro/m per user)

Resources

SuperNova

Notes

"Supernova connects your design and engineering data in a single design system tool to accelerate and scale your product development."

"Supernova manages the entire design system lifecycle in one place. It's designed to fit with the way your team already works — without changing tools or maintaining self-built workflows and integrations — to enable your team to build better products.

Connect Figma files to your Supernova design system, sync design tokens via our Tokens Studio integration, and import variables from Figma via our plugin to ensure you constantly have the most-up-to-date design data in your design system.

Create advanced documentation using this data to keep documentation in sync whenever changes are made. Finally, connect design and code by automating code delivery with code pipelines to deliver tokens, styles, icons, components and documentation to your codebases." - SuperNova

Pricing

  • Free (free)
  • Team ($45/m per seat)
  • Company ($75/m per seat)

Resources

Alternatives

Open-source

  • Penpot

  • Lunacy

Paid

  • Adobe XD
  • UXPin
  • Zeplin
  • LucidChart
  • Miro

  • Framer

  • AxureRP

No comments:

Post a Comment