Instructions for editing vector SVG icons or pictures

Instructions for editing vector SVG icons or pictures

In this tutorial, we will tell you how to edit a vector SVG file using the free online graphic editor Figma.

Editor preparation

  1. Go to figma.com
  2. Log in to the site. This can be done using a Google account, or registering a new account by entering an email.

Instructions for editing vector SVG icons or pictures

In the Figma panel, click on the “New design file” button. An editor box will open.

Instructions for editing vector SVG icons or pictures

How to open a file for editing

There are two ways to open a file for editing:

  1. Just drag the file from your folder into the Figma editor window.
  2. Through the main menu of Figma. Click on the icon at the top left of the editor, then click “File”, and then “Place image”. After that, a window for selecting a file will be displayed.

Instructions for editing vector SVG icons or pictures

If it’s a vector SVG file, it will open with all layers and settings, ready for editing.

How to change icon color

  1. Select the object you want to change color.
  2. On the right side of the editor, select a new color from the “Fill” or “Stroke” section, “Design” tab.

Instructions for editing vector SVG icons or pictures

Sometimes, you need to “Double click” on an object to get the properties you need.

Better use the left layer menu to select the object.

Instructions for editing vector SVG icons or pictures

If the colors in the “Fill” and “Stroke” sections do not match the colors of the object. Perhaps the objects are in a group and take on a common group color.

Disband the group. Find the desired group in the layers (panel on the left side), right-click on it and select “Ungroup”.

Instructions for editing vector SVG icons or pictures

The result of the disbanded group. Objects are independent of each other.

Instructions for editing vector SVG icons or pictures

To change the background, select the top layer.

Instructions for editing vector SVG icons or pictures

How to resize an object

  1. Select the object you want to change.
  2. Drag the corners of the object to resize it.
  3. For more extensive changes, on the right side of the editor, use the advanced options in the “Group” section, “Design” tab.

Instructions for editing vector SVG icons or pictures

In the “Group” section, you can change the location, and corner of the object, set the radius of the corners, as well as control the indents if several objects are selected.

Instructions for editing vector SVG icons or pictures

How to save the file in the right size

  1. Select the desired object to save.
  2. On the right side of the editor, in the “Export” section, select the file extension in which you want to save. There are extensions to choose from – PNG, JPG, SVG, and PDF.
  3. In the first parameter of the “Export” section, specify the size of the file. The “1x” option will save the file with the current dimensions, which are specified in the “Group” section. If you specify “2x”, the file will be saved at twice the current resolution.
  4. If you need to save in your own dimensions (for example, 750 px wide), specify “750w” and the editor will save the file 750px wide with aspect ratio. Or specify “800h” and the editor will save the file based on the height.
  5. Click on the “Export (name)” button, and the editor will save the file in the size you need.

Instructions for editing vector SVG icons or pictures