Skip to main content
Solved

How to use API to create new frame with layoutmode of WRAP?


Martyn_Bowis

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?

Best answer by Martyn_Bowis

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

View original

3 replies

Gleb
  • Power Member
  • 4706 replies
  • August 1, 2024

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.


Martyn_Bowis
  • Author
  • New Participant
  • 29 replies
  • Answer
  • August 1, 2024

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


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings