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

What is Framer? Join the Community
Return to index
Brent Riddell
Posted Jun 28 - Read on Facebook

I had a quick thought and tried it out and wanted to share it and see what people think :)

Basically I was trying out an idea to draw components in the 'design' tab and then use them in 'code' tab ... why? so that way you can edit/maintain styles for components in a more familiar visual way (like figma/sketch) and then modify their content or 'overrides' with code, seems like a cool idea? I know you can basically do this all in code with custom classes etc but I was inspired by the possibilities of the new design environment :)

Note: you have to download the prototype into framer to see what I mean though (in the browser its not really doing anything)

Drawbacks so far seem to be: the textLayers created in design don't seem to work like textLayers created in code? and the constraints set from design do seem to be inherited when imported with code. But maybe I'm missing something? someone smarter out there can probably get this to work :) or maybe the fine folks at Framer are already developing something like this already ;)

thanks! and shout out to the Framer team for making such a cool product! keep up the good work :)

7 Comments

Brent Riddell

from this small test I can see the html content on the design created textLayer is styled html, whereas the code created layer is something else? https://framer.cloud/RwiMA

Brent Riddell

so you could target the contents of this in the designText layer I guess to achieve the intended output :) <span data-text="true">Design text</span>

Jonas Treub

We are planning on making the text layer compatible with the text from the design mode. In the meantime you can replace text like this, although its a bit of a hack:
textTarget.html = textTarget.html.replace("original", "new text")

Nathan Wright

This is great! thanks for posting it up :)

Andrew Nalband

Wow, this is actually really interesting. I can imagine a much larger library of design "components" for an app. It's like having a stylesheet that you got to design in a design tool, and you can still edit the components in your design tool to update your app. Powerful.

Andrew Nalband

This is pretty sweet because you can pull the preview window out of the code tab, and it updates with every save.

Sigurd Tapio Mannsåker

*fill colors

Read the entire post on Facebook