mikaelvesavuori / figmagic

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
https://docs.figmagic.com
MIT License
807 stars 71 forks source link

Enable element variants from frames. #162

Closed davidbwaters closed 2 years ago

davidbwaters commented 2 years ago

Is your feature request related to a problem? Please describe. I'm curious why groups are the default for element variants vs. frames. Frames you can set the fill directly on the parent, which makes more sense in a code translation, and it's sizing is closer to the actual web. My issue is a button's text element that I want to have the padding set to 16px, but setting left and right for the width just scales the padding when I resize the button to be wider.

Describe the solution you'd like Allow frames to define variants as well as groups. Pull the outer elements styling from the frame style.

mikaelvesavuori commented 2 years ago

Hey @davidbwaters!

The element generation part of Figmagic is the absolutely hardest part, as well as the part I typically get least conversation about, which means it's hard to make single-handed design decisions when it comes to this feature. It's super to get your feedback here.

There is no good answer to this: The foundation of the feature was built more than 4 years ago so it's kind of hard to backtrack the pedigree of that design decision. I would suppose this had to do with supporting the most intuitive and simplest case possible, where even adding frames is more work for the user.

Looking at the code I can't see anything that would immediately make it "impossible" to refactor Figmagic to support both frames and groups.

All of the above pertains to Figmagic "elements" as a whole (like the root/top-level of the element itself).

However, more along the lines of your request, for the states or variants (i.e. Button element has "Normal" group etc.), having these as subframes within a parent frame does not seem like a pattern I would expect people to use intuitively? The way text works is certainly not flawless! In fact, I'd maybe call it one of the least-favorite parts of Figmagic for me, even :)

For your specific use-case (and I'm sure you are familiar with constraints https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize) I believe constraints should be enough in most cases to deal with such situations. It won't solve the fill, but it will solve the sizing to some extent at least.

I am happy to take further feedback, but right now I am not seeing this as important enough to refactor.

davidbwaters commented 2 years ago

Hey @davidbwaters!

The element generation part of Figmagic is the absolutely hardest part, as well as the part I typically get least conversation about, which means it's hard to make single-handed design decisions when it comes to this feature. It's super to get your feedback here.

There is no good answer to this: The foundation of the feature was built more than 4 years ago so it's kind of hard to backtrack the pedigree of that design decision. I would suppose this had to do with supporting the most intuitive and simplest case possible, where even adding frames is more work for the user.

Looking at the code I can't see anything that would immediately make it "impossible" to refactor Figmagic to support both frames and groups.

All of the above pertains to Figmagic "elements" as a whole (like the root/top-level of the element itself).

However, more along the lines of your request, for the states or variants (i.e. Button element has "Normal" group etc.), having these as subframes within a parent frame does not seem like a pattern I would expect people to use intuitively? The way text works is certainly not flawless! In fact, I'd maybe call it one of the least-favorite parts of Figmagic for me, even :)

For your specific use-case (and I'm sure you are familiar with constraints https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize) I believe constraints should be enough in most cases to deal with such situations. It won't solve the fill, but it will solve the sizing to some extent at least.

I am happy to take further feedback, but right now I am not seeing this as important enough to refactor.

Yeah, constraints as children of groups don't behave the same way as they do with frames, for some reason. Left and right still just scales the padding when resizing for me.

mikaelvesavuori commented 2 years ago

Hey! I've added basic support for using frames OR groups.

The change is technically simply to accept frames as well as groups while the element generation is done. Seems to work just fine and I don't see any differences between either way, and the tests keep running. I am pushing this out in 4.5.0 shortly.

EDIT: See https://github.com/mikaelvesavuori/figmagic/releases/tag/v4.5.0

I will also close this issue. Feel free to get in touch should there be anything else!

davidbwaters commented 2 years ago

Awesome! Thanks. Also would love to test next versions of you need help