Skip to main content

Hello 👋 I’ve been following this tutorial:


(Build it in Figma: Create a design system — Components - YouTube)


And at 49:00, the instructor talks about making a rectangle shape stretch inside of a frame.


But when I place a rectangle inside of a Frame (I’m using Figma v 116.7.103), all of the align options are greyed-out:


trying-to-stretch


trying-to-stretch-2


And the stretch option doesn’t seem to be available anywhere. Is stretch still an option for this version of Figma? Or was it taken away after the release of this video (August 2020)?

This is because the parent container (frame), is using Auto Layout. It’s at a fixed width and is vertically and horizontally centering its child element (rectangle).


In other words, the rectangle’s alignment is responding to the properties of the frame. You can set that rectangle’s width from “Fixed” to “Fill Container” to make it stretch with respect to the padding on the frame.

Alright, so I did get rid of the Auto Layout for the parent container (frame). But I’m sorry, I’m not seeing where to change the rectangle’s width from ‘fixed’ to ‘fill container’.


trying-to-stretch-1


trying-to-stretch-2


trying-to-stretch-3

You didn’t say that you wanted to remove Auto Layout; those are Auto Layout properties, and don’t apply to a container frame without it.


If you want to proceed with stretching the rectangle on a frame without Auto Layout, set the horizontal constraints to “Left and right”.

Reply


Terms & ConditionsCookie settings