Step by step
Bring it into Figma
Drag the SVG onto the canvas
Or use the import option in the main menu. Figma creates a frame containing one vector layer per path.
Check the background and open areas
Use Remove background under Download options before saving to remove the outer background. In Figma, check enclosed areas of the same color, which are kept as pieces. Delete those only if they should be empty. If you downloaded the original file, you can also remove its background here.
Name the layers
Each layer is one color of the artwork. Naming them, for example Mark, Wordmark and Accent, makes the file easier to hand over.
Make it a component
Select the frame and choose Create component, so every copy updates when you change the original.
Editing
Common edits
Recolor
Select a layer and change its Fill. One change recolors everything in that color.
Resize
Scale the frame with the Scale tool (K) so the shapes resize together.
Combine shapes
Select layers and use Union or Flatten (Cmd or Ctrl + E) to merge them into one shape, for example a one-color icon.
Edit a curve
Double-click a layer to edit its points directly.
Tips
Keeping it light and editable
- Flatten only when you want one shape. Flattened layers can no longer be recolored separately.
- Very detailed traces, such as photos, contain thousands of points and can slow Figma down. Flat artwork stays light.
- Gradients import as Figma gradient fills, so you can edit their color stops.
- Traced text is shapes. To change the wording, retype it with a Figma text layer.