Hi guys!
Is there a way to “lock” specific variants/overrides and color options in a component used in two products? For example, I want to enable color selection/override in product “A” but don’t want designers to change color or override in product “B”.
Thanks!
Hi, as far as I know, this is one of the few areas where Sketch is still better than Figma, because you can’t lock overrides (except locking the whole layer) atm.
What I usually do is specify which overrides are allowed in the layer name, but it’s limited and can get messy.
It could be nice to add it to the “Product Ideas” section of the forum!
Thanks Antoine!
We’re building an atomic design system. One thing that has come up multiple times that would be really nice to have is the ability to control the variants/overrides of nested components.
For example, we have a button component that uses variants and variant properties to control button size (sm, md, lg), button state, whether it has an icon or not, etc. To keep the system atomic we then nest that button component in other components, for example, a header component. But we want to limit the header component to only accept sm buttons and not md or lg while keeping other variant attribute overrides intact like state.
Could there be a similar locking mechanism like how locking a nested component will block any overrides at all, could we somehow lock specific attributes? for example lock the variant attribute for size.
Hi there,
Just moving from Sketch to Figma and can’t bleieve you can’t lock overrides in components!?
I don’t want to build a Design System to give to other designers who can change whatever they want.
If I design a button, I just want the designer to be able to change the text… not the text style, the corner radius, background, colour, etc.
Please tell me that this feature is coming soon?
I really would love to see this in Figma and it drives our design team batty without it and I know this topic has been raised before.
Have a design system in Figma and components, we want to make sure that certain parameters cannot be overridden when components are used. A prime example of this might be padding or margins. They’re fixed in the component and cannot be overridden. This helps keep things consistent and prevents new or loose design work from altering things that shouldn’t be editable in our components.
The interface for this could exist only when something is a component and presumably would mean adding a locked/unlocked state to every or at least the sensible properties.
I would love this feature as well!
I want to lock the color change of an icon when switching between variants.
Ditto. Our org is considering moving to Figma and this is a must-have for our design system.
I see this as essential to the proper working of components.
A “must have”.
How about something simple like extending the reach of locking a layer in the master to also preventing any changes in instances?
Anyone know if this has been addressed yet? I’m looking to do this with a few components we have in sharable figma files we use for reviews. I don’t want people changing our components in the review file as this might pass along the wrong info…
We’re assessing moving to Figma from Sketch but as we are producing a design system for agencies to create work for a client it is super important we can limit customisation of attributes on components.
Giving anyone the ability to override any part of a component would create a lot of additional QA work to review every part of submitted designs instead of just an allowed subset of options.
If this is on the roadmap it’s something we can wait for but if it’s never going to happen it’s a massive minus for Figma for our use case.
We need this options! Figma please
Please! I don’t understand why this is not already implemented for text styles.
If designers can just override the text styles, it completely undermines the purpose of having a design system.
I rally wish Figma would implement this. But hey at least we can change our cursor -_-
We are running into this constantly. Areas like only showing a specific button variant within a toolbar, or not allowing swapping icons within a close button in a modal dialog component, etc.
you can lock it “a little bit” by assigning it a local variable with the name of “Dont touch”. at least it might make the users think twice before breaking the connection and then overwriting it. though it still is a hack.
