Source code
Revision control
Copy as Markdown
Other Tools
import figma, { html } from "@figma/code-connect/html";
// Desktop v3 (newest)
figma.connect(
{
props: {
type: figma.enum("Type", {
Empty: undefined,
Slot: "slot",
Accordion: "accordion",
}),
heading: figma.boolean("Show heading", {
true: figma.string("Heading"),
false: undefined,
}),
slot: figma.instance("Slot"),
expanded: figma.boolean("Expanded"),
iconSrc: figma.boolean("Show icon", {
false: undefined,
}),
},
example: props =>
html`<moz-card
type=${props.type}
expanded=${props.expanded}
heading=${props.heading}
iconSrc=${props.iconSrc}
>
${props.slot}
</moz-card>`,
}
);
figma.connect(
{
props: {
expanded: figma.boolean("Expanded", {
true: "This card is in the 'expanded' state.",
false: undefined,
}),
},
example: props =>
html`This subcomponent is created by passing a 'heading' property to the
moz-card component. See the moz-card for detail. ${props.expanded}`,
}
);