Skip to main content

Hi all! I’m trying to figure out the best component workflow, and having a hard time deciding how many “layers” deep to go. Here is an example:


I have a component for Profile Pictures. Within this component I have many variants with different user profile pictures, and different states for online, offline, etc. I use properties to define the different characteristics of each of these variants.


The issue lies in that when I need to update on of these properties, for instance changing the image we are using for one of our user profiles, I need to manually update the image across all variants that have this image.


This makes me wish I had created a component within this component for profiles pictures! But this seems to lead to an infinite spiral of components within components which impedes workflow and agility. Does anyone have suggestions about easy ways to make changes across components and variants?


Thanks a mil

Hi @Skylar_Scafidi, Thanks for writing in! I understand how painful it is.

While I wish there was an easy solution for this like converting variants into components, it might involve creating a component for each profile picture and nesting those instances into another component.


You can check for some tips for nested components on Component Architecture Best Practices from Figma best practice


I did a bit of digging for plugins that might help with your situation, and found this one: Master Please take a look to see if it works for you!


Also, there is a similar topic from the other community member here: How to create a component retroactively?

Feel free to jump in!


Thank you,

Reply


Terms & ConditionsCookie settings