3 ms·

This isn't shown in the video, but does your editor comes with pre-set "styles" or is it something that you would import yourself ? My experience is that typin

This isn't shown in the video, but does your editor comes with pre-set "styles" or is it something that you would import yourself ? My experience is that typing the code for components nesting inside components is not really the big hurdle when designing React views ; rather, it's getting the "layout" part of the css right. The big value in the video seems to be the simple fact that you have a "Form" parent component where adding a child gives it roughly the right look. But maybe I have Stokholm syndrome, and forgot how simple it was to hook up in GUI in VB3 back in the days ! Nice work !

tscepo 4y ago
I set up super minimal preset styling, and yeah I think basic css import makes sense as a next feature. Hoping to avoid overly complex style inheritance. I 100% agree, getting layout css right is the most annoying part of styling. I’m inspired by Apple’s stack views and Figma’s auto layout which make it a lot more intuitive so I think those can be the first “Aspect components” that will come out on next release. Thanks for the feedback!
- dgritsko 4y ago
  Tailwind support would be awesome. I often use Tailwind Play (https://play.tailwindcss.com/ https://play.tailwindcss.com/) when I'm "sketching out" the look of a new component since it's so quick to iterate and get immediate visual feedback, as you well know.
danielvaughn 4y ago
I've been wondering whether it would be possible to leverage ML/AI to "infer" a layout from a visual mockup. So like if two elements have the same X position, they're assumed to be left aligned with one another. If three elements are the same width and sit side-by-side with the same distance between them, they're assumed to be a 3-grid column. Etc etc.
- tscepo 4y ago
  We're actually in review on the Figma plugin store for exactly this. Should be out soon.
  - danielvaughn 4y ago
    Very nice. One pain point I've noticed with AutoLayout is that once a layout is set, it's very difficult to "just shift something around", which is what's so nice about a visual editing tool to begin with. The benefit of an automated layout inference tool is that it could theoretically let you toggle the layout off, do your quick and easy shifting, then turn it back on and let the tool infer the changes you made.

tscepo 4y ago

I set up super minimal preset styling, and yeah I think basic css import makes sense as a next feature. Hoping to avoid overly complex style inheritance. I 100% agree, getting layout css right is the most annoying part of styling. I’m inspired by Apple’s stack views and Figma’s auto layout which make it a lot more intuitive so I think those can be the first “Aspect components” that will come out on next release. Thanks for the feedback!

dgritsko 4y ago
Tailwind support would be awesome. I often use Tailwind Play (https://play.tailwindcss.com/ https://play.tailwindcss.com/) when I'm "sketching out" the look of a new component since it's so quick to iterate and get immediate visual feedback, as you well know.

danielvaughn 4y ago

I've been wondering whether it would be possible to leverage ML/AI to "infer" a layout from a visual mockup. So like if two elements have the same X position, they're assumed to be left aligned with one another. If three elements are the same width and sit side-by-side with the same distance between them, they're assumed to be a 3-grid column. Etc etc.

tscepo 4y ago
We're actually in review on the Figma plugin store for exactly this. Should be out soon.
- danielvaughn 4y ago
  Very nice. One pain point I've noticed with AutoLayout is that once a layout is set, it's very difficult to "just shift something around", which is what's so nice about a visual editing tool to begin with. The benefit of an automated layout inference tool is that it could theoretically let you toggle the layout off, do your quick and easy shifting, then turn it back on and let the tool infer the changes you made.