New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using modes in code connect #6
Comments
Hey MDMANN, I wanted to chime in here, because a few months ago I was going to refactor our Button components to utilize modes instead of variants as you say you are doing. I was having some issues and was in conversation with Figma Support. They essentially told me NOT to do this ; to stick with variants for these states of the button, not to use MODES. They gave me this video to watch. This link starts at 5:45 The whole video is worth watching though. |
@RoxanneGux Thank you for the link. Quite interesting and makes a lot of sense, but the modes enable us to do a lot more than just with the variants and other component props. |
Yes @MDMann I see. And the "blow up" you describe is what Jake Albaugh showed an example of with the buttons in his live demo- I think it was "Many to one" I laughed because it looks like ours- I attached a screen shot :) Good Luck. I hope figma is able to accommodate your request. |
Hey @MDMann, thanks for the feedback and happy to hear you like Code Connect! This is an interesting idea, and I've raised it for discussion with the team, so we will keep you posted. Just to verify my understanding, you’d like to be able to do something similar to Variant Restrictions, but based on the mode of the instance instead? |
Hi @tomduncalf-figma, thank you for answering! I'm not 100% sure if Variant Restrictions are what we need for it. Let's say a designer is using our button component and configurated it like this: Component props:
Layer modes:
This is the code that should be returned when devs inspect said button:
To map everything correctly we would need to set up dynamic code snippets, but instead of referencing component props, we would reference the modes.
I hope I used the code snippets correctly and this makes my explanation earlier a bit easier to understand. |
I see, thanks for explaining. We'll discuss this as a team and follow up when we've done so! |
Hi,
first of all awesome work!
I attended your announcement Zoom meeting and am in awe of the possibility of connecting code snippets to each component and its instances. While watching the demo, I was wondering if it would be possible to also connect modes to code. I asked this question in the meeting but was asked to share more information here.
So basically we set up our components with component-level variables and modes. This means we only have one instance per component and handle the rest with modes.
For example, our "Button" component is just one instance, and the different variants like "Primary", "Secondary" and"Tertiary" are three modes we created in a "Button - Variants" collection. Same for "Sizes" and "States".
In order for us to use code connect it would be great if there was a way to tell the code if for example the mode "Button - Variant: Primary" is selected and map the correct prop to the button in the code.
Let me know if you need more information or if anything is unclear in my explanation.
I would be happy to hear back from you!
Thank you!
The text was updated successfully, but these errors were encountered: