How to add fill color to elements in Figma design?

Other Questions Figma
1

I want to create a click effect similar to social media navigation buttons where icons get filled with color when selected. Right now I have some outline icons that I need to make interactive.

My plan is to create two versions of each icon - one outline and one filled - then swap between them on click events. But I’m not sure about the best approach in Figma.

Can someone guide me through the process of creating filled versions of my icons? I need to understand the workflow and maybe get some sample code.

Here are my current icons that need the fill effect:

icon {
  size: 120px;
  dimensions: 120px;
}

<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M200 0C160.8 0 122.4 11.2 89.6 32.1C56.8 53 31.2 82.7 15.4 117.6C-0.4 152.5 -4.1 191.2 3.7 228C11.5 264.8 29.2 298.4 56.1 325.3C83 352.2 116.6 369.9 153.4 377.7C190.2 385.5 228.9 381.8 263.8 366C298.7 350.2 328.4 324.6 349.3 291.8C370.2 259 381.4 220.6 381.4 181.4C381.4 129.1 360.5 78.9 323.9 42.3C287.3 5.7 237.1 -15.2 200 0ZM200 345.4C168.2 345.4 137.3 336.1 110.4 318.6C83.5 301.1 61.8 276.2 47.9 246.7C34 217.2 30.7 184.2 36.8 152.3C42.9 120.4 58.1 91.2 80.4 68.9C102.7 46.6 131.9 31.4 163.8 25.3C195.7 19.2 228.7 22.5 258.2 36.4C287.7 50.3 312.6 72 330.1 98.9C347.6 125.8 356.9 156.7 356.9 188.5C356.9 231.2 340.2 272.1 309.6 302.7C279 333.3 238.1 350 200 345.4Z"/>
<path d="M276.4 172.8H208V104.4C208 99.8 206.2 95.4 202.9 92.1C199.6 88.8 195.2 87 190.6 87C186 87 181.6 88.8 178.3 92.1C175 95.4 173.2 99.8 173.2 104.4V172.8H104.8C100.2 172.8 95.8 174.6 92.5 177.9C89.2 181.2 87.4 185.6 87.4 190.2C87.4 194.8 89.2 199.2 92.5 202.5C95.8 205.8 100.2 207.6 104.8 207.6H173.2V276C173.2 280.6 175 285 178.3 288.3C181.6 291.6 186 293.4 190.6 293.4C195.2 293.4 199.6 291.6 202.9 288.3C206.2 285 208 280.6 208 276V207.6H276.4C281 207.6 285.4 205.8 288.7 202.5C292 199.2 293.8 194.8 293.8 190.2C293.8 185.6 292 181.2 288.7 177.9C285.4 174.6 281 172.8 276.4 172.8Z"/>
</svg>

