Properties

Product

✍️

Note

Heads up! Phase gets little updates and improvements all the time. Our tutorials might be a tad different from the current app.

The properties panel is our gateway to precision and control. Use it to fine tune our elements, adjust their appearance, and configure interactions with ease. The available properties may vary depending on the element we have selected.

Position and Size

1. Quick Alignment and Distribution

Click on these icons to adjust the position of an element relative to either the total design, or the container it is currently in.

If multiple elements are selected, they can be distributed vertically or horizontally with the rightmost icons.

2. Position

Move an element so that it aligns exactly with the side or middle on either the X or Y axis. To know where the design is, either reference this, or change the numbers to move it.

3. Size

See how large an element is, or quickly adjust its length and width. The “Ratio lock” icon to the left of the width can be enabled so that when one dimension is modified, the other changes proportionally.

4. Rotation

Turn an element to see it from a different angle. This can be modified directly, or by rotating an element from the corners of its bounding box by dragging the curved arrow icon.

5. Corner Radius

Round off the corners of a shape by setting this value to any number greater than 0.

Overflow and Point Shapes

The properties panel changes slightly depending on what type of element is being modified.

When adjusting a Container, the Overflow settings appear in the properties panel underneath the position and size controls.

Similarly, if we're are adjusting a Path, the Point Shapes options become available.

Visit the respective pages for in-depth instructions on how to use those features.

Transform

The Transform panel is expandable or collapsible, so we can save on space in the properties panel if you don't often use the features within.

1. Origin

The most prevalent features in the Transform panel relate to the Origin, also known as the anchor point. We have a dedicated article on the Origin, that has details on adjusting and utilizing it.

2. Scale

Use Scale to change the dimensions of an element by stretching across the X and Y axis. This is similar to editing the width and height directly, but the difference is that scaling can make bulges and asymmetrical segments in lines and borders.

3. Skew

Give an element a slant by adjusting its Skew value. Adjust the skew either horizontally (X) or vertically (Y) by giving it a proportional angle to the respective field.

Colors and Borders

1. Opacity

The percentage dial sets how opaque or transparent the element is. The drop-down selection sets the Blend Mode, which is how the color of the element affects shapes behind it. Blend modes are described in more detail below.

2. Fills

Each fill layer adds color across the area of an element. Click the (+) plus icon to add a layer, and we can adjust the hex color value, as well as the opacity.

When we click on the color box, the color picker window appears.

From the color picker, it’s possible to pick any color to suit the style of a given project. To quickly select a color that already exists in the canvas, use the eyedropper tool.

By default, color values are shown according to their hexadecimal (HEX) values. Change the color mode by clicking on the dropdown menu and choose between RGB, HSL, or HSB. The values can be directly modified underneath the dropdown menu, and ,similarly, the opacity can also be edited.

Fills are solid colors when they are first created, but a gradient can be edited by clicking on the buttons at the top of the screen. Gradients are explained in more detail later in this page.

3. Borders

Borders, also known as strokes, are additional colors that can be added to the outside of an element. Like with Fills, click the Plus

icon to add a border. The same color and opacity settings can be applied as with Fills, and we can use the same gradients.

The Border Width

can be changed under the opacity percentage, on the right side.

Additionally, it is possible to change the position of the border relative to the outside boundaries of the shape.

Click on the ellipsis icon to reveal a set of specialized options for the borders. They're explained in the Border Details section.

4. Effects

At the bottom of the properties panel is the Effects option. As of right now, the only effect in Phase is Trim Path. With this effect, it’s possible to reveal or hide portions of a shape or line, giving the illusion of movement or transformation.

Trim path is a very useful function for animations, so we've written a deep dive about it. Go to the Trim Path article for more information.

Border Details

1. Join Shape

The corners that connect lines are join points, and both the appearance and size of those points can be adjusted.

Miter: The default join point option has the lines meet at a straight angle, creating a pointed joint.
Round: A curved corner is created where the lines meet. This option is often used to create a softer, more organic look.
Bevel: The lines meet at an angle, and the corner is chamfered or flattened. This option is commonly used to create a clean and modern appearance.

✍️

Note

Join shapes do not affect Ovals and Paths consisting of two points.

2. Dash and 3. Gap

The border can become dashed by adjusting both the Dash and Gap values. If either value is 0, the border stays full.

The Dash value controls the length of line segments, and the Gap value affects the size of the empty space between segments.

4. Miter Angle

This setting allows us to combine the Miter and Bevel join shapes.

