Figma shortcuts and responsive auto layout

Wrap a selected frame or layers in an auto layout container. [1][2][3][5][8][6]

Remove auto layout behavior from the selection. [1][2][3][5][8][6]

Ask Figma to suggest the layout structure for selected layers. [1][2][3][5][8][6]

Turn selected design layers into a reusable main component. [1][2][3][5][8][6]

Wrap chosen layers in a frame while retaining their positions. [1][2][3][5][8][6]

Make a duplicate of the selected frame or component. [1][2][3][5][8][6]

Search Figma Design actions and commands by name. [1][2][3][5][8][6]

Opens quick insert so you can search available components. [1][2][3][5][8][6]

Select the Assets panel to find reusable components. [1][2][3][5][8][6]

Select supported key mapping if not using the default US layout. [1][2][3][5][8][6]

Navigate to the source component for an instance. [1][2][3][5][8][6]

Inspect current shortcuts instead of assuming they never change. [1][2][3][5][8][6]

Children flow from left to right along one axis. [1][7]

Children stack top to bottom and reflow when reordered. [1][7]

Arrange children in rows and columns with track controls. [1][7]

Combine navigation, labels and repeated cards with independent sizing. [1][7]

Controls interior spacing between sibling layers. [1][7]

Space the first and last child away from the frame border. [1][7]

Separate stacked children from frame boundaries. [1][7]

Choose the cross-axis and main-axis positioning within the frame. [1][7]

Preserve explicit gaps between successive layers in a group. [1][7]

Distributes free room between sibling layers on the main axis. [1][7]

Place an overlapping badge or decoration without affecting flow. [1][7]

Lets the button background grow as its label changes. [1][7]

Builds stacked text and images that adapt to edited content. [1][7]

Keeps navigation items aligned and evenly arranged. [1][7]

Parent frame resizes around its children on the selected axis. [1][7]

Occupies available width or height within an auto layout parent. [1][7]

Keeps the layer's width constant despite surrounding changes. [1][7]

Keeps height unchanged when siblings reflow. [1][7]

Prevents a responsive element from shrinking below a defined lower bound. [1][7]

Prevents overly wide content at large parent sizes. [1][7]

Preserves a minimum height even with short contents. [1][7]

Caps the height of a responsive element. [1][7]

Selects Hug contents along that dimension. [1][7]

Sets Fill container for an eligible child dimension. [1][7]

Keeps icons stable while text or buttons grow around them. [1][7]

Allows text to wrap when the outer frame narrows. [1][7]

Fixed or truncation decisions control wrapping; test narrow sizes. [1][7]

Bounds a fluid section at wide breakpoints. [1][7]

Reuse its styling while editing main component centrally. [3][4][8][2]

Create a state variant within a component set. [3][4][8][2]

Keep similar component states inside one component set. [3][4][8][2]

Clear names let instance users select the intended configuration. [3][4][8][2]

Switch to another supported component variant. [3][4][8][2]

Another instance stays linked to its main component. [3][4][8][2]

Provide purpose and usage notes for colleagues. [3][4][8][2]

Start with named dimensions rather than arbitrary bounds. [3][4][8][2]

Descriptive naming makes inherited layouts understandable. [3][4][8][2]

Moving a layer to the wrong parent changes its layout behavior. [3][4][8][2]

Helps media scale without unintended distortion. [3][4][8][2]

Watch for overflowing text or broken padding. [3][4][8][2]

Tests whether Hug/Fill and wrapping respond correctly. [3][4][8][2]

Confirm states remain readable and consistently named. [3][4][8][2]