Dashboard Mode - Rectangle and ellipse tools
Goal
Understand how to use rectangle and ellipse tools in Figma to create basic shapes for dashboard design.
0
0
Rectangle and ellipse tools in Figma - Dashboard Guide
Sample Data
| Shape | Width (px) | Height (px) | Fill Color | Border Radius (px) |
|---|---|---|---|---|
| Rectangle 1 | 200 | 100 | #4CAF50 | 0 |
| Rectangle 2 | 150 | 150 | #2196F3 | 20 |
| Ellipse 1 | 120 | 80 | #FFC107 | N/A |
| Ellipse 2 | 100 | 100 | #E91E63 | N/A |
Dashboard Components
- Rectangle 1: A simple rectangle with width 200px, height 100px, green fill (#4CAF50), no border radius.
- Rectangle 2: A square with width and height 150px, blue fill (#2196F3), border radius 20px for rounded corners.
- Ellipse 1: An ellipse with width 120px, height 80px, yellow fill (#FFC107).
- Ellipse 2: A perfect circle with width and height 100px, pink fill (#E91E63).
These shapes can be combined to build dashboard backgrounds, highlight areas, or decorative elements.
Dashboard Layout
+----------------------+ +------------------+ | | | | | Rectangle 1 | | Ellipse 1 | | (200x100, green) | | (120x80, yellow)| | | | | +----------------------+ +------------------+ +----------------------+ +------------------+ | | | | | Rectangle 2 | | Ellipse 2 | | (150x150, blue, rad) | | (100x100, pink) | | | | | +----------------------+ +------------------+
Interactivity
Users can select each shape to adjust properties like size, fill color, and border radius using Figma's right panel. Shapes can be moved or layered to create complex dashboard designs. Grouping shapes allows moving multiple elements together.
Self Check
If you change the border radius of Rectangle 1 to 30px, which shapes visually update?
Answer: Only Rectangle 1 changes to have rounded corners; other shapes remain the same.
Key Result
Basic dashboard shapes created using rectangle and ellipse tools in Figma with different sizes, colors, and border radius.