Learn Design System

Steve Ruiz

Learn Design System

Learn is an open source design system for Framer X, created to support workshops and tutorials. Every component in the package is built with Framer’s API, so you can use the package source as a reference for doing things in Framer X. Made with 🦋 by @steveruizok.

Read the docs!

Download the source & examples!


To learn more about using this package, see the documentation.


Templates are stored as Design Components. To use them:

  • Create an instance of the Template
  • Right click the instance and select Detatch from Master

You can find additional templates in the Templates folder at the bottom of the components list.


The package includes a number of code components that you can use on the canvas and in your code. All of the components have additional props that may only be set through overrides or JSX.

To use the package’s components in your code, import them from "@framer/steveruizok.education/code”.

Learn more and see examples in the docs.


The package’s Lists are helpers for creating scrolling stacks of content. They are designed to be used with overrides. Learn more


The package also includes shared colors. You can use the same import to pull the shared colors from the original package. Learn more.


This package also includes several helper utilities for common tasks in your code.


September 1, 2019

  • Removes background colors from List

For earlier changes, see here