Creating a card with custom icons without creating a variant for each icon

Question

Is there a way of creating a card to allow you as the Figma editor to change the icon used without having to create a variant for each icon you want to or may want to use.
I’ve used SketchApp before and you could create a skeleton/shell of a card or whatever you wanted with a placeholder image or fill and then maybe Lorem Ipsum text, when you place the instance/component into your design you could do an override of the icon and/or text by uploading a PNG or SVG into the component without having to update the master so you could experiment with different icons without having create a component or variant for each icon.
Is that override option available in Figma or is it all handled using instances from a asset library or team library.
Sorry, this might be a basic question for you seasoned Figma users, but SketchApp seemed to handle reusable components/instances a lot easier.

Amrul_Haqqi · Answer

So basically you want to make a reusable component for a card, that each card instance you apply into your design might have a different icon and you want to have access to set their icon individually.

actually I have a simple way to that and you can follow this step by step:

First thing you should define and put all the icons you want into Figma
Make all the icons as a component set, then you may want to set the name for each icons to help you in the future.
Let’s make your card design!
this is IMPORTANT. Apply your icon component that you have made into your card design, so you can actually change the icon that you want via properties
Make that whole card as a Component,
Finish!

You can now use your card component into your design and you can change your icon by selecting the icon inside the card instance and set which icon you want to apply in the Properties,

Hope this help!

Creating a card with custom icons without creating a variant for each icon

1 reply

Solved topics

Request of a refund

Problem about autolayout

Drop shadow is applied, as if the background was not removed.

Export freeze

Monitoring memory usage on a file after fixing performance issues

Cookie policy

Cookie settings

Related topics

Variables REST API is missing the description fieldicon

Unable to update variable description - REST Apiicon

Get DirectionalTransition information via REST APIicon

Rich component descriptions on the REST APIicon

REST API Variablesicon

Solved topics

Request of a refund

Problem about autolayout

Drop shadow is applied, as if the background was not removed.

Export freeze

Monitoring memory usage on a file after fixing performance issues

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Cookie policy

Cookie settings