Skip to main content
Smith_Samuel_D
Active Member
May 7, 2025
Solved

Auto Layout Grid - Column hug to content

  • May 7, 2025
  • 45 replies
  • 4823 views

Hello! 🤠

I was very excited to see the addition of Auto Layout Grid today! Having flexibility for both Rows and Columns at the same time is a game changer.

That said, I immediately ran into not being able to set a column width to “Hug” within a table, which is a bummer. In the attached video, I want the “Audited By” column to Hug to the longest table cell content. I show both the current solution today, and what I am trying to do with Auto Layout Grid.

I can manually adjust the width of the column, I guess, but as you can see, it makes it hard to ensure correct padding without a lot of careful tuning of the width.

 

Anyone have any solutions? Will this be coming as a fast-follow feature? Thank you!

Best answer by Smith_Samuel_D

UPDATE FOR EVERYONE: Figma has added this and MORE! 🎉

The update a few days ago added Hug AND “fr” (fractional) units to grids! This makes grid AWESOME! Thank you Figma for adding these features in!

https://www.figma.com/release-notes/?title=hug-and-fractional-units-for-grid

45 replies

Nathan2
New Participant
August 14, 2025

+1. I haven’t been using grid much because of this limitation. Can’t wait for this to be added.

Juan_Guzman
New Participant
August 20, 2025

I don't know if it's something they already released, or how it happened, but I was able to get a Hug for a Grid, however the frustrating and sad thing is that I haven't been able to recreate it 😓

But really with Hug, the Grid is much more useful.

 

Nathan2
New Participant
August 20, 2025

I saw that, too, and I was also unable to recreate it. Maybe it’s being implemented but isn’t finished yet?

Tina Wang
New Member
August 22, 2025

​@Juan_Guzman ​@Nathan2 
were you guys able to hug the rows/ content again?! I need this feature asap!

Nathan2
New Participant
August 22, 2025

No, not me. One time I just noticed the word “Hug” where “Auto” normally is like in Juan’s screenshots, but I don’t know what the conditions were that got it into that state or how to recreate it.

Juan_Guzman
New Participant
August 22, 2025

​@Nathan2 ​@Tina Wang 

Workaround: set Hug on Auto-layout Grid rows/columns via the Plugin API
 

I ran into the same issue where the UI doesn’t expose Hug for Grid rows/columns. I was able to reproduce it reliably using the Plugin API. Sharing my notes in case it helps someone else.

Prerequisites

  • Use the Figma desktop app (the plugin console isn’t available on the web).

  • Your layer must be a Frame with Auto layout → Grid.

Steps

  1. Open the file in the desktop app.

  2. Open the developer console: Right-click on canvas → Plugins → Development → Show/Hide console (see screenshots).

  3. Select the Frame that has Auto layout → Grid.

  4. In the console, paste one of the snippets below and run it.

    // 1) Target the selected frame
    const node = figma.currentPage.selection[0];

    // 2) Make the first ROW hug its content
    const rows = node.gridRowSizes;
    rows[0].type = 'HUG'; // 0 = first row, 1 = second, etc.

    // 3) Make the second COLUMN hug its content
    const cols = node.gridColumnSizes;
    cols[1].type = 'HUG'; // 1 = second column
  5. Adjust the index (0-based) to target the row/column you want.

  6. Done! The selected row/column will switch to Hug.

Notes & tips

  • Indexing is 0-based: 0 = first, 1 = second, etc.

  • You must re-assign gridRowSizes / gridColumnSizes to apply changes.

  • If you get “undefined” errors, the index you used doesn’t exist for that grid.

  • To undo, switch back to AUTO or FIXED (with a pixel value).

  • This is a workaround using the Plugin API; behavior could change as Figma evolves.


It’s a bit hacky, but it’s working great for me and makes Grid far more useful.
Cheers! 👋


Maybe I could create a little plugin to make this easier, let me know what you think. 😁

 
 
 
 
Nathan2
New Participant
August 25, 2025

Thanks for sharing. That’s pretty awesome you figured that out. It’s nice to know there is a workaround to get hug working until Figma officially adds the feature. Thanks Juan.

Tina Wang
New Member
August 25, 2025

​@Juan_Guzman 
Thank you for sharing! i ran Plugin API and pasted the following … but hug still didnt show up as an option for me, idk what i am doing wrong

// 1) Target the selected frame
const node = figma.currentPage.selection[0];

// 2) Make the first ROW hug its content
const rows = node.gridRowSizes;
rows[0].type = 'HUG';           // 0 = first row, 1 = second, etc.

// 3) Make the second COLUMN hug its content
const cols = node.gridColumnSizes;
cols[1].type = 'HUG';           // 1 = second column
 

 

Juan_Guzman
New Participant
August 26, 2025

Hi, I'm not quite sure. I used the plugin you show in the image and it worked for me. You did hit the run button, right? Just to confirm. The other thing is to try it step by step with the images I left above, that is, with the original Figma console.

 

 

 

 

​@Juan_Guzman 
Thank you for sharing! i ran Plugin API and pasted the following … but hug still didnt show up as an option for me, idk what i am doing wrong

// 1) Target the selected frame
const node = figma.currentPage.selection[0];

// 2) Make the first ROW hug its content
const rows = node.gridRowSizes;
rows[0].type = 'HUG';           // 0 = first row, 1 = second, etc.

// 3) Make the second COLUMN hug its content
const cols = node.gridColumnSizes;
cols[1].type = 'HUG';           // 1 = second column
 

 

 

Johnson_Ryan
Active Member
August 26, 2025

DO NOT RELY ON THE PLUGIN API! 
The “HUG” GridTrackSize configuration is not officially supported, which means that Figma can change or remove the functionality at any time.