{"id":13715056,"url":"https://github.com/der-lukas/framer-Symbols","last_synced_at":"2025-05-07T03:31:11.769Z","repository":{"id":93526341,"uuid":"99150106","full_name":"der-lukas/framer-Symbols","owner":"der-lukas","description":"Create symbols in Framer","archived":false,"fork":false,"pushed_at":"2018-07-24T11:04:37.000Z","size":2736,"stargazers_count":117,"open_issues_count":3,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-14T03:34:22.029Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/der-lukas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-02T18:44:22.000Z","updated_at":"2022-01-14T20:06:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"b745822f-6972-492d-a448-13deff7f27e5","html_url":"https://github.com/der-lukas/framer-Symbols","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/der-lukas%2Fframer-Symbols","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/der-lukas%2Fframer-Symbols/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/der-lukas%2Fframer-Symbols/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/der-lukas%2Fframer-Symbols/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/der-lukas","download_url":"https://codeload.github.com/der-lukas/framer-Symbols/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806423,"owners_count":21807200,"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:53.420Z","updated_at":"2025-05-07T03:31:11.760Z","avatar_url":"https://github.com/der-lukas.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Framer Symbols\nCreate symbols[*](#-pssst-it-actually-is-a-class) in Framer\n\n![framerdemo](https://cdn.pbrd.co/images/HnRvNeh.gif)\n\n----------\n\n## Description\nEasily create reusable components in Framer, without the hassle of actually writing a class.\n\n**Check out some demos:**\n\n[Form Element Symbols](https://framer.cloud/MjZgp) |\n[iOS Control Center](https://framer.cloud/Xlgod/) | [Intro Animation](https://framer.cloud/ZNUgv/) | [Common Event Buttons](https://framer.cloud/IpDbI)\n\n*:exclamation: To always load the latest version of the module, these demos use [Marc Krenn's \"testDrive\"-snippet](https://github.com/marckrenn/framer-testDrive). This causes some flickering and warnings for some seconds, when opening the demos. :exclamation:*\n\n## Installation\n\n### Automatic Installation with [Framer Modules](https://www.framermodules.com/)\n\n\u003ca href='https://open.framermodules.com/Symbols'\u003e\n    \u003cimg alt='Install with Framer Modules'\n    src='https://www.framermodules.com/assets/badge@2x.png' width='160' height='40' /\u003e\n\u003c/a\u003e\n\n### Manual Installation\n\n**Step 1** Download and copy `Symbol.coffee` in your project's `/modules`-folder.\n\n**Step 2** Require the `Symbol`-module in your project\n\n`{Symbol} = require 'Symbol'`\n\n## Usage\n\n### Create a new Symbol\n\n`SymbolName = Symbol(template, states, events)`\n\nThe Symbol-class has the following parameters:\n\nParameter | Type | Description\n-------- | ---- | -------\n`template` | layer | `required` This is the layer, that will be used as default-template\n`states` | Object | `optional` A states-object, that will be applied to every instance [Read More](#symbol-states)\n`events` | Object | `optional` An events-object, that will be applied to every instance [Read More](#symbol-events)\n\n##### Example\nLet's create a `Button`-Symbol in its simplest form as an example:\n\n``` coffeescript\n#Require the module\n{Symbol} = require 'Symbol'\n\n# Initialize your symbol\nButton = Symbol(button_default)\n\n# Create buttonInstance\nbuttonInstance = new Button\n  x: Align.center\n  y: Align.center\n  ...\n```\n\n... now you have your `Button`-symbol ready to use and you can go back in **Design-Mode**, edit away and the changes will reflect in all of your instances in Code!\n\n## Symbol States\n![framerdemo](https://cdn.pbrd.co/images/HnRI6Qe.png)\n\nThe module also gives you the ability to create different states for your symbol in **Design-Mode** and apply those in Code.\n\nYou can either apply **common** or **specific** states.\n\n### Common States\nCommon states apply to **ALL** symbol-instances.\nThey are being applied on initialization of the Symbol.\n\nFor each state you can define following properties:\n\nProperty | Type | Description\n-------- | ---- | -------\n`template` | layer | `optional` The template that should be used as state\n`properties` | Object | `optional` You can supply props that should change for this state\n`animationOptions` | Object | `optional` The applied animation options [Framer Docs](https://framer.com/docs/#layer.states)\n\n##### Example\n\n```coffeescript\n#Require the module\n{Symbol} = require 'Symbol'\n\n# Create common states\ncommonStates =\n  disabled:\n    template: button_disabled\n    animationOptions:\n      curve: Spring(damping: 1)\n      time: 0.7\n  active:\n    template: button_active\n    animationOptions:\n      curve: Bezier.easeInOut\n      time: 1\n\n# Initialize your symbol\nButton = Symbol(button_default, commonStates)\n\n# Create buttonInstanceOne\nbuttonInstanceOne = new Button\n  x: Align.center\n  y: 100\n  ...\n\n# Create buttonInstanceTwo\nbuttonInstanceTwo = new Button\n  x: Align.center\n  y: 200\n  ...\n```\n\n... now both `buttonInstanceOne` and `buttonInstanceTwo` have the 3 states `default, disabled` and `active`.\n\n\nThe `animationOptions` don't need to be supplied for each commonState, but can also be set as default for all states like this:\n\n```coffeescript\n...\n# Create common states\ncommonStates =\n  animationOptions:\n    curve: Spring(damping: 1)\n    time: 0.7\n  disabled:\n    template: button_disabled\n  active:\n    template: button_active\n...\n```\n\n### Specific States\nSpecific states apply to a specific instance :scream_cat:\n\nSpecific states are being applied with `layer.addSymbolState(name, template, animationOptions = false)`\n\n##### Example\n```coffeescript\n#Require the module\n{Symbol} = require 'Symbol'\n\n# Initialize your symbol\nButton = Symbol(button_default, commonStates)\n\n# Create buttonInstanceOne\nbuttonInstanceOne = new Button\n  x: Align.center\n  y: 100\n  ...\n\n# Create buttonInstanceTwo\nbuttonInstanceTwo = new Button\n  x: Align.center\n  y: 200\n  ...\n\nbuttonInstanceTwo.addSymbolState('specific', button_specific)\n```\n\n... now `buttonInstanceOne` has the state `default` and `buttonInstanceTwo` has the 2 states `default` and `specific`.\n\n[Buttons Prototype](https://framer.cloud/qjNTq/)\n\n## Symbol Events\nYou can apply common events to **ALL** symbol-instances.\nThey are being applied on initialization of the Symbol.\n\nDefine the commonStates-object like so:\n\n```coffeescript\ncommonEventsObject =\n  eventName: -\u003e yourEvent\n```\n\nYou can also supply events to descendant-layers of your symbol, like so:\n\n```coffeescript\ncommonEventsObject =\n  eventName: -\u003e yourEvent\n  descendantName:\n    eventName: -\u003e yourEvent\n```\n\n##### Example\n```coffeescript\n...\n\n# Create common events\ncommonEvents =\n  MouseOver: -\u003e @.animate \"hover\"\n  MouseOut: -\u003e @.animate \"default\"\n  TapStart: -\u003e @.animate \"active\"\n  TapEnd: -\u003e @.animate \"hover\"\n  descendantName:\n    Tap: -\u003e print \"Foo\"\n\n# Initialize your symbol\nButton = Symbol(button_default, commonStates, commonEvents)\n\n...\n```\n\nCheck out [this demo](https://framer.cloud/IpDbI) or visit the [Framer Docs for Events](https://framer.com/docs/#events.events)\n\n## Working with text\nAs usual in Framer, text that is different between instances or changes its content between states, should be declared as `template`.\n\nText that stays the same for all instances and states, should be a normal `text`.\n\n[Framer Docs for textLayer](https://framer.com/docs/#text.textlayer)\n\n## Under the hood\n\n_For your better understanding and if something shouldn't work as expected, I want to give you a little insight into what the module does._\n\n### tl;dr\nThe module basically animates between the `default` states of different layers.\n\n### ...a little more detailed\nThe module creates a new layerType that extends `Layer`.\nThis layer basically makes a copy of all the layers of the supplied symbol-template.\n\nWhen you supply templates-layer for a new `symbolState`, the module applies the the target-layers default-state properties as properties for the new state you are creating.\nThis happens recursive for all descendants of your symbol, so that every child-layer of a symbol has the same states as the parent.\n\nOn `StateSwitchStart`-event of the symbol, the module applies the stateSwitch to all descendants recursively, so that all states stay in sync.\n\n## Tutorials\nChris Slowik [(@chrislowik)](https://twitter.com/chrisslowik) created a series of tutorials on designers.how, check them out here:\nhttps://designers.how/episodes/design-based-symbols-in-framer\n\n----------\n## Disclaimer\nThis module is meant to be filling the gap until Framer releases their own implementation of Symbols/Components.\nEven though I try to thoroughly test everything before I release new features, there's always a risk of me breaking stuff or API changes.\n\nIf you have any problems you run into or feature requests, feel free to open an issue or (even better) create a pull-request! \u003c3\n\n## Credits\nThe code is based on the earlier exploration of [Andreas Wahlström's createClass-module](https://github.com/awt2542/createClass-for-Framer) - so thanks for that! :tada:\n\n## Google Analytics\nOut of curiosity I've integrated Google Analytics into the project to get an idea of how many people are using the module.\n\nIf you don't feel comfortable showing up in the stats, simply remove `useGA(true)` inside `Symbol.coffee` file.\n\n----------\n#### TODO\n\n- [x] Add textLayer animations\n- [x] Add SVGLayer support\n- [x] Fix layer-nesting\n- [x] Common Symbol states\n- [x] Common Symbol events\n- [x] Improve README\n- [ ] Discover support for reuse in other projects\n- [ ] Discover nested symbols\n\n----------\n##### * Pssst! It actually is a class...\n...\"Symbol\" is just a synonym taken from Sketch...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fder-lukas%2Fframer-Symbols","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fder-lukas%2Fframer-Symbols","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fder-lukas%2Fframer-Symbols/lists"}