Skip to main content

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);

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?

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:


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

Reply


Terms & ConditionsCookie settings