A component library for Framer.

@steveruizok

Accellerate your designs
with pre-built components.


Create custom themes
to match your product.


Build even further
with your own components.

Introduction

Framework is a component library module for Framer, designed to reduce complexity and increase speed for prototyping. The library provides ready solutions to many individual elements, such as buttons, toggles or text inputs, while also introducing larger components, such as FormComponent, for handling more complex behavior. Framework also contains a robust system for managing content across very large prototypes.

Installation

Clone or download this repository. The repo contains three Framer projects:

• docs.framer, interactive documentation for each Framework component
• example.framer, an example project with annotations
• quickstart.framer., a blank canvas for starting new projects

To begin a new project, create a copy of the quickstart.framer project.

Usage

Framework is a complex project, and its documentation (like the project itself) remains a work in progress.

• Interactive documentation for Framework (built in Framework itself)
• Written documentation on this project's wiki

The basics

Every Framework project will involve a single App instance and one or more View instances.

require "framework"

app = new App


# First View

firstView = new View
    title: "First View"
    key: "0.0.0"

firstView.onLoad ->
    new H3
        parent: @content
        y: 24
        x: Align.center()
        text: "First View"
        
    btn = new Button
        parent: @content
        x: Align.center()
        text: "Get Started"
        
    tn.onSelect -> app.showNext(secondView)
        
firstView.onPostload ->
    Utils.stack(@content.children, 16)


# Second View

secondView = new View
    title: "Second View"
    key: "1.0.0"

secondView.onLoad ->
    new H3
        parent: @content
        y: 24
        x: Align.center()
        text: "Second Page"
        
secondView.onPostload ->
    Utils.stack(@content.children, 16)

Live example.

Author's Note

I've been lucky enough to spend the last year designing and prototyping in Framer. Along the way, I built and maintained several component libraries, each acting as a recycling system for the solutions to the problems I'd face in each new project and challenge. Framework is the most mature of these systems.