0
0
FigmaHow-ToBeginner · 3 min read

How to Create a Line in Figma: Simple Steps for Beginners

To create a line in Figma, select the Line tool from the toolbar or press L on your keyboard, then click and drag on the canvas to draw your line. You can adjust the line's length, angle, and style using the properties panel.
📐

Syntax

In Figma, creating a line involves using the Line tool. You can activate it by clicking the line icon in the toolbar or pressing L on your keyboard. Then, click and drag on the canvas to draw the line.

Key parts:

  • Line tool (L): Selects the tool to draw lines.
  • Click and drag: Defines the start and end points of the line.
  • Properties panel: Adjusts stroke width, color, and line style.
text
1. Press L to select the Line tool.
2. Click on the canvas where you want the line to start.
3. Drag the mouse to where you want the line to end.
4. Release the mouse button to finish the line.
💻

Example

This example shows how to create a simple horizontal line and customize its appearance.

text
1. Press <code>L</code> to select the Line tool.
2. Click at point (100, 100) on the canvas.
3. Drag horizontally to point (300, 100).
4. Release the mouse to create the line.
5. In the properties panel, set stroke color to blue and stroke weight to 2 px.
Output
A blue horizontal line 200 pixels long and 2 pixels thick appears on the canvas.
⚠️

Common Pitfalls

Common mistakes when creating lines in Figma include:

  • Not selecting the Line tool and trying to draw with the Rectangle or other shape tools.
  • Dragging too quickly or not releasing the mouse button, which can create unwanted shapes.
  • Forgetting to adjust stroke properties, resulting in invisible or very thin lines.
  • Confusing the Line tool with the Pen tool, which creates paths instead of simple lines.

Always check the properties panel to ensure your line is visible and styled as you want.

text
Wrong way:
- Using Rectangle tool to draw a thin rectangle instead of a line.

Right way:
- Use Line tool (L) and drag to create a true line with adjustable stroke.
📊

Quick Reference

ActionShortcut / Description
Select Line toolPress L or click line icon in toolbar
Draw lineClick and drag on canvas
Change stroke colorUse properties panel > Stroke color
Adjust stroke weightUse properties panel > Stroke weight
Rotate lineSelect line and drag rotation handle or enter angle in properties

Key Takeaways

Use the Line tool (L) to draw lines quickly in Figma.
Click and drag on the canvas to define the line's start and end points.
Adjust stroke color and weight in the properties panel to style your line.
Avoid using shape tools to mimic lines; use the Line tool for best results.
Check the properties panel to ensure your line is visible and styled correctly.