Simple way to quickly creat Symbol, but...

[yokiijay]

{Symbol} = require "symbols/Symbol"

HamBtn = Symbol(hamBtn_open, animationOptions: time: .6 curve: Spring(.6) change: template: hamBtn_close , Tap: -> @stateCycle()

)

hamBtn = new HamBtn x: Align.center y: Align.center

I figured this is the simplest way to create Symbol, and the idea is 100% same as author's demo

But.... I think it's not a Symbol , rather a Transition Tool, because targets' properties can't be modified by coding, what if I wanna random every Instances' image, number, even JSON data to fill random string ? what if I wanna change every each elements' animationOptions inside an Instance ----Here I have a button, and an arrow inside button, when Tap, button scaleUp and the arrow transition with rotation, but i don't wish the arrow have the same animationOptions.

[der-lukas]

Sure you can modify each instance! You could do the setup as you did in your example and in a loop you can modify each instance and fill it with your data!

In this example here I modify an instance of a Button Symbol: https://framer.cloud/IpDbI

You can access descendant layers with dot-notation!

[yokiijay]

https://framer.cloud/PVWDm/ Inspiring!! thx I've figured it out last night, I may not very clearing with the docs my mistake. I made this demo very quickly, couldn't be faster without your module, now I'm trying to use your modules to create modules, see if it's working.

[yokiijay]

{Symbol} = require "symbols/Symbol"

Slider = Symbol(slider)

sliderInstance = new Slider knob: draggable: true draggable.vertical: false

New issue problem, the last line codes is not working, how could I enable " knob.draggable.vertical " inside this instance ? please help.... 👍

[yokiijay]

{Symbol} = require "symbols/Symbol"

Slider = Symbol(slider)

sliderInstance = new Slider knob: draggable: true draggable.vertical: false

New issue problem, the last line codes is not working, how could I enable " knob.draggable.vertical " inside this instance ? please help.... 👍

{Symbol} = require 'Symbol'

Button = Symbol(button)

class myButton extends Button constructor: (options={}) -> options.draggable = true super options @.draggable.vertical = false

new myButton label: text: 'Hello'

I created another class to extends Button class, then modified the properties '@.draggable.vertical = false' under super, so I could use myButton instance to make reusable things, when I really learned your module, have to say it's really a very powerful stuff, so thank you. BTW, I just learn framer for days, but framerX seems easier to design prototype because it turn design+coding into design components and still can be modified with codes and, but framerX turned base on React.js which required more time to learn and it's very expensive for me, I need your suggestion if I need try framerX, I'm appreciate.

[der-lukas]

Glad you like it! 🙌 Well, I've been using Framer for about 2 years now and am pretty good at building everything I need to validate with it. I've also used Framer X since it's been in Beta and I have to say that it's extremely powerful, but it's not ready to replace "classic" Framer yet, since it doesn't have all the features yet! But I believe that in half a year or so it will be the only tool I'll use in my whole design process, so I recommend giving it a try!