Penpot Grid Layout feedback, join the conversation!

The much-awaited and much-special Penpot’s Grid Layout feature has already been tried and tested by dozens of community members and we are already getting their first impressions. Hooray!

Some outstanding examples are the comprehensive analysis made by Canonical designers at Hacktoberfest or this video walkthrough made by @Louis. Also at the Penpot team, we will start this week digesting the results from the Grid Layout Beta Test. We’re getting extremely insightful feedback and intend to share the learnings here as soon as we have a debrief and we are already implementing improvements based on some of the suggestions made. One more example of how the community directly impacts Penpot’s roadmap.

In the meantime, we would like to use this space to allow us, community members, to have an open conversation related to Penpot’s Grid Layout. What are your impressions about Penpot Grid-Layout? What do you like the most? How can we improve it? What are your expectations? We would love to hear about anything you feel you would like to share.


Sneak peek of one of the use cases that we will share soon

7 Likes

Hey there,

For me, one of the first things I want to do once this will be released is to build a wireframes library (for desktop and mobile) intended to webdesigners that will use the grid layout feature.

I already started making this library with flex layout, but since many layouts I use are developed using grid, that would make more sense to have them as grids already at the design phase.

2 Likes

The Grid Layout feature in Penpot is fantastic, but I’ve noticed a limitation—I wish there were options to allow certain content to overflow from one cell to another. I’m unsure if such settings currently exist.

You can already overflow content using fixed cell sizes and negative margins on elements (the blue rectangle is an example). Are you expecting something different?

1 Like

Do you intend to have it published on the Penpot Libraries & Templates page so it can be used by other community members? :slight_smile:

2 Likes

Yeah, I was expecting something like that. It’s nice to know about that.

1 Like

Here is my feedback (roughly replicating what I wrote in the betatest survey):

  • I looked for “grid” in the UI, but that is the grid-for-alignment feature not the grid-for-layout feature.
  • In the grid-layout feature, the icons are great (their icons show what change they trigger).
  • I like the pink edit overlay that enables adding columns/rows and shows the width indicators and the subtle highlights reacting to hover and other input.
  • My main probem is that there are a lot of options and lables that make only sense when one knows CSS, e.g. the FR length unit (a rather nondescript lable), the manual specification of area by name, or positioning by assigning grid-cell-numbers; this demands designers to learn a model that is created to be written rather than used by direct interaction. This does have no clean solution, but I would prefer having merely the parts of CSS Grid reflected that work well with a direct interaction model. (there is already an answer by @myfunnyandy on the original thread)
1 Like

Yes of course :smiley: I’ll submit it to be added to the Library as soon as it’ll be ready, I hope it will help others to save some time, I know in my case it will !

1 Like

I’m excited to share some fantastic insights from our recent user test on the new grid layout - a project that couldn’t have been successful without your participation and support.

In October, when we announced the test, the response was overwhelmingly positive, we had almost 100 volunteers. A big shout-out to everyone who joined in, including those who were too late to the party and were not able to participate.

The feedback we gathered through our survey was incredibly insightful, with a rich mix of perspectives from designers, developers, and professionals from other areas.

A special mention to the Canonical team, who dedicated their hackathon week to analyze Grid Layout and give us feedback.

The testing phase led us to identify numerous potential improvements, in different areas:

  • Bugs and Performance
  • UI improvements
  • Functionality Enhancement
  • Feedback for our support material

We listened to your ideas and the team has already worked hard to implement most of them. Here is a sneak peek of one of the improvements already developed by the team:

ezgif.com-video-to-gif-converter

(contextual actions for better rows and columns management)

Additionally, we received numerous compliments on the new UI from users. This was an unexpected but welcome bonus, highlighting the appeal and effectiveness of the new design.

A massive thank you to our product team and every single one of you in the community who contributed. Your dedication and feedback are what allow us to keep pushing boundaries and improving.

6 Likes

I would love the ability for these grids layouts to align with the configuration of Tailwind CSS.