This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Bhaskar Ravi
Posted Jul 27 - Read on Facebook

I know this has been suggested a bit recently - it would be great to more easily create components in design mode, and port them over to code mode.

Instead of using design mode purely like Sketch and then animating, to be able to create your base state and then push data through in code mode would be tremendously useful - seriously a game changer allowing us to rapidly proto with data to create a pseudo realistic experience :)

3 Comments

Bhaskar Ravi

Just as a guide for those looking to use design mode in conjunction with a more robust / programatic heavy data set:

Best way to do this right now IMO is to create a pseudo component in design mode, and then programmatically re create the component, directly assigning the design mode component's individual properties in the process. You can always simply hide the original design mode component.

I.e. create a layer of dimensions X/Y in design mode. Then recreate the layer in code (without copying directly) but tie its dimensions directly to the layers located in design mode.

That way if you ever want to change anything, you can easily do it in design mode and it should dynamically change all the new layers created in code. Much better than actually copying the layer in design mode - as then you have to deal with clean up!

Bhaskar Ravi

Attached is an example of using design and code together. It's really quite simple - all I'm doing is setting constratings in the design view and then referencing them within code view, but it basically lets you setup a component in design.

The nice thing here is that you can easily change the design view, and auto update your prototype, instead of having to change everything in code, similar to interface builder.

Sorry for the sloppy code :)

https://framer.cloud/fgNmN

Tim Child

I agree! Or at least have a way of exploring all the attributes of the design mode layers.

Read the entire post on Facebook