Figma doesn’t allow you to bind variables at the component source level, and you can bind only at the instance. This breaks down in real use cases where components require unique variant configurations that can’t be predetermined at the variable level. That limitation makes modes ineffective for true desktop-to-mobile automation. In such cases, you need to change the variant and change the mode to get a true platform conversion. Is there a suggested workaround?
Question
Binding variables at the source
My team and I are working on this exact issue right now, and for the same use case (“desktop to mobile automation”, as you put it). The best “workaround” we have is to re-wrapping an instance of our component in a new main component that has a single “breakpoint” property with values matching the modes in our breakpoint variable collection. For usability, we expose all the props of the nested instance, since those props are the ones consumers will actually want and need to configure.
So you have
-- ❖ Button Expose all nested instances props
---- ◇ Button.breakpoint-prop Where the variable binding happens, also exposing nested instances’ properties
-------- ◇ Button.useful-props Where the “useful” props live for consumers: showing and hiding icons, editing the label string, a hierarchy prop would live here
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.