Site in-depth: Superposition

KILIAN VALKHOF DISCUSSES HIS TOOL FOR EXTRACTING THE BUILDING BLOCKS OF A DESIGN SYSTEM.

TELL US WHAT SUPERPOSITION DOES.

Superposition ( https://superposition.design) is a free desktop app that parses the styling of a website and creates ‘design tokens’. These are things like the colours, fonts and spacing you use in your design.

Once the design tokens are parsed, you can export them to code (CSS, SCSS or JavaScript) or use them directly in Adobe XD (Sketch and Figma are coming soon). You can also copy directly by clicking on them.

WHY DID YOU CREATE IT?

Design systems help improve the design process. Unfortunately they’re out of reach for most designers and developers. Design systems come with a relatively large upfront cost so, ironically, the people that would benefit most from using design systems – those with time and budget constraints – are the ones that don’t have access to them.

I wanted to find a way to give people access to a design system with no (or at least a much lower) upfront cost. Because a website is styled with CSS and so already ‘encodes’ a design, I figured out how to reverse engineer that into a design system.

WHAT WERE YOU HOPING TO ACHIEVE?

I wanted a simple way to get a quick overview of a site’s design tokens and let people use that in their code. Having a good overview of your design tokens is like the minimum viable product of a design system, so is a good place to start.

More generally, I wanted to create a second app using the same underlying techniques as Polypane, a browser I made for developers and designers. Superposition is built on Electron and React. It’s all written in JavaScript and I can build a single application for Mac, Windows and Linux. The parsing for the site is built in JavaScript, using a foundation I made for Polypane’s CSS breakpoint parsing.

The plugin for Adobe XD uses the XD Plugin API, which is also JavaScript. That communicates with Superposition and loads design tokens to use in XD.

HOW HAS IT BEEN RECEIVED?

So far so good! Superposition is part of the Adobe Fund for Design and they’ve provided great support in the run-up to the release. It’s great to see people use the application and find value in it!

WHAT DO YOU THINK YOU’LL DO NEXT WITH IT?

The end goal is for Superposition to take you from website to design system in a single app. You’d create your design tokens and components, then add documentation and export it into a design system you can share with your team or client.