code connect icon button and slider

src/ui/Button/Button.figma.tsx

@@ -3,7 +3,6 @@ import { Button, ButtonGroup, DestructiveButton } from "./Button";
 
 const FIGMA_URL_BUTTON =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:426";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=2-6"
 const FIGMA_URL_BUTTON_GROUP =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2072-9432&t=4T0FUMZf0IfQUWoa-11";
 

src/ui/IconButton/IconButton.figma.tsx

@@ -1,23 +1,55 @@
 import figma from "@figma/code-connect";
-import { IconButton } from "./IconButton";
+import { DestructiveIconButton, IconButton } from "./IconButton";
 
 const FIGMA_URL_ICON_BUTTON =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=11-11508";
 
+const sharedProps = {
+  icon: figma.instance("Icon"),
+  isDisabled: figma.enum("State", {
+    Disabled: true,
+  }),
+  size: figma.enum("Size", {
+    sm: "sm",
+  }),
+  variant: figma.enum("Variant", {
+    Secondary: "secondary",
+    Stroke: "stroke",
+    Subtle: "subtle",
+  }),
+};
+
 figma.connect(IconButton, FIGMA_URL_ICON_BUTTON, {
-  props: {
-    icon: figma.instance("Icon"),
-    isDisabled: figma.enum("State", {
-      Disabled: true,
-    }),
+  variant: {
+    Scheme: "Default",
   },
-  example: ({ isDisabled, icon }) => (
+  props: sharedProps,
+  example: ({ isDisabled, icon, size, variant }) => (
     <IconButton
       aria-label="Write a nice description of the action."
       onPress={() => {}}
+      size={size}
+      variant={variant}
       isDisabled={isDisabled}
     >
       {icon}
     </IconButton>
   ),
 });
+
+figma.connect(DestructiveIconButton, FIGMA_URL_ICON_BUTTON, {
+  variant: {
+    Scheme: "Danger",
+  },
+  props: sharedProps,
+  example: ({ isDisabled, size, icon }) => (
+    <DestructiveIconButton
+      aria-label="Write a nice description of the action."
+      onPress={() => {}}
+      size={size}
+      isDisabled={isDisabled}
+    >
+      {icon}
+    </DestructiveIconButton>
+  ),
+});

src/ui/Slider/Slider.figma.tsx

@@ -1,27 +1,35 @@
 import figma from "@figma/code-connect";
-import { SliderField } from "./Slider";
+import { Slider, SliderField, SliderOutput } from "./Slider";
 
-figma.connect(
-  SliderField,
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=151-9617&t=TKqj6tBszRXBnd3U-11",
-  {
-    props: {
-      showOutput: figma.boolean("Has Output"),
-      label: figma.boolean("Has Label", {
-        true: "TODO: Get children label value",
-        false: undefined,
-      }),
-      description: figma.boolean("Has Description", {
-        true: "TODO: Get children description value",
-        false: undefined,
-      }),
-    },
-    example: ({ showOutput, label, description }) => (
-      <SliderField
-        showOutput={showOutput}
-        label={label}
-        description={description}
-      />
-    ),
+const FIGMA_URL_SLIDER =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=3734-22471&m=dev";
+const FIGMA_URL_SLIDER_FIELD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=151-9617&t=TKqj6tBszRXBnd3U-11";
+
+figma.connect(Slider, FIGMA_URL_SLIDER, {
+  props: {
+    isDisabled: figma.boolean("Disabled", {
+      true: true,
+      false: undefined,
+    }),
+  },
+  example: ({ isDisabled }) => <Slider isDisabled={isDisabled} />,
+});
+
+figma.connect(SliderField, FIGMA_URL_SLIDER_FIELD, {
+  props: {
+    output: figma.boolean("Has Output", {
+      true: <SliderOutput />,
+      false: undefined,
+    }),
+    label: figma.children("Label"),
+    description: figma.children("Description"),
   },
-);
+  example: ({ output, label, description }) => (
+    <SliderField>
+      {output}
+      {label}
+      {description}
+    </SliderField>
+  ),
+});