The Style tab, located in the right-hand panel of the design editor, houses all settings related to styling and layout. The options displayed adjust dynamically based on your selection on the canvas. This article provides a breakdown of the key sections within the Style tab.
Position
Alignment: Quickly position or distribute elements relative to the canvas or parent element.
Constraints: Control how elements respond to changes in the size of the canvas or parent frame. Learn more about Constraints.
Position: Set an element's position along the X and Y axes.
Rotate: Adjust the element's rotation around its top-left corner.
Size
Dimensions: Set the width and height of an element. Learn about responsive sizing.
Resize buttons: Quickly resize elements to fit the parent frame or their contents.
Aspect ratio: Lock the width and height proportions to maintain the aspect ratio.
Layout
Padding: Add space between the frame's contents and its outline.
Individual padding: Customize padding for each side of the frame.
Flex Layout: Apply flex layout settings to create dynamic designs. Learn how to use Flex Layout.
Clip content: Hide content outside the frame using the frame outline (clip overflow) or shapes like circles, triangles, or rhombuses.
Scroll
The Scroll dropdown provides various scrolling options based on the selected element:
Scroll with page: The element scrolls along with the page (default).
Pin position: Fix the element to a specific viewport position so it stays visible during scrolling. You can choose which pages it applies to. Note: Not available for sections.
Stick to top: The element scrolls with the page until it reaches the top of the viewport, where it remains until the end of its section.
Fix background: Keeps the background static while content scrolls over it. Note: Only available for sections.
Shared Style
Create new shared style: Save styles like typography, background, or margins for reuse. Learn how to use Shared Styles.
Select shared style: Apply an existing shared style to the selected element.
Reset styles: Reset overridden styles for desktop, tablet, or mobile through the overflow menu.
Background
Open editor: Access additional background settings.
Color code: Displays the background color, typically as a HEX code.
Alpha value: Adjust transparency, with 0% being fully transparent and 100% fully opaque.
Add background: Apply a background to parts of the selected element.
Border
Open editor: Access additional border settings, such as border color.
Border style: Choose between border styles, such as solid, dashed, or dotted.
Border weight: Set the thickness of the border.
Add border: Apply border to parts of the selected element.
Border Radius
Open editor: Adjust the border radius for individual corners.
Border radius: Set the curvature of the element's corners.
Add border radius: Apply border radius to parts of the selected element.
Effects
Open editor: Adjust visual effects such as shadows or blurs.
Effect: Displays the selected effect.
Add effects: Apply effects to parts of the selected element.
Opacity
Opacity: Use the slider or input field to adjust an element's transparency.
Add opacity: Apply opacity settings to parts of the selected element.