diff --git a/src/ebay-alert-dialog/index.figma.tsx b/src/ebay-alert-dialog/index.figma.tsx
new file mode 100644
index 00000000..e09f0486
--- /dev/null
+++ b/src/ebay-alert-dialog/index.figma.tsx
@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayAlertDialog } from '.'
+/* @ts-ignore: this is only to help code connect */
+import { EbayDialogHeader } from '@ebay/ui-core-react/ebay-dialog-base'
+
+figma.connect(
+ EbayAlertDialog,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=16420-100&m=dev',
+ {
+ props: {
+ Title: figma.string('Title'),
+ Body: figma.string('Body')
+ },
+ example: ({ Body, Title }) => (
+
+ {Title}
+
{Body}
+
+ )
+ }
+)
diff --git a/src/ebay-badge/index.figma.tsx b/src/ebay-badge/index.figma.tsx
new file mode 100644
index 00000000..a4df0a1a
--- /dev/null
+++ b/src/ebay-badge/index.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayBadge } from '.'
+
+figma.connect(
+ EbayBadge,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=38612-44629&m=dev',
+ {
+ props: {
+ label: figma.string('label')
+ },
+ example: ({ label }) =>
+ }
+)
diff --git a/src/ebay-breadcrumbs/index.figma.tsx b/src/ebay-breadcrumbs/index.figma.tsx
new file mode 100644
index 00000000..77810d3b
--- /dev/null
+++ b/src/ebay-breadcrumbs/index.figma.tsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayBreadcrumbs, EbayBreadcrumbItem } from '.'
+
+figma.connect(
+ EbayBreadcrumbs,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=67603-81724&m=dev',
+ {
+ example: () => (
+
+ eBay
+ Auto Parts and Vehicles
+ Motors Parts and Accessories
+
+ )
+ }
+)
diff --git a/src/ebay-button/index.figma.tsx b/src/ebay-button/index.figma.tsx
new file mode 100644
index 00000000..8b0befac
--- /dev/null
+++ b/src/ebay-button/index.figma.tsx
@@ -0,0 +1,96 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayButton } from '.'
+
+// button
+figma.connect(
+ EbayButton,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=65849-91206&m=dev',
+ {
+ props: {
+ state: figma.enum('state', {
+ disabled: true,
+ enabled: false
+ }),
+ title: figma.string('Title'),
+ size: figma.enum('size', {
+ medium: 'regular',
+ small: 'small',
+ large: 'large'
+ })
+ },
+ example: ({ state, size, title }) => (
+
+ {title}
+
+ )
+ }
+)
+
+// button destructive
+figma.connect(
+ EbayButton,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129298-738861&m=dev',
+ {
+ props: {
+ state: figma.enum('state', {
+ disabled: true,
+ enabled: false
+ }),
+ title: figma.string('Title'),
+ size: figma.enum('size', {
+ medium: 'regular',
+ small: 'small',
+ large: 'large'
+ })
+ },
+ example: ({ state, size, title }) => (
+
+ {title}
+
+ )
+ }
+)
+
+// button branded
+figma.connect(
+ EbayButton,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129776-224141&m=dev',
+ {
+ props: {
+ title: figma.string('Title'),
+ size: figma.enum('size', {
+ medium: 'regular',
+ small: 'small',
+ large: 'large'
+ })
+ },
+ example: ({ size, title }) => (
+
+ {title}
+
+ )
+ }
+)
+
+// button link (borderless)
+figma.connect(
+ EbayButton,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=109500-131885&m=dev',
+ {
+ props: {
+ title: figma.string('Title'),
+ size: figma.enum('size', {
+ medium: 'regular',
+ small: 'small',
+ large: 'large'
+ })
+ },
+ example: ({ size, title }) => (
+
+ {title}
+
+ )
+ }
+)
diff --git a/src/ebay-calendar/README.md b/src/ebay-calendar/README.md
index 6b7576e4..0877c844 100644
--- a/src/ebay-calendar/README.md
+++ b/src/ebay-calendar/README.md
@@ -21,27 +21,27 @@ import "@ebay/skin/calendar";
## Attributes
-| Name | Type | Stateful | Description | Data |
+| Name | Type | Stateful | Description | Data | |
| ---------------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --- |
-| `navigable` | Boolean | No | If true, a header is included that allows for navigation between months |
-| `interactive` | Boolean | No | Date cells are contained in buttons for interactive calendars, and spans otherwise |
-| `numMonths` | Number | No | Number of months to be displayed at once |
-| `range` | Boolean | No | True if selecting a range, false if a single value |
-| `selected` | Date, Date[] | No | Date or list of dates that are selected, represented as an ISO string or an array of ISO strings |
-| `locale` | String | No | Locale of the date picker, default to `navigator.language` |
-| `disableBefore` | Date | No | First date that may be selected |
-| `disableAfter` | Date | No | Last date that may be selected |
-| `disableWeekdays` | Number[] | No | List of weekdays that are disabled. Must be an array of numbers, where Sunday is `0` and Saturday is `6` |
-| `disableList` | String[], Date[] | No | List of specific days that are disabled. Should be a list of ISO strings, but also accepts timestamps or `Date` objects |
-| `linkBuilder` | Function | No | Function used to build the href for each date. The function is passed the date as a `Date` object, and should return a url string. For dates that don't have a link, the function should return a falsy value |
-| `getA11yShowMonthText` | Function | No | Function used to get the text for showing previous and next months, defaults to `Show ${monthName}` |
-| `a11ySelectedText` | String | No | Text to be read by screen readers when a date is selected, defaults to `Selected` |
-| `a11yRangeStartText` | String | No | Text to be read by screen readers when a date is the start of a range, defaults to `Start of range` |
-| `a11yInRangeText` | String | No | Text to be read by screen readers when a date is in a range, defaults to `in range` |
-| `a11yRangeEndText` | String | No | Text to be read by screen readers when a date is the end of a range, defaults to `End of range` |
-| `a11yTodayText` | String | No | Text to be read by screen readers when a date is the current date, defaults to `Today` |
-| `a11yDisabledText` | String | No | Text to be read by screen readers when a date is disabled, defaults to `inactive` |
-| `a11ySeparator` | String | No | Text to be read by screen readers to separate properties, defaults to `-` |
+| `navigable` | Boolean | No | If true, a header is included that allows for navigation between months | | |
+| `interactive` | Boolean | No | Date cells are contained in buttons for interactive calendars, and spans otherwise | | |
+| `numMonths` | Number | No | Number of months to be displayed at once | | |
+| `range` | Boolean | No | True if selecting a range, false if a single value | | |
+| `selected` | Date, Date[] | No | Date or list of dates that are selected, represented as an ISO string or an array of ISO strings | | |
+| `locale` | String | No | Locale of the date picker, default to `navigator.language` | | |
+| `disableBefore` | Date | No | First date that may be selected | | |
+| `disableAfter` | Date | No | Last date that may be selected | | |
+| `disableWeekdays` | Number[] | No | List of weekdays that are disabled. Must be an array of numbers, where Sunday is `0` and Saturday is `6` | | |
+| `disableList` | String[], Date[] | No | List of specific days that are disabled. Should be a list of ISO strings, but also accepts timestamps or `Date` objects | | |
+| `linkBuilder` | Function | No | Function used to build the href for each date. The function is passed the date as a `Date` object, and should return a url string. For dates that don't have a link, the function should return a falsy value | | |
+| `getA11yShowMonthText` | Function | No | Function used to get the text for showing previous and next months, defaults to `Show ${monthName}` | | |
+| `a11ySelectedText` | String | No | Text to be read by screen readers when a date is selected, defaults to `Selected` | | |
+| `a11yRangeStartText` | String | No | Text to be read by screen readers when a date is the start of a range, defaults to `Start of range` | | |
+| `a11yInRangeText` | String | No | Text to be read by screen readers when a date is in a range, defaults to `in range` | | |
+| `a11yRangeEndText` | String | No | Text to be read by screen readers when a date is the end of a range, defaults to `End of range` | | |
+| `a11yTodayText` | String | No | Text to be read by screen readers when a date is the current date, defaults to `Today` | | |
+| `a11yDisabledText` | String | No | Text to be read by screen readers when a date is disabled, defaults to `inactive` | | |
+| `a11ySeparator` | String | No | Text to be read by screen readers to separate properties, defaults to `-` | | |
| `onFocus` | Function | - | Triggered when a day is focused on, typically via keyboard events | `(event: FocusEvent, { iso })` | |
| `onSelect` | Function | - | Triggered when a day is selected | `(event: Event, { iso })` | |
| `onMonthChange` | Function | - | Triggered during month navigation | `(event: Event, { iso })` | |
diff --git a/src/ebay-calendar/index.figma.tsx b/src/ebay-calendar/index.figma.tsx
new file mode 100644
index 00000000..66e44213
--- /dev/null
+++ b/src/ebay-calendar/index.figma.tsx
@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayCalendar } from '.'
+
+// single month
+figma.connect(
+ EbayCalendar,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=68524-79110&m=dev',
+ {
+ example: () => (
+
+ )
+ }
+)
+
+// multi-month
+figma.connect(
+ EbayCalendar,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=68524-79119&m=dev',
+ {
+ example: () => (
+
+ )
+ }
+)
diff --git a/src/ebay-checkbox/index.figma.tsx b/src/ebay-checkbox/index.figma.tsx
new file mode 100644
index 00000000..87346256
--- /dev/null
+++ b/src/ebay-checkbox/index.figma.tsx
@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayCheckbox } from '.'
+/* @ts-ignore: this is only to help code connect */
+import { EbayLabel } from '@ebay/ui-core-react/ebay-field'
+
+// selection field
+figma.connect(
+ EbayCheckbox,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=13789-23765&m=dev',
+ {
+ variant: { 'control type': 'checkbox' },
+ example: () => (
+
+ Remember me
+
+ )
+ }
+)
+
+// checkbox only
+figma.connect(
+ EbayCheckbox,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=10407-293&m=dev',
+ {
+ example: () => (
+
+ )
+ }
+)
diff --git a/src/ebay-icon-button/index.figma.tsx b/src/ebay-icon-button/index.figma.tsx
new file mode 100644
index 00000000..8b3634f3
--- /dev/null
+++ b/src/ebay-icon-button/index.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayIconButton } from '.'
+
+// button
+figma.connect(
+ EbayIconButton,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=65935-91936&m=dev',
+ {
+ example: () => (
+
+ )
+ }
+)
diff --git a/src/ebay-page-notice/index.figma.tsx b/src/ebay-page-notice/index.figma.tsx
new file mode 100644
index 00000000..aa1cb5fa
--- /dev/null
+++ b/src/ebay-page-notice/index.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayPageNotice, EbayNoticeContent, EbayPageNoticeTitle, EbayPageNoticeFooter } from '.'
+/* @ts-ignore: this is only to help code connect */
+import { EbayButton } from '@ebay/ui-core-react/ebay-button'
+
+figma.connect(
+ EbayPageNotice,
+ 'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=64873-99272&m=dev',
+ {
+ props: {
+ Body: figma.string('Body')
+ },
+ example: ({ Body }) => (
+
+
+ Notification title
+