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

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

I'm doing some research on dynamic layout systems for ... things and maybe even a blog post. I made a list of all the interesting approaches I could find, but I'm sure there are many more.

If you know one, feel free to add it. Bonus for a description of why you think it's (not) a good approach. General discussion also welcome.

13 Comments

Koen Bok

cc Josh Thomas Brandon Andrew Andrei Rasmus Pieter Adam

Koen Bok

If you don't really know what this is about, try this great overview by Josh: https://goo.gl/r6Ryja

Andrei Herasimchuk

If you want me to stop by the office and go over the ones I know, I'm happy to. One thing that has to be covered in whatever research or solution you're looking into needs to include the concept of "reflow." A quick tech paper on the web I found is here: http://taligarsiel.com/Projects/howbrowserswork1.htm

Andrei Herasimchuk

Reflow is a fairly critical aspect of how any layout system works (as I'm sure you know) and if it's there or not impacts largely how the layout engine not only renders, but how it can be used for different purposes. HTML and Web browser tend to be decent at large page construction, while the other layout engines tend to excel at app style screen layout.

Andrei Herasimchuk

Also, the constraint system in Figma is worth checking out. Evan did a pretty good job with it.

Andrei Herasimchuk

Also, one other thing potentially worth looking into is the old TeX layout system for type. https://en.wikipedia.org/wiki/TeX When I work with Flexbox, it reminds me a lot of how type systems work, except you replace the font character with a box. Things like "flex-start" and "flex-end" feel very much like a type rendering engine.

Koen Bok

Rasmus Figma is Springs and Struts right?

Tisho Georgiev

I read this paper a while back, and thought it had some interesting ideas re: representing and debugging constraints: http://research.cs.wisc.edu/graphics/Papers/Gleicher/CMU/briar.pdf

Kevyn Arnott

I don't know if this will help, but I tried to mirror Auto Layout's logic in Framer. The code is not really beautiful, but it works. https://github.com/k-vyn/framer-ios-kit

Weston Thayer

I was deep in this space while building Bloks a little bit ago. Your Google Doc is mostly correct, constraints and "stack-based" are the two primary layout systems. In the few usability tests I ran, constraints are very well suited to overall page layout while stacks are for lists/grids. You *can* do stacks using constraints, but it's a mental leap. The inverse is also true. Here are some links

* http://westonthayer.com/writing/2016/07/27/layout-experiments-in-adobe-illustrator/
* http://www.michaellucassmith.com/20080525%20User%20Interface%20Layout.html

Marc Krenn
Dimitrie Hoekstra

Give the design tool Antetype a look

German Bauer

Best post and smart comments in any FB group so far! This is why read this group with my morning coffee.

Read the entire post on Facebook