Enter values and measurements

If you’re setting the spacing, dimensions, or rotation of an element using transformations, you can input the numerical value along with the appropriate unit into the corresponding field. It’s also possible to perform calculations within numeric input fields. Need to increase the size of your div block? Type *2 after the current value and hit enter.

When you place an element on the canvas and adjust its size, the initial width and height of the element will align with its “natural” dimensions based on the existing layout flow.

Modifying input values with your keyboard

Focus on a numerical field and use the up ↑ and down ↓ arrows on your keyboard to increment or decrement the value by 1. Holding down Shift while doing this will adjust the value by 10. Press ESC to unfocus the input field.

Applying preset spacing to multiple sides

To set spacing for multiple sides using a preset:

1. Navigate to the Spacing section and select a value for one of the sides
2. Hover over the desired preset value
3. Press and hold Option (on Mac) or Alt (on Windows) while clicking on the chosen value

By following these steps, the preset will be applied to both sides of the element — or you can press Shift to apply the value to all sides simultaneously.

Adapting input values using your mouse

Once you’ve clicked into a numeric input field, hold Option (on Mac) or Alt (on Windows) and then drag your mouse to adjust the value (drag left to decrease or right to increase). This way, you can make adjustments without removing your right hand from the mouse.

Progressive values

Hold Option (on Mac) or Alt (on Windows) to reveal incremental arrows next to your input field, allowing you to add or subtract incrementally by clicking the up or down arrow beside the value.

Adjusting spacing values across multiple sides

While adjusting the margin and padding controls, hold Option (on Mac) or Alt (on Windows) to uniformly apply the same value to all sides, or press Shift to apply the value inclusively.

Altering units

You can modify the unit in an input field through the unit dropdown menu or by appending the unit after the value.

When switching from px to %, the approximate conversion will be automatically calculated for you.

CSS measurements

Most input fields offer a variety of units to choose from, including:

• PX (Pixels) – relative to screen resolution
• % (Percentage) – relative to parent element
• EM – relative to parent element’s font size
• REM – relative to body element’s font size
• VH – relative to viewport height where 100vh is the viewport height
• VW – relative to viewport width where 100vw is the viewport width
• – – no unit
• Small, large, and dynamic viewport units (e.g., DVH, DVW, SVH, SVW, LVH, and LVW)

For certain fields, you can substitute the unit with values like:

• Auto
• None

Please note: When using units in an input field within the Designer, SVH, SVW, LVH, and LVW units will not appear in the unit dropdown. To utilize these units in an input field, input the value followed by the unit letters (e.g., 100 SVH) in the field and press Enter.

Text style units

When setting properties like font size or line height, the default unit applied to the input value is typically pixels (px). You have the option to choose from various other units that affect typography sizing.

Pixels (px) [Default]

Font size values in pixels can scale proportionally with images and elements assigned a pixel value. To use pixels as the default value, simply type a numeric value, such as 90, and then hit enter. The value will be 90px.

Ems (em)

Each browser has a standard font size, typically 16px. If you set the font size of an element to 1em, it will equate to 16px. Doubling it to 2em equals 32px.

Ems are relative to the font size of their parents. So, if a parent has a font size value of 0.5em, a child paragraph with a font size of 1em will be 8px (16 x 0.5 = 8px), while another paragraph located elsewhere may be 16px.

Rems or – Root ems (rem)

As an alternative to ems, root ems (rems) are based on the HTML font size, maintaining consistency with the browser’s default font size. Hence, 1rem always equals 16px, regardless of the parent’s font size adjustments.

Percentage (%)

Similar to ems, percentages in typography sizing are relative to the parent element’s font size.

Viewport Units (vw & vh)

Viewport units are effective for creating responsive typography. Viewport width (vw) adjusts based on the viewport’s width, ideal for scaling text proportionally to the viewport width. Likewise, viewport height (vh) scales text relative to the viewport’s height.

When employing viewport units, it’s advisable to test across different devices, especially with vh, as font sizes may vary significantly.

Line spacing units

Unitless [Default]

Utilizing “unitless” produces line height as a multiple of the font size, automatically scaling the line height with font size changes. To set “unitless”, select “-” from the unit menu or type “-” after the value and press enter.

Percentage (%)

Percentage values for line height also adjust in proportion to font size. However, percentage values may present inheritance complications, making “unitless” a preferable choice.

Fixed units

For greater line height control, you can opt for fixed values like px, em, or rem.

Angle units

Angle units are pivotal for shadows, transformations like rotate and skew, and the hue rotate filter. Positive values rotate clockwise, while negative values rotate counterclockwise.

• DEG (–degrees) – spanning from 0 to 360deg, where 0 and 360 are equivalent.
• RAD (–radians) – equal to 180/π degrees or roughly 57.3deg
• GRAD ( –grads) – equal to 1⁄400 of a full circle
• TURN (– turns) – signifies one complete rotation, equivalent to 360deg.

Time units

Time units are employed for defining durations in transitions and interactions.

• MS – milliseconds. 1000 milliseconds equals 1 second.

‍