superposition:-use-the-design-system-you-already-have

Use the design system you already have

Extract design tokens from websites and use them in code and in your design tool.

Free app for MacOS, Windows & Linux.

We send email about updates.

 

Screenshot of Superposition

Your website holds your design tokens

Design tokens are the smallest parts of your design: colors, typography, spacing etc. With them you can make consistent experiences across different parts of your website and app and even across projects.

Use them anywhere

Superposition extracts the design tokens your site already has and exports them to CSS, Scss, JavaScript and Adobe XD with Sketch, Figma, Swift and Android exports on the way.

From the overview of each group, simply click on a token to add the CSS value to your clipboard for easy usage.

Create, document and export your design system Soon

Supercharge your design system process by filling in the initial tokens and components right from your website or app.

Create your design tokens and components, add usage instruction and export it into a beautifully documented design system you can share with your client or team. Available Q1 2020.

Free download

Superposition is a free download and will remain free, made possible thanks to the Adobe Fund for Design and Polypane.

The Superposition Design system generator will be a paid extension, planned to be released Q1 2020.

Supported by

Adobe Fund for Design

Polypane browser for responsive design

Plugins for

Adobe XDSketchFigma

Exports to

CSSScssJavascriptSwiftAndroid

Learn more about design systems

Just getting started? We’ve collected some of our favorite articles and resources on creating design systems.

superposition:-use-the-design-system-you-already-have

Use the design system you already have

Extract design tokens from websites and use them in code and in your design tool.

Free app for MacOS, Windows & Linux.

We send email about updates.

 

Screenshot of Superposition

Your website holds your design tokens

Design tokens are the smallest parts of your design: colors, typography, spacing etc. With them you can make consistent experiences across different parts of your website and app and even across projects.

Use them anywhere

Superposition extracts the design tokens your site already has and exports them to CSS, Scss, JavaScript and Adobe XD with Sketch, Figma, Swift and Android exports on the way.

From the overview of each group, simply click on a token to add the CSS value to your clipboard for easy usage.

Create, document and export your design system Soon

Supercharge your design system process by filling in the initial tokens and components right from your website or app.

Create your design tokens and components, add usage instruction and export it into a beautifully documented design system you can share with your client or team. Available Q1 2020.

Free download

Superposition is a free download and will remain free, made possible thanks to the Adobe Fund for Design and Polypane.

The Superposition Design system generator will be a paid extension, planned to be released Q1 2020.

Supported by

Adobe Fund for Design

Polypane browser for responsive design

Plugins for

Adobe XDSketchFigma

Exports to

CSSScssJavascriptSwiftAndroid

Learn more about design systems

Just getting started? We’ve collected some of our favorite articles and resources on creating design systems.