Vectors, icons, and SVG

Fanta has native vector tools: Pen, Node Edit, basic shapes, line, arrow, polygon, star, and path selection. You can refine paths on the canvas and use layer actions such as outline stroke or flatten when appropriate. A selected layer can be copied as SVG from its context menu, and the inspector can export SVG or PDF.

Right-click a selected vector on the canvas and choose Edit vector to enter Node Edit. Its path anchors appear as soon as editing opens. Flatten checks whether it can preserve the artwork's appearance and behavior. It can refuse variable bindings, nested component masters, animated children, masks, unsupported child effects or blends, clipped content, and pattern sources referenced by another layer. Simplify or detach that content first. A supported flatten remains undoable.

For authoring hits, rounded ancestor clips exclude invisible portions of Text, Vector, and Bitmap children. Node Edit can reach a visible vector underneath a clipped child; selected-node controls and parent-frame bounds keep their normal behavior. Source tests cover this repair, while matching installed-app acceptance remains pending.

Boolean shapes

A Boolean layer keeps its operand shapes and an operation: Union, Subtract, Intersect, or Exclude. Select it to change the operation and edit applicable fills and strokes in the inspector. A supported Figma Boolean import keeps editable operands and the imported baked vector appearance. Changing its operation or operands makes Fanta recompute the result. If an imported operation or operand cannot be represented, Fanta may keep a flattened vector instead and report an import warning; inspect the layer before relying on further Boolean edits.

To reshape an authored Boolean, enter one of its vector operands with Edit vector, drag a path anchor, and leave Node Edit. The Boolean result updates from the operands. Check the result and save the design; imported baked Boolean geometry may behave differently when recomputed.

Text on a path

Select one visible, unlocked vector and choose Text on Path. Fanta replaces the vector with a TextPath layer, carries its path into the text layer, and opens inline editing. The path must be finite and nonzero length. Rounded corners and clipped geometry must be flattened or removed first. The vector may have no paint or one normal solid fill or stroke; gradients, image paints, blend modes, and multiple paints are not accepted by the conversion.

TextPath has its own FNX element and owned path data, so it survives a source round trip. To change the text later, select one editable TextPath layer and choose Edit object in the Design inspector header, or use Edit text in its canvas context menu. The inspector action selects all text when editing opens. See Tools for the canvas workflow.

Work with an icon

1. Draw with Pen or start from a basic shape or arrow.
2. Select Node Edit to adjust the path.
3. Set fills and strokes in the inspector.
4. Copy the layer as SVG or export it from the inspector.
5. Reopen the exported file in your target workflow to confirm its appearance.

The live design tool surface can create frames, rectangles, ellipses, text, images, and instances and can change their properties. It does not expose a dedicated create_svg or create_icon operation. SVG media import has a conversion path that can make supported geometry editable, but it rejects features such as embedded images, text, masks, filters, patterns, and some gradients. For complex SVG artwork, verify the imported result.

Tool definitions are in crates/fig_viewer/src/tools.rs, Text on Path conversion in crates/fanta-tools/src/text_path.rs, SVG conversion in crates/fig_viewer/src/generation_media.rs, and export in crates/fig_viewer/src/export.rs.