Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattsjohnston/stitch
Prototype in Framer without coding
https://github.com/mattsjohnston/stitch
Last synced: about 2 months ago
JSON representation
Prototype in Framer without coding
- Host: GitHub
- URL: https://github.com/mattsjohnston/stitch
- Owner: mattsjohnston
- Created: 2015-11-12T07:28:57.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-12T10:33:43.000Z (about 9 years ago)
- Last Synced: 2024-08-04T00:10:58.297Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 143
- Watchers: 9
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Stitch - Lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs. (Other)
README
# Stitch
Stitch is a lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs. [View Demo](http://share.framerjs.com/14cxtooumuwv/)
Use the built-in components, or build your own on top of Stitch and share them with the community!
This is an early beta - feedback welcome.
## Demo
Checkout the [Framer playground prototype](http://share.framerjs.com/14cxtooumuwv/) - all of the interaction was added automatically with Stitch using only folder names from Sketch.
[](http://share.framerjs.com/14cxtooumuwv/)
You can download all the source files below:
## Usage
### Adding Stitch to your Prototype
Add `stitch.coffee` to the modules directory of your Framer prototype.
Import Stitch:
```Coffeescript
Stitch = require('stitch').Stitch
```
Instantiate Stitch on your Sketch/Photoshop layers:
```Coffeescript
new Stitch layers
```
### Triggering Stitch Components
Triggering Stitch components is done through the naming of your folders in Sketch.
```
layerName___componentName__arg1_arg1Value__arg2_arg2Value...
```
So, in order to make one of your folders scrollable, all you have to do is add `___scroll` to your layer name:
```
mainLayer___scroll
```
If your mainLayer is taller or wider than the prototype device, Stitch will automatically add scrolling functionality within the bounds of the device.
If you want explicitly set the height of the scrollable container, you can do so with arguments:
```
mainLayer___scroll__height_200
```
If you want to pass a parameter with the boolean value `true`, either include true as the value, or leave the value out:
```
mainLayer___scroll__pagination
```
This would instantiate the scroll component with the parameters object `{ pagination: true }`
## Adding Components
At the most basic level, a component consists simply of a trigger word and a function.
For example, let's create a new component for making toggles. Create a new file in your prototype's modules directory called `stitch.toggle.coffee`.
At the bare minimum, this file needs to export your component:
```Coffeescript
exports.toggle = (layer, name, layers, params) ->
# do your magic here
```
Let's first pretend you have a folder in your Sketch document named `myToggle___toggle__start_on`.
When your component is called by Stitch, it will pass a series of arguments:
#### layer
This is the layer that triggered the component, or in our case, `myToggle___toggle__start_on`.
#### name
This is the root name of the layer, without the component triggers, or in our case, `myToggle`.
#### layers
This contains all the layers that were passed to the Stitch instance. In most cases this would refer to your entire Sketch document.
#### params
This is an object of all the parameters set by the folder name in Sketch. In our case, this would return:
```
{
start: on
}
```
## Components
### Scroll
Use the [Stitch Sample](/Stitch Sample.sketch) Sketch file as a guide. More documentation to come.
- Vertical and horizontal scrolling
- Paginate sub-folders
- Pagination indicators
- Reference the full-length content from another artboard
## Authors
Matt Johnston - [@mattsjohnston](https://twitter.com/mattsjohnston)