Svg Color and Overlay Edit Figma

SVG Icons are selective icons that are used for infographic purposes on websites. An SVG icon has it's default color set & changing it's color can require a step of tasks, which however can be achieved on Figma. In this article, we will learn how to color an svg and also how to use overlay edits options in Figma.

What is SVG Color?

An SVG Icon is an XML (Extensible Markup Language) vector image that is used for particular infographics. Here we will learn how can we change the color of an SVG Icon:

Step 1: Add an icon using Freepik in the centre of the frame.

Step 2: Add a rectangle on the top of the icon & add a color fill, say red to it.

Step 3: Select both the rectangle & the icon and the option Use as Mask (Ctrl + Alt + M).

Step 4: The color of the rectangle is applied to the icon. (Red OR Green)

Changing the color the Green.

Overlay Edit Figma

Overlay is a property in the Prototype section of Figma that allows us to create functionalities + animations in it. It has several properties on what would happen when we click, hover or drag mouse over a button & how would the background change, what would be the effect of another frame over it, etc.

This is the prototype section which lies in the top row & below are the steps to edit overlay in Figma:

Step 1: Add a frame in the design file.

Step 2: Add an icon in the centre of the file.

Step 3: Add the same icon with different color

Add the same icon in the frame outside & change it's color. Change the icon into a frame or add it in one.

Step 4: Add Prototype connection

Use the plus button in the frame to connect it to the other frame & the following properties will show up on your screen.

Step 5: Change the "Navigate to" to "Open Overlay" and add a frame to it alongwith the desired animation.

Step 6: Add a Background Color

Add the background color which would appear when the frame 2 would take the place of Frame 1

Step 7: Open the Final Presentation

This is the final animation in presentation view & here's how to open the design in presentation view. Click on the play icon in the top row:

Here is the final design:

Step 8: Swap Overlay

On clicking Swap overlay instead of Open overlay, the frame would appear permanently on the screen & it would get swapped as the name suggests. The final design of Swap Overlay would be like this:

Properties of Overlay Edit in Figma

Overlay in Figma has the following three properties:

• Position of Frame: The position of frame is the setting where the second frame will appear when clicked or hovered upon the first frame. It can be centre, left, right or can be manually set by the user.

• Close when Clicked Outside: When clicked outside of the frame 2, the frame 2 should close or not, this is specified by the checklist of Close when Clicking outside.

• Background behind overlay: On opening the frame 2, sometimes the user would want the previous frame to become slight dim, or gray or different in color. This can be done by setting the fill property of the background behind overlay.

Conclusion

SVG Icons are handy in any design and they require at times change of colors & edits. The above steps to change colors of SVG are effective & the properties of overlay & the different ways to set it up help in building up the Prototype for a design. These help in enhancement of our design & make it look even better & appealing.