Skip to main content

I’ve created a design system that has lots of components with different variants to each component.


I then have a master file that pulls these components in and lays then out of the page where they would sit in the final page. In my view I can select the component and change the variant that is displayed to show the component in its different states.


When I share access to the developers to view the master file they can only see the component in the state that I set it as, but it would be useful if the developers could also cycle through the different variant states for each component as well. From what Ive seen this doesn’t seem to be possible unless I’m missing something?


Any help would be great.


Thanks

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:


An example of nested component (button)


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


an example of inner elements of an instance


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


Your target


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

Reply


Terms & ConditionsCookie settings