Any joint that has an angle of less than the value here will be beveled off. On the other hand, any joint with an angle above the value will use a miter shape.

5. Ends

Straight End	Round End

The way the ends of our paths look can be controlled.

Straight End: The line is cut off exactly at the end point with a rectangular edge.
Round End: A circle extends off the end point with a diameter equal to the border width, giving the end a curved look.

✍️

Note

The ends setting only affects paths that have extruding endpoints.

Gradients

These are visual effects that involve smooth transitions between two or more colors. Instead of a sudden change from one color to another, a gradient creates a gradual blend or progression of colors.

1. Types

The shapes in front hide the shapes behind as much as their opacity is set to.

Linear Gradient	Radial Gradient	Angular Gradient	Diamond Gradient

Gradients add depth, dimension, and visual interest to our designs. In Phase, we can find them in the color menu, each reperesented by a unique icon:

Solid: The area is completely filled with one color; no gradient is applied.
Linear: A gradient flows in one direction.
Radial: A gradient spreads equally from the center of the shape.
Angular: A line extrudes from the middle of the element and a gradient spins from that line around the central point.
Diamond: A gradient spreads from the center with additional weight in four directions to make a diamond shape.

2. Gradient Stop Location

The Gradient Stop Location feature offers multiple methods for precise control, allowing us to tailor your gradients with flexibility. Here's a step-by-step guide to make the most of this functionality:

Select an element on the canvas
Click on the color box in the 'Fill' section
Choose a gradient type
Move the leftmost stop on the slider to set the starting color. This determines where the first color in the gradient begins.
Move the rightmost stop to set the ending color. This determines where the last color in the gradient ends.
Click anywhere on the slider to add midpoints.

This functionality provides versatile control options. Either drag the stop along the slider or utilize interactive scaling by clicking and dragging the percentage indicators left or right. Additionally, the larger points on the elements can be dragged directly, dynamically adjusting in tandem with the slider movement.

3. Reverse Gradient

This button reverses the order of the color stops, resulting in a visual effect where colors transition in the opposite direction. It affects each gradient differently.

Linear Gradient	Radial Gradient	Angular Gradient	Diamond Gradient

Reverse gradients offer designers a versatile tool for customizing and experimenting with their designs, fostering creative exploration and the discovery of unique visual effects. They can be strategically employed to shift focal points, as seen in a radial gradient where reversing draws attention to the center, creating a distinct emphasis. Designers frequently apply reverse gradients to background elements to enhance the overall design.

Blend Modes

Blend modes are dynamic tools that unlock a spectrum of transformative effects in designs. These versatile elements can be used to enhance contrast, introduce vibrant blends, and elevate the overall visual impact of any design with creative flair. Explore the diverse range of styles to bring nuance and sophistication to projects.

Normal

The shapes in front hide the shapes behind as much as their opacity is set to.

Darken

If the front layer is darker than the layer below, it replaces colors by the difference in luminosity between the two.

Lighten

The reverse of Darken, if the front layer is lighter than the layer below, it replaces colors by the difference in luminosity between the two.

Color Burn

In the front shape’s area, the color contrast increases, and then the layers are multiplied together for darker and more saturated highlights based on an exaggerated amount of color difference.

Color Dodge

Flipping the operations of Color Burn, this inverts the colors, multiplies their luminosity, and reduces their contrast. The resulting colors are lighter and less saturated, but the midtones are more saturated relative to the highlights.

Multiply

Multiplies the luminosity of the front and back layers, and then replaces the layers behind by the product of the colors. This results in darker colors.

Screen

The opposite of Multiply, this inverts the colors and then multiplies their luminosity. The layers are replaced by the product of the colors, resulting in lighter colors.

Overlay

The front shape appears above the layers behind it subtly. This is performed by applying two combined effects: if the front color is darker, Multiply is used at half strength, and if the front color is lighter, Screen is applied at half strength.

Soft Light

A softer version of Overlay, this effect applies half values of Lighten and Darken on the layers behind the front shape.

Hard Light

To make a harsher Overlay effect, the calculations of color shift are based on the combined products of the Multiply and Screen styles. This results in a higher contrast adjustment.

Difference

The RGB color values of the bottom layers are subtracted from the top layer. If the top shape is a light color, the layers below are inverted, and if the top shape is very dark, then minimal change occurs to the bottom color.

Exclusion

This is a muted version of the Difference effect. At the black and white ends of the spectrum, this has no change or inverts the colors respectively.

However, as the top layer’s color is closer to gray, the resulting color also gets closer to gray. Typically, this style has a mild desaturation effect.