1

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 delete, detach, 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?

enter image description here

1

Yes, the icons can be replaced easily and you do not need to detach the component even. With the new features of Figma - variants, and auto-layout, all this can be done very easily. Slightly longish answer, but here's how

Step 1:

  • Make all the icons into components.
  • Convert the componentized icons to a variant. Name it in a manner that is understandable to you later.

icons converted to components in Figma

components combined into a variant in figma

Step 2:

  • Using an icon from the variant, make the selected state - with the bar and text. Convert this into a component and apply auto layout.
  • Centre align everything in the auto-layout/ or based on your need. I have centre aligned it here so the icon always stays centered even when the tab text becomes longer.
  • Note: Since this component is using an instance of another component, it will use the icon variants defined in the previous component.

component of the selected state

  • Here is how each part of the selected state is set up. Honestly, it is some trial and error and playing around with the different options, till you reach a stage where you think it will tackle every use case you have in mind.

enter image description here

Step 3:

  • Here is when the magic begins. Use the component and switch out the icon since it is setup as a variant.
  • To create a navbar, use autolayout and swap stuff out. Clicking on the icon of the instance of the component reveals the type info (say A, B, C, D, E) on the RHS panel, and the icon component can be swapped out there.

enter image description here

  • Autolayout is applied to multiple instances of the same component here

enter image description here

  • To make the unselected icon, I have used the same selected state, deleted the text (since it is an instance of the component, pressing delete just hides the text) and changed the color of the selectedBar to transparent.

enter image description here

Hope this helps you to get started!

0

You need to make icons into components as well: you can swap between components in nested instances. Here is a video showing this:

https://www.youtube.com/watch?v=IHEh9HFBtFU

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.