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

What is Framer? Join the Community
Return to index
Arron J Hunt
Posted Oct 14 - Read on Facebook

So I've spent a little bit of time today playing with xcode-like constraints. If you've ever used interface builder in Xcode this should be familiar to you. Notice how layerA doesn't have a width, height, x, or y. We use constraints to define them.

I don't know, would anyone find this useful? I added an addConstraint() function to the layer class and built functions to toggle the guides on and off.

13 Comments

Callil Capuozzo

I'd love to try this out!

Mike Johnson

Definately useful, though verbose. Something like layerA.constraints = { top: 50, left: 20 } might be easier to use.

Or even layerA = new Layer
superLayer: view
top: 50
left: 20
right: 20
bottom: 50

Arron J Hunt

Mike for sure. I was mimicking the xcode syntax though because I wanted to see how closely I could match it. You also need to define which layer the constraints are between. I can have two subLayers and match the right side of layerA to be 10px away from the left side of layerB.

Or, more simply, constraints aren't just between a superLayer and a subLayer. I can also have the top and bottom constraints connect to the superLayer, and the left and right constraints connect to other layers inside the superLayer

Mike Feldstein

Nice!

Mike Johnson

Arron J Hunt That's right, I was only thinking of superlayer, which still would be useful sometimes. Heck, I'd even love to have 'display: flex' and 'flex: 1' available... :)

Josh Puckett

<3

Arron J Hunt

Mike could be easy to build a flex function :)

Jordan Robert Dobson

IMO constraints based layout is the best kind of layout.

Javier Chávarri

Hey Arron J Hunt I was reading this article just yesterday about constraints. I would be very happy to help with this. Maybe we could open a PR on github?
http://iamralpht.github.io/constraints/

Kevin Cannon

This is very useful. Are you maming a library out of it?

Dennis Kerzig

That could be a massive time-saver when it comes to building prototypes for landscape and portrait :) An automatic transition when the viewport changes should be no problem, right? Keep on!

Dennis Kerzig

OH MAN. Is there any way to see this in combined along with https://github.com/bouchenoiremarc/Sketch-Constraints to get constraints automatically after import

Koen Bok

Very cool. We need something like this built into Framer. I use a studs/struts myself: http://framergroup.com/posts/652055731588168.html

But I'd love to see some experimentation with Slalom.

Read the entire post on Facebook