Auto Layout (Layout in Penpot) is one of the essential functions for product design today. It is a necessary functionality in any design system. It allows structuring components or boards in such a way that they can grow automatically, making a container adapt to the size of its contents, or vice versa.
We are very aware of this at Penpot. We consider it essential in our day-to-day life as designers and developers. It is also one of the most requested features by our user community.
This is why we have been working hard for a long time to create the best possible experience for creating and managing Layouts in Penpot. It is not a simple task. “Layout” affects many core tasks such as new components or boards.
We are doing our best working on this task right now and we hope that it will be available with the next releases.
We encourage you to stay tuned to all these new improvements. Also, please send us your doubts and questions about “Layout” in Penpot.
Yeah, @juan.delacruz I think we need to nail this down. On our onboarding surveys Autolayout comes #1 on the “what’s needed for you to fully migrate to Penpot” question. We have to be very grateful about how people are quite honest about this. I mean, we have other great stuff but the Autolayout feature remains a killer benefit for other propietary tools like Figma.
I was just thinking about this and would like to add another aspect to this conversation about layout. Maybe something more for the future…
I will mainly be using Penpot for web design, but I understand it that it can be used to design for other platforms and even just as a good svg editor for print design etc. That being said, one thing I would love to have, specifically to make my job easier would be a way to export certain parts of my design as a web component of some sort… which could just mean a HTML file containing markup and a style tag.
As I understand it, Penpot is using SVG as the basic layout engine, and you are building on top of that, but I wonder what would be possible in terms of UX if some sort of “web layout” mode was developed. Or maybe “responsive mode”, where you integrate some of the modern features of CSS such as Grid Layout and Flex Layout, along with percentage based widths etc in such a way that the “layout skeleton” could be exported as a basic HTML file with inline CSS.
Maybe am not doing a good job at describing this, but the basic idea is that a designer would be able to pick from a new list of primitive shapes, maybe under a new category in the toolbar. “autogrid”, “responsive container”, “flexible box” etc which then when other shapes are placed into them they automatically inherit attributes which can be changed in the sidebar. You would have options like “place-self” etc etc. The idea would be to design the responsive mode and auto-layout in such a way that it can be mapped to the actual grid and flexbox algorithms in web browsers, which would then open the possibility of creating an exporter which can generate markup for every responsive element used in the design, (and maybe including an assets folder filled with those elements which have not been created in a responsive way)…
If a designer could use a bunch of responsive primitives, throw some text and images in to them, such that the whole design responds to viewport size, then can export the whole lot to markup… well you couldn’t get much better UX than that! If the primitives were built right from the start in such a way that they conform to the CSS grid and flex spec, then the markup would be clean by default… This would be much better than what I think Figma etc could do…
Anyway, that seems like it would require importing a lot of code into penpot to emulate browser layout algorithms, or to somehow enable the client’s browser layout on specific elements…so maybe this is not doable. I am just throwing some ideas around.
I think autolayout in Figma is basically like web layout no?
I’m not as experienced with Figma though so I could be wrong. But your essential thrust: responsive layout controls similar to how things work in the web, is one I support.
I know what you mean. It’s not that crazy. There are several tools that do similar things. I think that this vision of “layout” that you mention has a lot of value and Penpot could grow in this section. Especially from a developer point of view. There are many people out there that want it.
There is a lot of room for improvement in the interaction between designs made with layout and conversions to work with HTML blocks. We also need to think about how we bring different aspects up and where we can innovate. However, we believe that it is worth continuing to explore this concept. It would be useful to wait until the development of the Penpot Layout feature is complete. In any case as you mentioned it would require a lot of effort.
Please refer to Framer, Figma, and Axure as inspiration for “layout” properties.
Particularly, I think that PenPot could use as a major differentiator is providing dynamically generated designs in a smart way. So for example, someone should be able to select 8 objects and layout those objects in a grid with properties for 2, 3, 4, etc. per row.
There’s some specifics about how a layout system works that Figma didn’t get into. They limited their implementation to only replicating Flex (without the correct naming yes). What would make it much more powerful is if you can replicate CSS Grid too (and that the user doesn’t need to think in CSS to do this).
An order of difficulty of layout:
The simplest “auto-layout” is just taking the objects you have and aligning them and adding gutters. But they hold the same height x width and thus set the board/frame size. That’s roughly what I’ve seen in the Gif that Alonso posted.
The next step up is allowing child objects to resize to fit the parent. And in Figma you can do that by setting an object to “fill container” but that means when you have multiple objects with that setting, they are just an equal fraction to each other.
The closer to CSS grid would be having an ability to set the fractional amount on a “fill container” object. So you can make one 2f vs 1f, etc. This is really needed when making tables or responsive designs.
Having some way that the dev team can see the CSS code for that in one place would be neat.
What would make this super powerful is if it carried the frame/board names into the CSS so you get grid-template-areas Then if you wanted to design breakpoints in different boards you could just use the same board names and just copy out the code to define that breakpoint but that the browser knows to rearrange the elements.
That somehow “layout” has breakpoint settings too. Where you can turn visibility on and off, or different fractional widths for a child object at certain sizes. That way you can really make an element once as a component and then throw it onto a board and as it is resized into position, it changes appearance appropriately. The merits of this might clash against any type of variants/states that components can have.
