🎨 Design
The Design panel allows you to view, add, remove, or change the properties of objects in your design.
Once you select an item, the Design tab will contain many different settings where you can adjust the alignment, size, color, and more. The settings will change depending on the selected object. Now in more detail.
Alignment
The alignment tools allow you to position layers on the canvas in relation to each other. Figma will determine the alignment of your layer based on your specific choice. When selecting one object, Sizzе will align the layer with its parent. When multiple layers are selected, Sizzе aligns the layers in relation to each other.
Use distribution to create equal space between layers in a selection. You must have more than one layer or object selected.
Transform
You can adjust the position of layers in the canvas along any of the two dimensions or axes: horizontal (X axis) and vertical (Y axis). Sizze represents a layer's position on the canvas using X and Y coordinates.
Every layer in the canvas will have its own dimensions. To view a layer's dimensions just select the element in the canvas and view the dimensions of any layer using the W and H fields in the right sidebar. To adjust the width and the height of a layer click on the element and drug it to resize. To adjust the radius of a round element, select the element and drag it to the sides, or resize it on the right sidebar.
Using the tool radius, you can change the roundness of the element by changing the indicators in the radius section, or change the roundness of the corners individually by switching the radius button to the right.
Auto layout
Auto Layout is a powerful feature with many properties that can save you a lot of time.
The padding and spacing properties allow you to set the margin value for all sides of an element at once, or to define it only for specified sides.
Horizontal constraints define how an object behaves, as you resize the Frame along the x axis.
Left maintains the object’s position, relative to the left side of the frame.
Right maintains the object’s position, relative to the right side of the frame.
Left and right maintains the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x axis, when resized.
Center maintains the object’s position, relative to the horizontal center of the frame.
Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.
Vertical constraints define how an object behaves, as you resize the Frame along the y axis.
Top maintains the object’s position, relative to the top of the frame.
Bottom maintains the object’s position, relative to the bottom of the frame.
Top and bottom maintains the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y axis, when resized.
Center maintains the object’s position, relative to the vertical center of the frame.
Scale will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.
To set the constraints for an item:
Adjust the vertical and horizontal constraints in the Auto layout settings in the Design Panel.
Resizing
Change the width or height of an object. Manual resizing can change the aspect ratio of an object. To resize an object click the object to select it & click and drag: the right or left edge to change the object's width, the top or bottom edge to change the object's height, a corner handle resize the object uniformly.
To set the width and height parameters, go to Resizing on the right side toolbar, select "Fixed" to set the non-adjustable width and height, and "Hug Content" to set flexible parameters for objects that will resize to the child elements.
Layer
You can apply blur effects to frames, groups, components, or individual layers. Blur effect - a visual special effect that creates blur in the desired parts of the interface, change the parameters in the Layers section to increase or decrease the blur effect.
Opacity is a basic transparency effect that can be applied to any object. When the opacity of an object is less than 100%, the object appears partially transparent. If you then lower the opacity, the visible portion of the image becomes partially transparent.
Colors
Color styles can be applied to fills, strokes, backgrounds and text. You can even create color styles for images or gradients.
To create a color style:
Select the object you'd like to create a style for.
In the properties panel, click the icon next to the property you would like to save.
Click the icon in the Color styles panel to create a new style.
Give the style a name and description and click Create style. Descriptions display when hovering over the style in the style picker.
Image
To upload an image, select or create a shape on the canvas. Click the fill swatch in the right side panel. This will open the color picker. Click on fill mode and select an image.
If you already have an image applied to a shape as a fill, you can replace the image you've used. This will keep any fill mode settings you've applied, including any cropping or positioning.
There are a few ways to do this:
Drag the image file over the image preview in the Fill modal
Select the image file and add it to replace the previous image.
Selection colors
After an object is selected and you want to change its color, you can select a color from the color picker toolbar as well as the transparency of the element.
Border
You can set width, color, style, and radius of an item’s borders. To adjust the border width, change the values in the "weight" segment. You can also change the style of the border, there are different types of them, for example, solid: one solid bold line is used as a border; dotted : A series of dotted square lines is used as a border. none: No border is created and remains simple.
Shadow
Drop shadows are a great way to add depth and dimension to your designs. You can do this by creating the shadow of an object on a surface behind or below it. Drop shadows can vary in opacity, depending on the effect you want to create. Use drop shadows to: create distance between objects, set the direction of a light source, make your designs stand out against a background, make objects looks three-dimensional, stylize text and icons, add borders around a layer or object.
You can adjust basic shadow parameters such as color and opacity, you can also adjust the X, Y angle of the shadow, decrease or increase the blur effect, or control the length of the element's shadow in the "Spread" segment.
Last updated
