Allowing developers to see different component variants

Any answer to this. I am also in the same situation.

Hey there.

there is no way to allow developers to change a component’s variants unless you give them “edit” access.

However, There are other ways to show them what you want. There are a few things that you can do:

1. For atomic components like buttons: (go to the main component button)
   There is a “go to main component” button in “inspect mode” for developers. they can find the main component and see all the variants. you can have some documentation linked to your component, or visually explain the states using text or etc.

2. For interactive components like dropdowns: (create prototype)
   As we call it interactive, sometimes changing states is not enough. if you only want to show some variants, then the first option is the answer, if you have a more complex system, it’s better to design all states of the page to show the actions, you can make a prototype to show all the actions or animations that you need to communicate with your developer team. you can add some description on how to use it, allowing the developer to click or mutate variants through the prototype

Hope this helps. Let me know if you still find it complex.

I tried to share a design file we worked on with a developer and I gave him permission for view mode only - and he couldn’t find the ‘Got to main component’ option, it’s just hidden for him. What could be the reason?

I double-checked now. The Inspect section in both “edit mode” and “view mode” are the same. If a user selects an instance of a component, they would see something like the image below:

if you select an inner element inside an instance, you’ll get something like this:

The “four filled diamonds” at the top of the image is the button that you are looking for. (it represents the component you designed)

As we know, Figma uses a Filled diamond as the main component, and an empty diamond for instance.