Path Editing Tool

Overview

The Path Editing Tool provides a powerful way to create and modify vector paths in Figpea. With this tool, you can precisely control every aspect of your SVG paths, from simple lines to complex curves with multiple control points.

Getting Started

To edit a path:

Select a path layer in your document
Click the "Edit Path" button in the properties panel
The path editing interface will appear, showing all anchor points and control handles
When you're done, leave path editing with Esc, Ctrl/Cmd + Enter, or the Stop Editing button in the properties panel. Your edits are kept — leaving the mode never discards them.

Editing Tools

The path editor provides three main tools, accessible from the toolbar at the bottom of the screen:

Select Tool

The Select Tool is your primary tool for modifying existing paths:

Select points: Click on any anchor point to select it
Multi-select: Hold Shift while clicking to select multiple points
Rectangle selection: Drag in empty space to create a selection rectangle
Move points: Drag selected anchor points to reposition them
Adjust curves: Drag control handles (purple dots) to change curve shape
Convert point types: Double-click on a point to toggle between smooth and corner points

Add Tool

The Add Tool lets you extend your path with new segments:

Add points: Click anywhere to add a new anchor point
Preview: As you move your cursor, a preview line shows where the new segment will appear
Complete segment: Click to place the point and create the segment
Close path: Click near the starting point to close the path

Insert Tool

The Insert Tool allows you to add detail to existing paths:

Insert between points: With an anchor selected, activate Insert Tool to add points between existing segments
Maintain curves: When inserting between curved segments, the tool preserves the original curve shape
Close path: Click near the first point of an open path to close it with a smooth curve

Path Operations

Working with Points

Delete points: Select one or more points and click the Delete button
Insert after: Select a point and click Insert After to add a new point after it
Remove segment: Select a point and click Remove Segment to delete the entire segment

Converting Point Types

You can convert selected points to different types using the Convert To menu:

Line segments: Creates straight lines with corner points
Curve segments: Creates smooth Bézier curves
Horizontal/vertical lines: Creates perfectly horizontal or vertical line segments

Opening and Closing Paths

Close path: Connect the last point to the first point to create a closed shape
Open path: Break a closed path to create an open path

Round Corners

Round Corners replaces each selected corner with a clean tangent arc of the radius you type — softening a logo, rounding a polygon or star, or taking the hard edges off an imported path.

To apply Round Corners, first open Edit Path mode by selecting a path layer and clicking the Edit Path button. Select one or more corner points (Shift-click to add to the selection, or drag a selection rectangle around multiple points), then click the Round Corners button, type a radius value, and click Apply. The operation applies only to the corners you selected, and all selected corners are rounded with a single radius value—per-corner radii are not supported.

This is a destructive operation: one undo reverses it completely. If you apply Round Corners again to a corner that is already rounded, nothing happens—those points now sit on a curved segment, and curved corners are skipped.

Only corners between straight segments can be rounded. A corner with a curved segment on either side is skipped, and the rest of your selection is still rounded; the count of roundable corners is shown before you apply so you know what to expect. A radius too large for a corner is automatically reduced to the largest radius that fits, rather than being silently ignored.

This is not the rectangle's corner radius property in the Rect section of the Inspector, which stays live and re-editable and can carry four different values per corner. Round Corners rewrites the path itself: a rectangle's corner radius exports as CSS border-radius, while a rounded path exports as path geometry.

For more about working with anchor points, see Working with Points and Converting Point Types. To learn more about vector operations, see Vector Operations. For information about exporting your rounded paths, see Exporting.

Keyboard Shortcuts and Modifiers

Use these keyboard modifiers for precise control:

Key	Function
`Shift`	When moving control points: Maintain symmetrical handles
`Esc`	With the Add or Insert tool active: cancel it and return to the Select tool. With the Select tool: clear the selected anchor points — press it again with nothing selected to leave path editing.
`Ctrl/Cmd + Enter`	Leave path editing straight away, whichever tool is active.
`Double-click`	Toggle between smooth and corner points

Leaving path editing is not an undo: whatever you changed stays changed. Use Ctrl/Cmd + Z to undo an edit.

Snapping Features

The path editor includes intelligent snapping to help you create precise paths:

Point snapping: Automatically snap to existing anchor points
Alignment snapping: Snap to horizontal or vertical alignments with other points
Visual guides: Green dotted lines appear when snapping is active

While using the Add or Insert tool, hold the Alt key to temporarily disable snapping.

Best Practices

Creating Clean Paths

Start simple: Begin with basic shapes and add detail gradually
Use minimal points: Fewer points create smoother, more efficient paths
Leverage curves: Use curves instead of many straight segments for smooth shapes
Maintain symmetry: Use Shift when adjusting control handles for symmetrical curves

Editing Efficiently

Choose the right tool: Use Select for adjustments, Add for new segments, Insert for adding detail
Use keyboard modifiers: Shift, Alt, and Ctrl/Cmd provide precise control
Utilize snapping: Enable snapping for precise alignment with other elements
Convert point types: Use the Convert To feature to change how segments connect

Troubleshooting

Common Issues

Points not selecting: Make sure you're using the Select tool and clicking directly on the point
Unexpected curve behavior: Check control point positions and consider converting between point types
Snapping not working: Make sure you're not holding the Alt key, which temporarily disables snapping
Path segments disappearing: This can happen when deleting critical points; use Undo if needed

Advanced Techniques

Creating Complex Shapes

For complex shapes:

Break the shape into multiple path segments
Use a combination of curves and straight lines
Leverage the Convert To feature to change segment types as needed

Precision Editing

For precise control:

Zoom in for detailed work on small areas
Use the Insert tool to add detail to specific areas
Leverage snapping to align with existing elements
Use keyboard modifiers for fine-tuned adjustments