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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Aug 06 - Read on Facebook

Where would I find best practice documentation on creating layers using HTML vs PSD/Sketch?

For example I want to bring in some components I've already built in a style guide of common elements. Is there a way to add those to the document and then reference them when creating a new Layer?

3 Comments

Jordan Robert Dobson

The only resources I can find are:

http://framerjs.com/learn.html#basics under STYLING.

http://examples.framerjs.com/#event-basics.framer which isn't the best

http://framerjs.com/docs.html#layers&style Which isn't much

Has anyone seen any blog posts or code where this is being done?

Tisho Georgiev

I've done it. I used mustache templates and wrote a wrapper to create new layers based on the templates, so you could do:

dropdown = new Layer template: 'elements/dropdown', width: 200, ...

It's tricky, though, because sometimes it messes up the styles of sublayers, and event handling gets a little bit more complex if you need individual elements within the layer to respond differently to different events. Styling with CSS is also pretty easy, but again, you have to make sure you're not overriding Framer's styles.

Referencing existing elements otherwise should be pretty easy:

dropdown = new Layer width: 200, height: 60
dropdown.html = document.getElementById('dropdown').outerHTML
dropdown.classList.add('dropdown')

Jordan Robert Dobson

Awesome. I'm more than okay handling bugs. Just looking for a good place to start! Thanks!

Read the entire post on Facebook