When building a responsive layout, your size values and sizing tools will help to reduce the number of adjustments needed in the final product.
Inside the Design Editor, you can define the sizing of any element, frame, or section by pixels (px), percentages (%), or automatic sizing (auto-size).
px are a fixed or absolute value and are used when you do not need the sizing to be relative to a parent container.
% are a relative value meaning they transform and scale based on their parent container.
For example, if you set a section to be
100% height, this means it will be relative to the browser viewport and therefore give a fullscreen immersive effect.
Automatic Sizing (auto-size)
By specifying elements to be
auto height or width, the element will automatically size based on what’s inside of them.
This enables you to build responsive designs and components, faster.
Auto size can be used in two ways:
auto: This will allow the height of the section, frame, or element to growing as you add more content.
auto: This will adjust the width of the frame or element depending on the amount of content
We’ve introduced a singular value
minimum height to assign a height value to elements on your canvas. By specifying minimum height, your content will look great across any breakpoint and not be clipped as audiences adjust their browsers.
Ultimately, we’ve found by assigning one value instead of two (
minimum height) results in better control and less work to make your designs responsive.
Note: Minimum height has become the singular value for height within the Design Editor.
Overflow and Clip Content
By check-marking, the box for clip content (also known as overflow) in your section or frame in the Style Panel, elements that are partly outside the boundaries will be clipped or hidden.
This will effectively add the CSS property of
overflow: hidden to those elements and render them invisible to audiences.
The resize tools are shortcuts to ease the process of readjusting elements, so you can make sure that your elements fit snug to their parent containers or aspect ratio.
This will resize an element’s width to its parent container.
For example, if you resize horizontally an image inside of a section, that image will resize to be 100% width of the section (which is the parent container)
This will resize an element’s height to its parent container.
Resize to Fit
This will resize an element to its contents or specified aspect ratio (if image or video)
Specifying and locking the aspect ratio of an element like an image or video will allow you to adjust and resize the element but still maintain the overall relationship between height and width.
Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.
For example, to avoid getting the dreaded black bars on the top and bottom of your Youtube Video embeds you can:
Set a 16:9 aspect ratio size to the Youtube embed, in this case, 1280x720
Lock the size/aspect ratio in the Style Panel in order to maintain that relationship as you resize
Resize the Youtube embed to be smaller and then position it on your canvas