Awesome
Casing - A UI framework for Framer<br>
✕ ⃝ <br>
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 codeFrmrDatePicker.coffee- if you want to use a date-picker in your prototypeFrmrDropdown.coffee- if you want to use a drop-down in your prototypeFrmrTextInput.coffee- if you want to use a text-input in your prototype
In large prototypes there is a one-to-one mapping with:<br>
⃝ Frames in design mode
⃝ Code modules.
| ✕ ⃝ - Modules | Description |
|---|---|
 | If you're new to modules in Framer:<br><br><ul><li>Open the Framer directory using a text editor i.e. Visual Studio Code</li><li>The directory named 'modules' generated on Framer project creation will already contain an example myModule.coffee file.</li><li>The Casing.coffee file is required in this directory.</li> |
⃝ Getting Started
To be added soon...!
⃝ Examples
| ✕ ⃝ - Example | Description |
|---|---|
 | example-webapp.framer<br><br>A non-linear multi-screen webapp built using Casing/Framer |
 | example-tictactoe.framer<br><br> A Casing/Framer version of the popular React Tutorial |
<br><br>
⃝ Components
| ✕ ⃝ - Component | Description |
|---|---|
📅 Date Picker<br><br> <br> | FrmrDatePicker.coffee<br><br> A highly customisable 'real' calendar component for Framer<br><br> Tutorial will be made available soon |
👇 Drop Down<br><br> <br> | FrmrDropdown.coffee <br><br> A dropdown menu built with real data in mind.<br><br> Currently styled with inline CSS |
💬 Text Inputs<br><br>  <br> | FrmrTextInput.coffee <br><br> A customisable input box <br><br> 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. <br><br> This will likely require:<br>
<ul><li>Compiling coffeescript code into ES6</li><li>Updates to optimise the design tab workflow for Framer X</li><li>Releasing the components to the component store</li></ul>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.<br><br> Thank you with all of my heart to everyone at Framer for building such an awesome tool and a supportive community