A UI Framework for Framer. Manages data, components and screens
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example-tictactoe.framer
example-webapp.framer
img
.gitignore
Casing.coffee
FrmrDatePicker.coffee
FrmrDropdown.coffee
FrmrTextInput.coffee
LICENSE
README.md

README.md

Casing - A UI framework for Framer

✕ ⃝

Casing will help you to manage:

  • Components (modular pieces of UI)
  • Screens (sets of components)
  • Data (mutable and immutable information shown in the prototype)

It is system which supports building truly big and complex Framer prototypes using real data.

⃝ Installation

Copy over following files to your PROJECT_NAME.framer/modules/ directory:

  • Casing.coffee - REQUIRED. Contains the entirety of Casing's code
  • FrmrDatePicker.coffee - if you want to use a date-picker in your prototype
  • FrmrDropdown.coffee - if you want to use a drop-down in your prototype
  • FrmrTextInput.coffee - if you want to use a text-input in your prototype

In large prototypes there is a one-to-one mapping with:

⃝ Frames in design mode

⃝ Code modules.

✕ ⃝ - Modules Description
Modules Example If you're new to modules in Framer:

  • Open the Framer directory using a text editor i.e. Visual Studio Code
  • The directory named 'modules' generated on Framer project creation will already contain an example myModule.coffee file.
  • The Casing.coffee file is required in this directory.

⃝ Getting Started

To be added soon...!

⃝ Examples

✕ ⃝ - Example Description
WebApp example example-webapp.framer

A non-linear multi-screen webapp built using Casing/Framer
TicTacToe example example-tictactoe.framer

A Casing/Framer version of the popular React Tutorial



⃝ Components

✕ ⃝ - Component Description
📅 Date Picker

Calendar
FrmrDatePicker.coffee

A highly customisable 'real' calendar component for Framer

Tutorial will be made available soon
👇 Drop Down

Dropdown
FrmrDropdown.coffee

A dropdown menu built with real data in mind.

Currently styled with inline CSS
💬 Text Inputs

Text Input
FrmrTextInput.coffee

A customisable input box

Adapted from Ajimix's input module

⃝ FAQ

✕ How will Framer X impact Casing?

When Framer X is released, Casing ✕ will become open source soon after.

This will likely require:

  • Compiling coffeescript code into ES6
  • Updates to optimise the design tab workflow for Framer X
  • Releasing the components to the component store

The Casing Framework and its components will still be applicable for building big & complex prototypes in Framer X

⃝ Thank You

A warm thank you to Twitter and Oliver Turner for help with the name.

Thank you with all of my heart to everyone at Framer for building such an awesome tool and a supportive community