Quantum Design Docs
English (EN)
English (EN)
  • Introduction
  • Overview
    • Methodology definition
    • How to use Quantum Design
    • Tokens
  • Tokens layers
    • Global Tokens
    • System Tokens
  • Components
    • Atoms
    • Molecules
    • Organismos
    • Templates
  • Figma
    • Figma variables
    • Creating new components
  • Typography
    • Change typography
    • Scalability
    • Edit scale in Figma variables
Powered by GitBook
On this page
  • Quantum as a methodology
  • Through the Figma starter kit
  • As a library for large projects
  1. Overview

How to use Quantum Design

Quantum Design is a methodology for creating consistent and scalable design systems. You can use Quantum in two ways:

  1. From the theoretical approach to create your own design system.

  2. By downloading our starter pack in Figma to kickstart your project.

Quantum as a methodology

Quantum Design is based on the Atomic Design methodology, where atoms form molecules, molecules form organisms, and organisms form templates. However, before atoms, we have quarks, which, in practice, correspond to tokens. These tokens operate across three layers: Global, System, and Component. You can find the full definition of the methodology at this link: Methodology definition

Through the Figma starter kit

You can download our free starter kit, created with Figma variables. Simply use it by creating the pages needed to present your mockups, and drag the pre-made components from the library. This option is perfect if you're looking for a quick and efficient integration in smaller or more specific projects.

As a library for large projects

Use it for larger projects, like your complete design system. If you're working on a larger project, you can use Quantum Design as your central design system. Download our starter kit, publish it, and then link the file to your project—all through the "Library" panel in Figma.

PreviousMethodology definitionNextTokens

Last updated 3 months ago