Creating and Editing Shapes in Figma

Key Concepts

Creating and editing shapes in Figma involves several key concepts: using the shape tools, manipulating shapes, grouping and ungrouping shapes, and applying constraints. Each of these concepts is essential for building complex and responsive designs.

1. Using the Shape Tools

Figma provides a variety of shape tools that allow you to create basic geometric shapes such as rectangles, ellipses, lines, and polygons. These tools are located in the Toolbar and can be accessed by clicking on the icons or using keyboard shortcuts.

Example: To create a rectangle, click on the Rectangle Tool in the Toolbar or press the "R" key. Then, click and drag on the Canvas to draw the rectangle. Similarly, for an ellipse, use the Ellipse Tool or press "O" and draw on the Canvas.

2. Manipulating Shapes

Once you have created a shape, you can manipulate it by resizing, rotating, and transforming it. Figma allows you to select a shape and use the handles around it to adjust its size and position. You can also use the Transform panel to enter precise dimensions and angles.

Example: Select a rectangle and drag the corner handles to resize it. To rotate the rectangle, hover over the corner handles until you see a curved arrow, then click and drag to rotate. For precise control, use the Transform panel to input specific width, height, and rotation values.

3. Grouping and Ungrouping Shapes

Grouping shapes in Figma allows you to treat multiple shapes as a single object, making it easier to move, resize, and edit them together. Ungrouping reverses this process, allowing you to edit individual shapes within the group.

Example: Create a few shapes and select them all by holding down "Shift" and clicking each one. Right-click and choose "Group Selection" or press "Cmd + G" (Mac) / "Ctrl + G" (Windows) to group them. To ungroup, select the group and press "Cmd + Shift + G" (Mac) / "Ctrl + Shift + G" (Windows).

4. Applying Constraints

Constraints in Figma allow shapes to resize proportionally when their parent container is resized. This is particularly useful for creating responsive designs. You can apply constraints to individual shapes or groups of shapes.

Example: Select a shape within a frame and open the Constraints panel. Choose "Scale" to make the shape resize proportionally with the frame. Alternatively, choose "Fixed" to keep the shape at a fixed position relative to the frame's edges. This ensures that your design remains consistent across different screen sizes.