A Framer module for creating reusable components (symbols) with shared states and events, without writing a class.
Framer Symbols is a module for Framer that allows users to create reusable UI components called symbols. It solves the problem of manually managing duplicate layers and states by enabling designers to define templates, shared states, and events that automatically apply to all instances, streamlining the prototyping workflow.
Designers and developers using Framer for interactive prototyping who need to maintain consistency across UI elements and reduce repetitive code.
It provides a simple, code-light way to create reusable components in Framer, with built-in support for shared states and events, saving time and ensuring design consistency without requiring deep programming knowledge.
Create symbols in Framer
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Changes made in Framer's Design mode automatically propagate to all symbol instances, eliminating manual updates—evident from the demo where editing templates reflects in code.
Allows defining common interactive states and event handlers once, applying them across all instances, as shown in the examples for buttons with hover and tap states.
Enables reusable components without writing complex classes, leveraging Framer's visual tools, highlighted by the simple Symbol(template, states, events) API.
Supports adding unique states to individual instances via addSymbolState, providing flexibility without breaking consistency, as demonstrated in the specific states example.
As a third-party module, it carries risks of breaking changes and lacks official support, admitted in the disclaimer about API changes and being a gap-filler.
The TODO list shows 'Discover nested symbols' as pending, restricting complex component hierarchies and reuse in advanced prototypes.
Requires CoffeeScript knowledge for setup and customization, which may alienate designers unfamiliar with coding, as seen in the manual installation and usage examples.