Skip to main content

Please search for existing topics before posting! Press 🔍 at the upper right to search.layoutMode | Plugin API

How to create a new frame and set the layout mode to be wrap rather than horizontal or vertical please?

Can do for vertical like this:

var frameWrapper = Figma.createFrame();
frameWrapper.name = “spans”;
frameWrapper.x = 100;
frameWrapper.y = 100;
frameWrapper.layoutMode = ‘VERTICAL’; // layoutMode: ‘NONE’ | ‘HORIZONTAL’ | ‘VERTICAL’

But, the documentation does not show an option for ‘WRAP’
Are the docs just out of date, or is there another way please?

Wrap is not a layout mode.

You can use Cmd + K search in the docs to find the answer Search the documentation | Plugin API


The Figma API may not currently support a ‘WRAP’ layout mode directly. The documentation lists only ‘NONE’, ‘HORIZONTAL’, and ‘VERTICAL’ as valid options for the layoutMode property. To get a wrapping layout, consider using a combination of auto layout properties and manual adjustments. Here’s a suggested workaround:

  1. Set the layoutModeto ‘HORIZONTAL’ or ‘VERTICAL’.
  2. Use the primaryAxisSizingMode and counterAxisSizingMode properties to control how items within the frame grow and wrap.

Here’s a code example:

var frameWrapper = figma.createFrame();
frameWrapper.name = "spans";
frameWrapper.x = 100;
frameWrapper.y = 100;
frameWrapper.layoutMode = 'HORIZONTAL'; // Set initial layout mode
frameWrapper.primaryAxisSizingMode = 'AUTO'; // Adjust as needed
frameWrapper.counterAxisSizingMode = 'AUTO'; // Adjust as needed

// Additional properties to manage wrapping
frameWrapper.itemSpacing = 10; // Space between items
frameWrapper.paddingLeft = 10;
frameWrapper.paddingRight = 10;
frameWrapper.paddingTop = 10;
frameWrapper.paddingBottom = 10;

Adjust the spacing and padding properties to manage how the items wrap within the frame.


Thanks @Gleb , @Louis_Otto 🙂

Solved it using layoutWrap attribute:

frameWrapper.layoutMode = ‘HORIZONTAL’; // Set initial layout mode
frameWrapper.primaryAxisSizingMode = ‘AUTO’; // Adjust as needed
frameWrapper.counterAxisSizingMode = ‘AUTO’; // Adjust as needed
frameWrapper.layoutWrap = “WRAP”;
frameWrapper.itemSpacing = 4; // gap of 4 between words
frameWrapper.counterAxisSpacing = 0; // gap of 0 between rows of words