A lightweight framework for adding interaction to Framer prototypes directly from Sketch designs without coding.
Stitch is a lightweight framework that automatically adds interactive components to Framer prototypes based on Sketch design files. It interprets folder names in Sketch to generate scrolling, toggles, and other interactions without requiring manual coding in Framer, streamlining the transition from static design to interactive prototypes.
UI/UX designers and prototyping teams who use Sketch for design and Framer for prototyping, and want to create interactive prototypes faster without writing code.
Developers choose Stitch because it reduces the friction between design and prototyping, enabling designers to specify interactions directly in Sketch while providing a flexible, extensible component system for developers to build upon.
Prototype in Framer without coding
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Automatically generates interactive components in Framer based on Sketch folder names, eliminating manual coding—demonstrated by triggering scrolling with '___scroll' in layer names.
Allows developers to build and share custom interaction components via CoffeeScript modules, enabling flexibility beyond built-in features like scroll and toggles.
Supports passing arguments through folder names (e.g., '__height_200' for scroll height), making components configurable directly in Sketch without code changes.
Empowers designers to specify interactions in Sketch, streamlining the transition to high-fidelity Framer prototypes and reducing iteration time.
Tightly coupled to Sketch and Framer, making it incompatible with other popular design or prototyping tools like Figma, limiting team flexibility.
Marked as an early beta with sparse documentation and potential bugs, as noted in the README with 'feedback welcome' and incomplete component docs.
Requires CoffeeScript for custom component development, which may pose a learning curve or integration challenge for teams using modern JavaScript.
Relies on precise folder naming conventions (e.g., 'layerName___componentName__arg_argValue'), which can be error-prone and hard to manage in complex projects.