figma
Support for Web Components
First of - thanks for the great work on this! It would be amazing to also support Web Components (Lit, Stencil) to connect.
I work on a web component design system.
The way it's built, consumers initialize the entire library before bootstrapping their client side app, so all published custom elements are available everywhere (consumers don't explicitly import/initialize individual components/custom elements).
The output of the React API is very close to what I need. The biggest issue, right now is that I'd need to be able to customize and/or remove the import line above the markup snippet. Additionally, some of our Figma components are implemented via semantic HTML using published CSS classes (no custom elements or components, just CSS).
Hey, thanks for your interest in Code Connect!
We’re planning to add support for more frameworks in the near future. We can’t say yet exactly which frameworks or when, but it’s helpful for us to hear from the community to help us decide where to focus, so please feel free to add a 👍 to this issue if you are also interested in support for web components. I will leave this issue open to track interest.
Code Connect is also designed to be extensible, and the community will be able to create their own plugins to support frameworks and languages which we don’t natively support. More details about how to build these plugins will be coming soon!
It's interesting what you say about the React support being very close to what you would need @CITguy. It sounds like if we had the ability to support plain HTML (i.e. not specify a React component in the figma.connect call) and the ability to manually specify import statements, this might work for you?
+1 one that feature request! Also working on a design system built on web components using Stencil.js! Would be a highly appreciated addition!
Hey @tomduncalf-figma!
Thanks for the response on this issue. Like others here, I'm very excited to one day use Code Connect with our Design System being built with Lit Web Components.
It sounds like if we had the ability to support plain HTML (i.e. not specify a React component in the figma.connect call) and the ability to manually specify import statements, this might work for you?
I would say that yeah, this is true! Being able to specify the import statement and then supporting HTML would cover most cases, I believe. Here's an example of a button component in Lit:
import '@namespace/some-design-system/button.js';
// And then usage:
<my-button variant="secondary" disabled>Button</my-button>
A more complex example may be Shoelace's Tree components:
import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
import '@shoelace-style/shoelace/dist/components/tree/tree.js';
<sl-tree>
<sl-tree-item>
Deciduous
<sl-tree-item>Birch</sl-tree-item>
<sl-tree-item>
Maple
<sl-tree-item>Field maple</sl-tree-item>
<sl-tree-item>Red maple</sl-tree-item>
<sl-tree-item>Sugar maple</sl-tree-item>
</sl-tree-item>
<sl-tree-item>Oak</sl-tree-item>
</sl-tree-item>
<sl-tree-item>
Coniferous
<sl-tree-item>Cedar</sl-tree-item>
<sl-tree-item>Pine</sl-tree-item>
<sl-tree-item>Spruce</sl-tree-item>
</sl-tree-item>
<sl-tree-item>
Non-trees
<sl-tree-item>Bamboo</sl-tree-item>
<sl-tree-item>Cactus</sl-tree-item>
<sl-tree-item>Fern</sl-tree-item>
</sl-tree-item>
</sl-tree>
There are some concepts that are Lit-specific like property expressions but for most Design Systems, I think supporting string and boolean attributes (HTML!) would be a great start.
+1 to this I use StencilJS alongside a Storybook instance. The Storybook instance is set up to use Web Components which uses lit. Either using the StencilJS files or the Storybook stories would be great. Thank you!
+1 from the Carbon Design System team, we are currently exploring this in React, but also support Web Components.
It's interesting what you say about the React support being very close to what you would need @CITguy. It sounds like if we had the ability to support plain HTML (i.e. not specify a React component in the
figma.connectcall) and the ability to manually specify import statements, this might work for you?
basically... yes 😄
Our library is designed to be consumed whole via precompiled assets, so import functionality isn't necessary nor possible in some cases, for us. Consumers load JS and CSS that defines behavior and appearance, and then just writes HTML.
For example...
<!--
The following custom elements are defined and registered globally with the
custom element registry, so there's no means or need to "import".
- CSS specific to geometry and theming may either be embedded in the
ShadowDOM of each element or it could exist in pre-compiled stylesheets.
-->
<ui-button variant="outline">Hello, world!</ui-button>
<ui-icon name="heart"></ui-icon>
<!--
The following elements get styles applied by globally-available CSS class names.
Again, there's no means/need to "import" specific styles.
-->
<h3 class="ui-heading-lg">Large Heading</h3>
<table class="ui-table has-striping">
<!-- ... -->
</table>
+1 from Meteomatics team 👋 Also for Storybook & Stencil setup.
Thank you, folks!
+1 from the Grit Design System's team from Progressive Leasing. We exclusively use StencilJS.
We are happy to announce that we’ve released Code Connect v1.1.1, which includes a preview of support for HTML-based frameworks (including Web Components, Angular and Vue).
We’d love to get your feedback on this, so please take a look at the docs and try it out, and please reach out to us with any questions or feedback.
Please note that while HTML support is in preview, we reserve the right to make changes to the API, although we hope to not have to make any major changes.