Super new to Figma so apologies if this has been asked before or isn’t phrased properly.
I’ve created a component with 2 variants: selected and unselected.
I want to create a navigation bar for a mobile app that has different icons for each option - e.g. Home, Popular, Hottest, TV Shows (see bottom). The house icon I’ve used here is from a plugin.
Is there any way for me to “replace” each icon easily? Or do I have to detach, delete,and add new icons manually for each new variant?
I’m also not sure how to centre long text underneath each variant, I’m guessing I have to detach it?
Best answer by Brian_Saunders
To elaborate on Gleb’s answer, you first would need to make the individual icons into components in your Figma file. Then you need to use instances of those icons to build your bigger components. If your Nav Icons component is made of those instances, and your Nav Bar component is made of them as well, you will be able to select the icon instances and swap them out using instance swapping in the right-hand panel.
So, it seems you’re missing the bottom level of components—the icons themselves. Once you have those built everything will fall into place for you.
You have a few options for centering the text. You can use auto-layout to do that or just select center alignment on the text itself and position the text in the middle of the frame, with center constraints set on it so it resizes properly.
To elaborate on Gleb’s answer, you first would need to make the individual icons into components in your Figma file. Then you need to use instances of those icons to build your bigger components. If your Nav Icons component is made of those instances, and your Nav Bar component is made of them as well, you will be able to select the icon instances and swap them out using instance swapping in the right-hand panel.
So, it seems you’re missing the bottom level of components—the icons themselves. Once you have those built everything will fall into place for you.
You have a few options for centering the text. You can use auto-layout to do that or just select center alignment on the text itself and position the text in the middle of the frame, with center constraints set on it so it resizes properly.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
