Shapes are fundamental building blocks in design, forming the majority of layers in any Figma project. Whether you’re crafting intricate interfaces or simple mockups, understanding how to use shape tools is essential. Figma provides a suite of intuitive shape tools that empower you to create everything from basic rectangles to complex stars. This guide will walk you through each of Figma’s shape tools, showing you Cara Membuat Tools and how to manipulate them to bring your design visions to life.
You can find all these tools conveniently located under the Shape tools menu in the toolbar. Just click the arrow next to the Rectangle icon to explore the options.
For efficient workflow, remember these handy shortcuts when working with shapes:
- Shift: Hold Shift while dragging to create perfect squares, circles, and regular polygons.
- Option / Alt: Use Option (Mac) or Alt (Windows) to draw and resize shapes from their center point.
- Shift + Option / Alt: Combine both Shift and Option/Alt for proportional resizing from the center.
For those intricate designs requiring unique forms beyond basic shapes, Figma’s Pen tool is your go-to for building custom vector networks. Dive deeper into vector networks here →
Rectangles: The Foundation Shape Tool
The Rectangle tool is your starting point for creating both rectangles and squares. It’s a versatile tool, and understanding cara membuat tools like rectangles is crucial.
- Select the Rectangle tool from the toolbar, or simply press R on your keyboard.
- Click anywhere on your Figma canvas and drag to draw your rectangle. As you drag, you’ll see the dimensions of the rectangle displayed below its bottom edge, giving you precise control over size.
- Once drawn, each corner of the rectangle features a handle. Use these handles to resize the shape as needed, stretching and scaling it to your desired proportions.
Rounding Corners for Softer Rectangles
Beyond basic resizing, rectangles in Figma offer an additional level of customization: corner radius adjustment. Each rectangle has four small circular handles located inside each corner.
Drag these handles inwards to round the corners of your rectangle, creating softer, more rounded shapes. Figma allows you to precisely control the corner radius, letting you achieve the exact look you need. Learn more about corner radius adjustment →
Lines: Dividing and Defining with Precision
The Line tool is essential for creating straight lines in any direction. Lines are incredibly useful for visually separating content within your designs or for mimicking CSS borders to define elements. Understanding cara membuat tools like lines enhances your design’s structure.
- Select the Line tool from the shape tools menu or use the shortcut L.
- Click on your canvas and drag in any direction to draw a line. The direction you drag determines the line’s angle and length.
- For detailed customization, explore the Stroke section in the right sidebar. Here, you can adjust the line’s color, position, thickness (weight), style (solid, dashed, etc.), and even the appearance of its endpoints with different tips or caps. Explore line customization options →
Creating Dashed Lines for Visual Variety
Dashed lines offer a stylistic variation, perfect for subtle dividers or design accents. Figma makes creating them straightforward:
- Either draw a new line or select an existing one you wish to modify.
- Navigate to the Stroke section in the right sidebar and click the icon to open the Advanced stroke settings menu.
- In the expanded menu, you’ll find Dash and Gap fields. Enter your desired values for the length of each dash and the space between them to create your custom dashed line.
Arrows: Guiding the Eye and Indicating Direction
The Arrow tool builds upon the Line tool, allowing you to create directional arrows. These can be one-sided or two-sided and are invaluable for flowcharts, process diagrams, or simply directing user attention in your designs. Knowing cara membuat tools like arrows adds a layer of communication to your visuals.
- Select the Arrow tool from the shape tools menu, or use the shortcut ⇧ Shift L.
- Click and drag on the canvas to draw your arrow. Dragging determines the arrow’s direction and length.
Similar to lines, arrows are highly customizable through the Stroke properties in the right sidebar. You can adjust color, weight, style, and, importantly, customize the tips or caps at the arrow’s endpoints to achieve the desired visual style. Learn more about arrow customization →
Ellipses and Circles: Curves and Rounded Forms
The Ellipse tool is your gateway to creating both ellipses (ovals) and perfect circles. These shapes are fundamental for icons, buttons, and more organic design elements. Understanding cara membuat tools like ellipses unlocks curved shapes in your designs.
- Select the Ellipse tool from the shape tools menu, or press O.
- Click and drag on the canvas to draw an ellipse. As you draw, the shape’s dimensions are displayed in blue below the layer, helping you size accurately.
- Like other shapes, ellipses have a blue bounding box with corner handles for resizing, allowing you to adjust its overall dimensions.
Tip: The Ellipse tool’s versatility extends beyond basic ovals and circles. By manipulating its properties, you can create a range of other useful shapes, including semi-circles, pie charts, rings, donuts, and semi-circular rings. Explore advanced ellipse techniques →
Polygons: Multi-Sided Shapes for Versatility
The Polygon tool allows you to create enclosed shapes with any number of straight sides. The default polygon is a triangle, but its adaptability makes it powerful. Mastering cara membuat tools like polygons expands your geometric design capabilities.
- Select the Polygon tool from the shape menu.
- Click and drag on the canvas to create your polygon. The shape’s dimensions appear in blue below the object as you draw.
- Polygons also feature a blue bounding box with corner handles for resizing.
Double-clicking on a polygon layer enters Edit object mode. This unlocks further manipulation:
- In edit mode, you can add additional points to the polygon, transforming it into more complex custom shapes. You can also individually manipulate each point to fine-tune the polygon’s form.
- Polygons can also have rounded corners. Hover over a corner handle until the radius indicator appears. Click and drag the handle towards the center of the polygon to round its corners, adding softness to your multi-sided shapes.
Understanding Polygon Bounding Boxes
You might notice that when drawing a polygon, especially triangles, the blue bounding box extends below the shape. This is intentional, designed to maintain consistent bounding box behavior even as you add more points and reshape the polygon.
To make the bounding box precisely fit the polygon’s actual boundaries, you can “flatten” the shape. Right-click on the shape and select Flatten, or use the keyboard shortcut:
- Mac: Command + E
- Windows: Ctrl + E
Stars: Adding Flair with Starbursts and Star Shapes
The Star tool creates polygon-based star shapes. By default, it generates a five-pointed star with ten sides, perfect for icons, ratings, or decorative elements. Learning cara membuat tools like stars lets you add visual interest and starburst effects.
-
Select the Star tool from the shape tools menu.
-
Click and drag on the canvas to draw your star.
-
Stars come with three interactive handles for detailed manipulation:
-
Count: This handle controls the number of points on your star. Drag it to increase or decrease the points, ranging from a minimum of three to a maximum of 60, allowing for a variety of star densities.
-
Ratio: The Ratio handle adjusts the depth of the star points, changing the distance of the inner points from the star’s center. It’s expressed as a percentage of the star’s diameter, letting you create sharp, spiky stars or softer, less defined star shapes.
-
Radius: The Radius handle allows you to round the points of the star, softening its appearance and creating more stylized star shapes.
-
By mastering these shape tools and understanding cara membuat tools in Figma, you gain a powerful foundation for creating a wide range of designs, from simple layouts to complex illustrations. Experiment with each tool, explore their properties, and unlock your creative potential within Figma’s versatile design environment.
