What is Superposition?
Superposition is a design system generator that extracts design tokens from existing websites and applications. Design tokens represent the smallest parts of a design system, including colors, typography, and spacing. The tool enables users to maintain consistency across different parts of their website, app, or multiple projects by leveraging the design system already present in their production code.
The application exports extracted design tokens to various formats such as CSS, Scss, JavaScript, Figma, and Adobe XD, with additional exports for Sketch, Swift, and Android in development. Users can click on any token from the overview to copy its CSS value to the clipboard for immediate use. Superposition also plans to introduce a paid extension for creating, documenting, and exporting complete design systems with components and usage instructions.
Features
- Design Token Extraction: Automatically extracts colors, typography, and spacing from websites
- Multi-Format Export: Exports to CSS, Scss, JavaScript, Figma, and Adobe XD
- Clipboard Integration: Click tokens to copy CSS values for immediate use
- Cross-Platform Compatibility: Available for MacOS, Windows, and Linux
- Design System Documentation: Planned feature for creating and documenting design systems with components
Use Cases
- Extracting design tokens from existing websites for design system creation
- Maintaining design consistency across web and app projects
- Exporting design tokens to development and design tools like Figma and Adobe XD
- Creating documented design systems for team collaboration
- Copying CSS values directly from extracted design tokens for rapid prototyping
