Web Components? about figma-plugin-ds

[thomas-lowry]

I have been thinking about it. I am not as well versed in web components yet but not opposed to exploring them. I did a bit more digging just before I built the Svelte version of this (which you may want to check out). My hope is to support this in a few flavors and then expand upon the number of components.

If interested in the Svelte one:
https://github.com/thomas-lowry/figma-plugin-ds-svelte
https://github.com/thomas-lowry/figsvelte (boilerplate)

One question: Do you think this be a separate repo/flavor? There is a certain approachability to not having them for those who just know basic html and css which may also be desirable?

What I was hoping to do with this repo

• setup a starter with webpack or rollup with a build process that bundles assets
• make it easy for the final build to only include css and js for the "components" that are used
• no frameworks at runtime
• rework the icon component specifically to be much smaller like the Svelte version
• may even consider just using CSS vars and no SASS like I did with the Svelte one as well

[gossi]

Amazing work over there, without even knowing svelte ;)

Here are my thoughts on this:

• Figma comes with a vanilla html/css/(j|t)s setup
• There is no such buy-in into any of the available (major) UI frameworks/libraries at the moment
• The common ground for this are web-components 🤷‍♂
• If you opt-in for any of the frameworks/libraries of your choice, feel free to do so
• For those, I think it would make sense either to use web-components as-is or provide wrapper components in the respective framework/library
• PS: I like the idea for css-custom-properties

To bootstrap this:

Figma asks which template it should use to create a new plugin, I think these can be extended to even have a more package-oriented one (still vanilla technology stack). E.g. what I did here: https://github.com/gossi/figma-style-references/ (I restructred the folders a bit more to my flavor). On top of this could be templates that put your favorite framework/library on top of it, so you can choose to use svelte/glimmer/react/...

More focus to the base-/groundwork and a slim layer on top for each lib/framework. Sounds to me like a more flexible approach to serve more flavors while still maintainable.

[thomas-lowry]

I decided to keep this as vanilla html and css. Web components may be another future avenue. Goal of this project is to make it easier to new comers with html, css, and a little JS knowledge. Would love to keep the convo going though for another version of this repo!

BTW I really like Style References!