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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Dec 26 - Read on Facebook

Experimenting with a positioning layout helper. Might be useful for someone: http://share.framerjs.com/oin6ojb4ghcz/

5 Comments

Arron J Hunt

Awesome :) I could see this being useful, especially for creating list layouts.

What if I had layerA at the top, layerB at the bottom, and wanted to center them along the x axis relative to their y positions?

Jordan Robert Dobson

Ooooh. Anything that gets us closer to constraints based layout is a good thing.

Should this maybe be "pin" instead of "place"?

Koen Bok

Background: this is just a study. It is very hard to consolidate dynamic positioning and sizing rules in beautiful way. Josh wrote a nice article about it: https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3#.1e3tpytn1

Kevin Cannon

What about using the same methods as iOS or Android? Could that work?
https://gridstylesheets.org/

Tisho Georgiev

Interesting, I already find Framer's positioning API expressive enough for this sort of thing. Most of the implementations you've given can be replaced by much shorter (and IMO clearer in intent) alternatives. Align horizontally is `layerA.midX = layerB.midX`. Align vertically is `layerA.midY = layerB.midY`. Place above, which is confusing in a world where the Z axis exists, can be `layerA.maxY = layerB.y`. In general, I find that describing that two points should match up by using plain old equality leaves a lot less room for ambiguity.

Read the entire post on Facebook