Select which properties in a component can be overridden
I would love to have the ability to create overrides for master components. For example if I create a card, I would like to be able to select a text field, and in the properties panel have an overrides section where I can hit add. The properties panel would then give me a text field where I could type the new text and it would update that component.
That override field would be available on all instances of the component, each with its override content being separated from the other instances.
However, the text itself in the component would still be tied to the master in terms of font, color, position, etc.
This makes it easy to update certain things in a design while still making global adjustments easy. Currently if you change the text or some other property of a component outside the master, master updates will no longer affect it.
Overrides allow you to make adjustments to what you want, without affecting other properties link to the master.
Morgan Caldbeck
shared this idea
-
Drew Solorio
commented
Sounds like you want overrides the way that Framer does them - overriding specific properties of an element. Sounds cool to me.
-
Morgan Caldbeck
commented
What you’re saying is correct, however I feel there are some improvements to be made for persistence. Let's say for example I'm creating a component with multiple states (default, hover and selected). If I make an instance of that component, and change the text on the default state to something different from the original, that text change does not persist to the other states. This is fine, because we can manually go to the different states and change each one. This gets monotonous though, especially when I have 20+ instances of a component that all have to have unique information. It means I have to go repeat this process of selecting the component, then the group and then the text inside, changing it 60+ times.
My suggestion is in the properties panel for the component, we add an "overrides" section. With this feature, I would be able to create the master component, then select the text I will be changing on future instances. I would then go to the "overrides" in the properties panel, click "+", and set that as a "string" (text) field. This way, when I create an instance, instead of clicking through the component and changing the text directly, I could instead type my new text in the "overrides" panel in the text field I created linked to that portion of text. The idea would be that this would update all the text for that layer across all states of that instance.
It would be nice to see this extend to other things as well such as background images, font styles, colors, etc. This would allow great flexibility and rapid data rich prototypes with the least amount of tinkering.