Skip to main content
Question

Is there a way to set the auto-layout of a child frame node within a frame node to horizontal so it's children are lined up in a row as opposed to a column but have the child frame node fill the container as well?

  • October 11, 2022
  • 9 replies
  • 576 views

Aric_Jiang

I’ve tried everything I can think of but nothing is working.

      const topChildFrame = createFrame({
        name: "Title",
        layoutMode: 'HORIZONTAL',
        layoutGrow: 1,
        counterAxisSizingMode: 'AUTO'
      });

This is what I have now, but the “topChildFrame” ends up in the middle of the parent container, and it does not fill the container.

9 replies

tank666
  • 4873 replies
  • October 11, 2022

I don’t quite understand your question, and this part of the code is not enough to reproduce your result, but you can try manually creating your object in the Figma editor, and then using the console to see all the properties of this object.

And what is the createFrame(obj) function? Is it your own function or is it the figma.createFrame() method?


Aric_Jiang
  • Author
  • 9 replies
  • October 11, 2022

This is my own function:

function createFrame(options: IBaseFrameOptions) {
  const baseFrame = figma.createFrame();

  baseFrame.name = options.name ?? 'Base Frame';

  if (options.appendToCurrentPage) figma.currentPage.appendChild(baseFrame);

  const width = options?.resize && options.resize[0];
  const height = options?.resize && options.resize[1];

  if (width && height) baseFrame.resize(width, height);
  if (options.layoutGrow) baseFrame.layoutGrow = options.layoutGrow;
  if (options.layoutAlign) baseFrame.layoutAlign = options.layoutAlign;
  // NOTE: counterAxisAlignItems aligns items on the Y axis and primaryAxisAlignItems aligns items on the X axis.
  if (options.counterAxisAlignItems) baseFrame.counterAxisAlignItems = options.counterAxisAlignItems;
  if (options.primaryAxisAlignItems) baseFrame.primaryAxisAlignItems = options.primaryAxisAlignItems;

  if (options.layoutMode) baseFrame.layoutMode = options.layoutMode;
  if (options.itemSpacing) baseFrame.itemSpacing = options.itemSpacing;
  if (options.horizontalPadding) baseFrame.horizontalPadding = options.horizontalPadding;
  if (options.verticalPadding) baseFrame.verticalPadding = options.verticalPadding;
    
  return baseFrame;
}

tank666
  • 4873 replies
  • October 11, 2022

Thanks for the clarification and the function code.

Now the code you provided only creates 1 Auto Layout Frame.

What are the properties of the frame where you want to add the created frame? Does this parent frame have a fixed width?


Aric_Jiang
  • Author
  • 9 replies
  • October 11, 2022

The parent frame (header frame) is not fixed, and its properties are as follows:

      const headerFrame = createFrame({
        name: "Header Frame",
        layoutMode: 'VERTICAL',
        layoutAlign: 'STRETCH'
      });

Aric_Jiang
  • Author
  • 9 replies
  • October 11, 2022

The header frame is a child frame of the “base frame”

base frame
–header frame
----top child frame
----bottom child frame
–form content base frame
–form footer base frame

This is the properties for the base frame:

      const baseFrame = createFrame({
        name: "Base Frame", 
        resize: [1440, 130],
        layoutMode: 'VERTICAL',
        layoutGrow: 1,
        itemSpacing: 62,
        horizontalPadding: 32,
        verticalPadding: 32,
        counterAxisAlignItems: 'MAX'
      });

Gleb
  • Power Member
  • 4708 replies
  • October 11, 2022
createFrame({
        this is useless, everything you write here is ignored, you can't set properties this way
      });

Aric_Jiang
  • Author
  • 9 replies
  • October 11, 2022

could you please explain why?


Gleb
  • Power Member
  • 4708 replies
  • October 11, 2022

Oh, sorry, I thought you were calling figma.createFrame, not your custom createFrame function. In this case all is good.


Aric_Jiang
  • Author
  • 9 replies
  • October 11, 2022

I solved this issue by assigning the values to each property after appending the child to it’s parent node.

Here is the code:

      const topChildFrame = createFrameAndAppendTo(headerFrame, {
        name: "Title",
        layoutMode: 'HORIZONTAL',
        layoutAlign: 'STRETCH',
        primaryAxisAlignItems: 'SPACE_BETWEEN',
        primaryAxisSizingMode: 'FIXED',
        layoutPositioning: 'AUTO',
        counterAxisAlignItems: 'MIN',
        counterAxisSizingMode: 'FIXED',
        clipsContent: true
      });

This is the implementation for createFrameAndAppendTo:

function createFrameAndAppendTo(parent: ChildrenMixin, args: IBaseFrameOptions): FrameNode {
  const frame = figma.createFrame();

  // Append the child to the parent before settings the properties.
  parent.appendChild(frame);

  for (const [key, value] of Object.entries(args)) {
    frame[key] = value;
  }

  return frame;
}

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