Skip to main content
Solved

What API can help me add each sub-element to a frame of a grid layout and adapt to stretching into each column shadow,

H

What API can help me add each sub-element to frame of a grid layout and adapt to stretching into each column shadow？

I hope to achieve the following effects through the plug-in API: manually create a frame container and give it a Gird layout. Next, I will dynamically add sub-elements to it. I hope the width of these sub-elements can be filled and stretched to fit each column. However, depending on the fact that look like only can stretch sub-elements with the mouse, is there any way to complete this task through the sigma API?

As shown in the picture and this is my current code:

image

        var myFrame= createGridlayoutFrame()
        let InstanceNode = figma.getNodeById("1642:6987");
        var componentInstance = InstanceNode.createInstance();
        myFrame.appendChild(componentInstance);

Best answer by tank666

Use math functions. Get the layout grid properties, and based on the layout grid properties, change the coordinates and sizes of your objects.

Links to relevant properties and methods:

View original

H

In the picture, Top part of the picture is like adding sub-elements directly. How should I try to set the frame or set these three sub-elements through the API to make them look like the bottom part of the picture?

The width of each child element is stretched to fill its column to achieve the overall width adaptation.

If there is no API available, maybe I can only modify the X and Y coordinate values of each child element to move them?

tank666

Use math functions. Get the layout grid properties, and based on the layout grid properties, change the coordinates and sizes of your objects.

Links to relevant properties and methods:

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Celine_D
1 person likes this
  • Celine_D
    Celine_D
H

OK thanks .maybe it is the only way to do this

Reply


Terms & ConditionsCookie settings

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