{"id":13715129,"url":"https://github.com/mattsjohnston/stitch","last_synced_at":"2026-02-09T16:18:54.412Z","repository":{"id":148981356,"uuid":"46036733","full_name":"mattsjohnston/Stitch","owner":"mattsjohnston","description":"Prototype in Framer without coding","archived":false,"fork":false,"pushed_at":"2015-11-12T10:33:43.000Z","size":0,"stargazers_count":143,"open_issues_count":0,"forks_count":1,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-14T03:34:24.353Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattsjohnston.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-12T07:28:57.000Z","updated_at":"2023-05-07T10:45:37.000Z","dependencies_parsed_at":"2023-05-11T18:00:45.039Z","dependency_job_id":null,"html_url":"https://github.com/mattsjohnston/Stitch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattsjohnston%2FStitch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattsjohnston%2FStitch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattsjohnston%2FStitch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattsjohnston%2FStitch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattsjohnston","download_url":"https://codeload.github.com/mattsjohnston/Stitch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806435,"owners_count":21807202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:54.469Z","updated_at":"2026-02-09T16:18:54.389Z","avatar_url":"https://github.com/mattsjohnston.png","language":"JavaScript","funding_links":[],"categories":["Other"],"sub_categories":[],"readme":"# Stitch\n\nStitch is a lightweight framework for adding interaction to your Framer prototypes directly from your Sketch designs. [View Demo](http://share.framerjs.com/14cxtooumuwv/)\n\nUse the built-in components, or build your own on top of Stitch and share them with the community!\n\nThis is an early beta - feedback welcome. \n\n## Demo\nCheckout the [Framer playground prototype](http://share.framerjs.com/14cxtooumuwv/) - all of the interaction was added automatically with Stitch using only folder names from Sketch.\n\n[![Sketch Playground](/Stitch Playground.png)](http://share.framerjs.com/14cxtooumuwv/)\n\nYou can download all the source files below:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/mattsjohnston/stitch/archive/master.zip\"\u003e\u003cimg src=\"Download Playground.png\" width=\"431\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\n### Adding Stitch to your Prototype\nAdd `stitch.coffee` to the modules directory of your Framer prototype.\n\nImport Stitch:\n```Coffeescript\nStitch = require('stitch').Stitch\n```\n\nInstantiate Stitch on your Sketch/Photoshop layers:\n```Coffeescript\nnew Stitch layers\n```\n\n### Triggering Stitch Components\nTriggering Stitch components is done through the naming of your folders in Sketch.\n\n```\nlayerName___componentName__arg1_arg1Value__arg2_arg2Value...\n```\n\nSo, in order to make one of your folders scrollable, all you have to do is add `___scroll` to your layer name:\n\n```\nmainLayer___scroll\n```\n\nIf your mainLayer is taller or wider than the prototype device, Stitch will automatically add scrolling functionality within the bounds of the device.\n\nIf you want explicitly set the height of the scrollable container, you can do so with arguments:\n\n```\nmainLayer___scroll__height_200\n```\n\nIf you want to pass a parameter with the boolean value `true`, either include true as the value, or leave the value out:\n\n```\nmainLayer___scroll__pagination\n```\nThis would instantiate the scroll component with the parameters object `{ pagination: true }`\n\n## Adding Components\nAt the most basic level, a component consists simply of a trigger word and a function.\n\nFor example, let's create a new component for making toggles. Create a new file in your prototype's modules directory called `stitch.toggle.coffee`.\n\nAt the bare minimum, this file needs to export your component:\n\n```Coffeescript\nexports.toggle = (layer, name, layers, params) -\u003e\n  # do your magic here\n```\n\nLet's first pretend you have a folder in your Sketch document named `myToggle___toggle__start_on`.\n\nWhen your component is called by Stitch, it will pass a series of arguments:\n\n#### layer\nThis is the layer that triggered the component, or in our case, `myToggle___toggle__start_on`.\n\n#### name\nThis is the root name of the layer, without the component triggers, or in our case, `myToggle`.\n\n#### layers\nThis contains all the layers that were passed to the Stitch instance. In most cases this would refer to your entire Sketch document.\n\n#### params\nThis is an object of all the parameters set by the folder name in Sketch. In our case, this would return:\n```\n{\n  start: on\n}\n```\n\n## Components\n\n### Scroll\nUse the [Stitch Sample](/Stitch Sample.sketch) Sketch file as a guide. More documentation to come.\n- Vertical and horizontal scrolling\n- Paginate sub-folders\n- Pagination indicators\n- Reference the full-length content from another artboard\n\n## Authors\nMatt Johnston - [@mattsjohnston](https://twitter.com/mattsjohnston)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattsjohnston%2Fstitch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattsjohnston%2Fstitch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattsjohnston%2Fstitch/lists"}