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
	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
	example-webapp.framer A non-linear multi-screen webapp built using Casing/Framer
	example-tictactoe.framer A Casing/Framer version of the popular React Tutorial

⃝ Components

✕ ⃝ - Component	Description
? Date Picker	FrmrDatePicker.coffee A highly customisable 'real' calendar component for Framer Tutorial will be made available soon
? Drop Down	FrmrDropdown.coffee A dropdown menu built with real data in mind. Currently styled with inline CSS
? Text Inputs	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