Learn Design System

Steve Ruiz

Open in Framer X

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!

Usage

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

Templates

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.

Components

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.

Lists

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

Colors

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

Utils

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

Changelog

September 1, 2019

  • Removes background colors from List

For earlier changes, see here

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree