Source code
Revision control
Copy as Markdown
Other Tools
import figma, { html } from "@figma/code-connect/html";
// Desktop V3 (newest)
figma.connect(
"https://www.figma.com/design/3WoKOSGtaSjhUHKldHCXbc/Desktop-v3?node-id=32-1001&t=2gbnIP6ylasS3WuO-4",
{
props: {
labelProps: figma.nestedProps("Label", {
description: figma.boolean("Show description", {
true: figma.string("Description"),
}),
label: figma.string("Label"),
supportPage: figma.boolean("Show support link", {
true: "sumo-slug",
}),
iconSrc: figma.boolean("Show icon", {
}),
}),
toggleProps: figma.nestedProps("Toggle Switch", {
disabled: figma.enum("State", {
Disabled: true,
}),
pressed: figma.boolean("Checked"),
}),
},
example: props =>
html`<moz-toggle
label=${props.labelProps.label}
description=${props.labelProps.description}
iconsrc=${props.labelProps.iconSrc}
support-page=${props.labelProps.supportPage}
disabled=${props.toggleProps.disabled}
pressed=${props.toggleProps.pressed}
></moz-toggle>`,
}
);
// Desktop Components (deprecated)
figma.connect(
{
props: {
description: figma.boolean("Description", {
true: "Description to edit",
}),
disabled: figma.boolean("Disabled"),
label: "Label to edit",
toggleProps: figma.nestedProps("Toggle Input", {
pressed: figma.boolean("Switch"),
}),
},
example: props =>
html`<moz-toggle
label=${props.label}
description=${props.description}
disabled=${props.disabled}
pressed=${props.toggleProps.pressed}
></moz-toggle>`,
}
);