Skip to main content

Hi, I just joined Figma and can’t do the very first thing I want to do which is to create a navigation bar.


I used Assets on the left and pulled a Navigation Pill List to my page which gives you 6 Navigation Pills. All I want to do is add one more navigation pill and can’t figure out how to do this and I don’t understand why it’s so hard.


First I thought I could go to the right hand design of the Navigation Pill List and just click a + and add another Link but no, nothing here allows me to add another navigation pill to my list.

Screenshot 2024-09-25 at 11.36.43 am


Next I just selected a Navigation Pill and copy and paste it but it wouldn’t let me move it into the Navigation Pill by drag and drop so I went into Layers and tried to move the new Navigation Pill into the Navigation Pill List but it won’t let me do this either.

Screenshot 2024-09-25 at 11.36.50 am


I’ve been working on this one thing for over 30mins and can’t figure it out. About to quit Figma so any help would be appreciated.

detach the Navigation Pill List instance first so you can edit it, but make sure you’ve turned on all links on the properties as it’s going to be gone when you detach it.


Shortcut key for detach instance: Cmd + Option + B / ctrl + alt + b

Because your Navigation Pill List is a component. You cannot add new layers to an instance (a copy) of a component. What you can do are:


Go to main component and add a pill to the list. All the instances of the component will have the pill you just added.


Or, if you don’t want other instances to have that new pill, just create new variant for the component and edit it. You can also detach the instance you’re working on (right click, detach instance) and make changes however you want, but I don’t recommend detaching especially for components which are used so many times like Navigation, it’s a nightmare to edit later.


There’s also this workaround if you want to retain the component but also don’t want the new pill to show up on all other instances: add a pill to the list, then set its boolean property to False. But normally I don’t like using this trick because it would be hard to manage as I can’t take a glance and see the component structure.

Reply


Terms & ConditionsCookie settings