Adding elements is fundamental to designing in Figma. You can add various types of elements, such as frames, shapes, text, images, and components, using several intuitive methods.
The most common ways to add elements include using the main toolbar, accessing the Assets panel for components, and utilizing keyboard shortcuts for speed and efficiency.
Core Methods for Adding Elements
Figma provides multiple ways to bring building blocks onto your canvas, catering to different workflows and element types.
Using the Toolbar
The primary way to add basic shapes, frames, and text is through the toolbar located at the top of the Figma interface.
- Shapes: Click the square icon (Rectangle tool). You can then select other shapes like Line, Arrow, Ellipse, Polygon, or Star from the dropdown. Click and drag on the canvas to draw your shape.
- Frames: Click the Frame tool icon (looks like a hashtag or grid). You can then select from preset frame sizes (like Phone, Tablet, Desktop, Watch, Paper, or Social Media) from the right-hand properties panel, or click and drag to create a custom frame size.
- Text: Click the 'T' icon for the Text tool. Click on the canvas to create a text layer or click and drag to create a fixed-width text box.
Using the Assets Panel (Components)
For reusable elements like buttons, icons, headers, or any saved components and component sets, you'll use the Assets panel.
- Go to the left sidebar and click the "Assets" tab.
- Browse through your local components, team library components, or external libraries.
- You can search for specific components or navigate through folders if your library is organized that way.
- Click and drag the desired component from the Assets panel directly onto your canvas.
Pro Tip (Referenced Method): For quick component insertion, especially from large libraries, you can use keyboard shortcuts. As highlighted in some tips, you can use the Control key along with other shortcuts (like Shift + I) to quickly bring up the resource picker. This allows you to search and navigate through your library folders using the keyboard, facilitating a rapid workflow for inserting components directly onto your canvas without needing to manually browse the Assets panel.
Using Keyboard Shortcuts
Mastering keyboard shortcuts is essential for a faster design workflow. Many tools have dedicated shortcuts:
| Element Type | Tool | Shortcut (Windows/Linux) | Shortcut (macOS) |
|---|---|---|---|
| Frame | Frame Tool | F |
F |
| Rectangle | Rectangle | R |
R |
| Ellipse | Ellipse | O |
O |
| Text | Text Tool | T |
T |
| Line | Line | L |
L |
| Insert Comp. | Quick Insert | Shift + I |
Shift + I |
Once a tool is selected with a shortcut, click or click-and-drag on the canvas to create the element.
By combining these methods – using the toolbar for basics, the Assets panel and quick insert shortcuts for reusable components, and general keyboard shortcuts for efficiency – you can effectively add and arrange all the elements you need to build your designs in Figma.