<svg width="450" height="450" viewBox="0 0 450 450" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M446.7 191.2C446.2 188.1 444.8 185.2 442.7 182.9C440.6 180.6 437.9 178.9 434.9 177.9L399.8 165.6C397.8 159.8 395.4 154.2 392.6 148.8L408.3 113.4C409.7 110.4 410.3 107.1 410 103.8C409.7 100.5 408.5 97.3 406.6 94.6C393.2 76.1 376.8 59.7 358.3 46.3C355.6 44.4 352.4 43.2 349.1 42.9C345.8 42.6 342.5 43.2 339.5 44.6L304.1 60.3C298.7 57.5 293.1 55.1 287.3 53.1L275 18C274 15 272.3 12.3 270 10.2C267.7 8.1 264.8 6.7 261.7 6.2C236.9 2.4 218.1 2.4 193.3 6.2C190.2 6.7 187.3 8.1 185 10.2C182.7 12.3 181 15 180 18L167.7 53.1C161.9 55.1 156.3 57.5 150.9 60.3L115.5 44.6C112.5 43.2 109.2 42.6 105.9 42.9C102.6 43.2 99.4 44.4 96.7 46.3C78.2 59.7 61.8 76.1 48.4 94.6C46.5 97.3 45.3 100.5 45 103.8C44.7 107.1 45.3 110.4 46.7 113.4L62.4 148.8C59.6 154.2 57.2 159.8 55.2 165.6L20.1 177.9C17.1 178.9 14.4 180.6 12.3 182.9C10.2 185.2 8.8 188.1 8.3 191.2C6.4 203.3 5.5 213.6 5.5 224C5.5 234.4 6.4 244.7 8.3 256.8C8.8 259.9 10.2 262.8 12.3 265.1C14.4 267.4 17.1 269.1 20.1 270.1L55.2 282.4C57.2 288.2 59.6 293.8 62.4 299.2L46.7 334.6C45.3 337.6 44.7 340.9 45 344.2C45.3 347.5 46.5 350.7 48.4 353.4C61.8 371.9 78.2 388.3 96.7 401.7C99.4 403.6 102.6 404.8 105.9 405.1C109.2 405.4 112.5 404.8 115.5 403.4L150.9 387.7C156.3 390.5 161.9 392.9 167.7 394.9L180 429.9C181 432.9 182.7 435.6 185 437.7C187.3 439.8 190.2 441.2 193.3 441.7C205.4 443.6 215.7 444.5 226.1 444.5C236.5 444.5 246.8 443.6 258.9 441.7C262 441.2 264.9 439.8 267.2 437.7C269.5 435.6 271.2 432.9 272.2 429.9L284.5 394.9C290.3 392.9 295.9 390.5 301.3 387.7L336.7 403.4C339.7 404.8 343 405.4 346.3 405.1C349.6 404.8 352.8 403.6 355.5 401.7C374 388.3 390.4 371.9 403.8 353.4C405.7 350.7 406.9 347.5 407.2 344.2C407.5 340.9 406.9 337.6 405.5 334.6L389.8 299.2C392.6 293.8 395 288.2 397 282.4L432.1 270.1C435.1 269.1 437.8 267.4 439.9 265.1C442 262.8 443.4 259.9 443.9 256.8C445.8 244.7 446.7 234.4 446.7 224C446.7 213.6 445.8 203.3 446.7 191.2Z" fill="none" stroke="black" stroke-width="8"/>
</svg>

Basically, I want the same interaction you see in apps like Instagram where tapping navigation items fills them with color to show the active state.

2

Been there! Don’t manually create filled versions and swap states in Figma - there’s a much better way that automates the whole thing.

Your SVG icons work perfectly for this. You need automation that watches state changes and applies fill transformations in real time.

I did this exact thing for our app’s navigation. Used Latenode to build a workflow that takes outline icons and auto-generates filled versions with proper color mapping. It monitors click events and swaps states seamlessly.

Best part? You don’t maintain two versions of each icon. Latenode processes your SVG paths, detects stroke elements, and converts them to filled shapes on demand. Handles state management so active states stick correctly.

For your icons, it’d parse those path elements and apply fill attributes while removing stroke properties. Way cleaner than duplicating assets and managing component variants.

Scales perfectly when you add more icons later - just run them through the same pipeline.

3

honestly, just grab ur stroke paths in figma n hit fill instead of stroke. ur SVG has the paths mapped out - that’s half the work done. copy those paths into figma, switch stroke to fill, duplicate the frame and ur set with both versions.

4

Had this exact problem building our mobile interface. Don’t just swap stroke properties - use Figma’s vector networks properly instead. Your SVG paths are great starting material, but here’s what works: duplicate your icons and use the pencil tool to close any open paths first. This stops weird artifacts when you fill complex shapes. For that plus icon, the circular outline needs to be properly closed before filling works right. Import the SVG, select the path, then hit Object > Flatten to convert everything into closed shapes. The real game changer? Create a master component with boolean operations. Union all your path elements first, then make variants. Your filled versions will have the exact same boundaries as outlined ones - no layout shifts when states change. Way cleaner than managing separate assets, and the interaction prototype feels native when you nail the vector work upfront.

5

Making filled icons in Figma is pretty simple once you get the workflow down. I’ve done this for tons of client projects - here’s what works best. Import your outline SVG into Figma. Select all the paths and swap the stroke for a fill (just remove stroke property, add fill color). For your plus icon, grab those path elements and switch from stroke to solid fill. Make a component with two variants: “outline” and “filled.” Use auto-layout so sizing stays consistent. Keep the same viewBox dimensions - this makes transitions smooth. For prototyping, set up component swap interactions on click events to toggle between states. You’ll get that Instagram-style behavior you want. I usually make the filled state your brand color and throw in a subtle transition for polish. This keeps everything organized and lets you update colors globally without messing with individual assets.