Subscribe
Sign in
Superposition
Use the design system you already have
Start new thread
Francisco Presencia

Superposition - Use the design system you already have

by
Superposition is free and works on Windows, Mac & Linux.
Extract colors, typography, spacing, border radii, shadows and motions from sites, and exports them to CSS, SCSS, JavaScript and Adobe XD with a Plugin for XD. Sketch and Figma plugins are coming soon.

Add a comment

Replies

Best
Kilian Valkhof
Maker
Hey everyone, author here. Thanks @fpresencia for hunting! I built Superposition because I think too few people have the access to the benefits that having a design system gives them, either due to time and budget constraints, or due to (client) design maturity. I want to make it possible for everyone to enjoy the benefits that a design system gives them, like speed and consistency. And I'm releasing it for free. Superposition is the first step towards this vision: A super easy way to use the design tokens that are already part of a website. You can export them to code or use them in our Adobe XD plugin, with more coming soon. The end goal is for Superposition to take you from website to design system in a single app.
Rik Schennink
This will sure come in handy! I like how it's visually similar to your other product Polypane, creates a nice family of products. I'm super impressed with the CSS bezier view. 👏
Kilian Valkhof
Maker
@rikschennink Thanks Rik! Parsing the custom beziers correctly was definitely a ton of work but I think it paid off nicely.
Karen Sarkissian
great tool ! but extensions don't work for me )
Kilian Valkhof
Maker
@karen_sarkissian Which OS + browser are you using?
Karen Sarkissian
@kilianvalkhof Windows 10 , Firefox Developer Edition
Kilian Valkhof
Maker
@karen_sarkissian There'll be an update of the extensions, 1.0.1, out soon that should fix it!
Karen Sarkissian
@kilianvalkhof ok, thanks
UXCrush.com
This is cool! Looking forward to the Figma version!
Kilian Valkhof
Maker
@figmacrush Working on it! 💪️
Graeme
this is awesome, i found it really useful to grab vertical and horizontal spacing, and the code export is amazing! great to try out on different sites for inspiration too
Shun Yamada
It's really useful and helpful. I always check these information from web inspector...
ɯoʇ tom
doesn't seem to work unless you put in https:// ? i.e versa.agency doesn't work?
Kilian Valkhof
Maker
@tomeglover I'll work on improving the url resolving (regular browser actually do a ton of work there that you don't realise) but for now, yeah you'll need to add https:// That's a very cool site by the way! If you use the browser helper for Chrome or Firefox, you don't need to think about it. You can find the links to that Chrome: https://chrome.google.com/websto... Firefox: https://addons.mozilla.org/en-US...
Corey Putney
@kilianvalkhof Just wanted to let you know, "Get App" button on website doesn't work for me using Chrome or Safari. Also, can't get the extension to do anything on Chrome...Looking forward to getting to use the tool!
Kilian Valkhof
Maker
@corey_putney Hi Corey! Maybe you're blocking Mailchimp in them? That's what I use. Did you manage to get it?
Addison Taylor
Looks and works perfectly, essential tool for saving time when doing design work. Does seem to be crashing on certain sites though, then it continually crashes on open if you don't change the url fast enough :(
Kilian Valkhof
Maker
@addison_taylor Can you share which site? via DM is fine too!