I am a developer, and we’re trying to figure out if Figma is something we want to use in the company I’m hired in.
The designers started using this recently, and made the button states as variants, which i guess is how it’s done in Figma, so it has a variant for hover, focus etc. But it could’ve been any component with different variants, doesn’t matter.
I am wondering if there’s really not an easy way to see the difference between two variants, preferably while in dev mode? Here i would think i could click, and somehow compare them.
Going into the playground i can swap and visually see the difference, but only visually…
Going to the main component, i can try to figure out the difference, but it doesn’t seem “safe” and it’s also just very time consuming and annoying having to leave the main page of the design 300 times, when trying to design an entire page.
Is there really no easy way when on the “main” page of a design in dev mode, where you click on something, to tell that it has different variants/states, and the difference between them… Or just swap between the components variants?
I can be on the main page in non dev mode, and swap between the variants in the dropdown, but that will alter the design as well. Actually swap it to another variant, when i have edit access.
Hi there
Figma is the right tool when the designer knows how to deliver it to you. First of all seems like you guys want to design something new or not much grown. I suggest to tell the designer to follow atomic design systems.
Secondly, you can see the variants of the component in the playground, just hit the Open in playground to see the components other variants or settings, But if you want to see the coding styles it’s only possible when it’s provided to you currently though.
The designer must provide you with details of its master component states in a file and you guys can recreate that master component same as the design. This way both design and code have a same mentality and component base