Learn Design System

  • Introduction
  • Inputs
  • Utils








Welcome to the Learn Design System docs. The Learn Design System is a set of components designed to get you started prototyping with Framer X.

On this page, you’ll find information on each of the components included in the Learn Design System. This page also includes information on colors, inputs and patterns of use.


You can install the Learn Design System package through the Framer X Store.

  1. Open a Framer X project.
  2. Click the Store tab to open the Framer X Store.
  3. Search for "Learn".
  4. Click on the Learn Design System link.
  5. Click the Install button.
  6. When the install completes, open the components list in your project to see all of the package's components.

Source and Examples

The Learn Design System is open source. You can find source files for the Learn Design System on its Github repository in the Learn folder. The repository also includes several examples in the Projects folder.

  1. Visit the Github repository.
  2. Click the green Download button.
  3. Unzip the download and browse the files.


Visit our Spectrum channel to discuss projects created with the Learn Design System, connect with other users or find help with your projects.

If you spot any errors in the package or in these docs, or if you would like to contribute to the project, please let me know at steve@framer.com, in the Spectrum channel, or on Twitter @steveruizok.