diff --git a/.gitignore b/.gitignore
index 07168936c32..414d50220e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ coverage
 .tmp
 .eslintcache
 package-lock.json
+.env
 
 # package managers
 yarn-error.log
diff --git a/packages/code-connect/components/Slider/Slider.figma.tsx b/packages/code-connect/components/Slider/Slider.figma.tsx
new file mode 100644
index 00000000000..83a1f8be6cc
--- /dev/null
+++ b/packages/code-connect/components/Slider/Slider.figma.tsx
@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { Button, Slider } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+// TODO: DESIGN: Define left/right actions
+// Documentation for Slider can be found at https://www.patternfly.org/components/slider
+
+figma.connect(
+  Slider,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3155-97956',
+  {
+    props: {
+      // boolean
+      isInputVisible: figma.boolean('Value input'),
+      endActions: figma.boolean('Right action', {
+        true: <Button variant="plain" aria-label="Plus" onClick={() => {}} icon={<PlusIcon />} />,
+        false: undefined
+      }),
+      startActions: figma.boolean('Left action', {
+        true: <Button variant="plain" aria-label="Minus" onClick={() => {}} icon={<MinusIcon />} />,
+        false: undefined
+      }),
+
+      // enum
+      areCustomStepsContinuous: figma.enum('Type', { Continuous: true }),
+      isDisabled: figma.enum('State', { Disabled: true }),
+      showTicks: figma.enum('Type', { Discrete: true })
+    },
+    example: (props) => (
+      <Slider
+        isInputVisible={props.isInputVisible}
+        showBoundaries={true}
+        startActions={props.startActions}
+        endActions={props.endActions}
+        areCustomStepsContinuous={props.areCustomStepsContinuous}
+        isDisabled={props.isDisabled}
+        showTicks={props.showTicks}
+        max={200}
+        min={0}
+        step={50}
+        value={100}
+      />
+    )
+  }
+);
diff --git a/packages/code-connect/components/Spinner/Spinner.figma.tsx b/packages/code-connect/components/Spinner/Spinner.figma.tsx
new file mode 100644
index 00000000000..cb7f1a1a236
--- /dev/null
+++ b/packages/code-connect/components/Spinner/Spinner.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Spinner } from '@patternfly/react-core';
+
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect(Spinner, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=790-332', {
+  props: {
+    // enum
+    size: figma.enum('Size', {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+      xl: 'xl'
+    })
+  },
+  example: (props) => <Spinner aria-label="Loading..." size={props.size} />
+});
diff --git a/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
new file mode 100644
index 00000000000..3d6cdf9f01d
--- /dev/null
+++ b/packages/code-connect/components/Tabs/HorizontalTabs.figma.tsx
@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(Tabs, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6503', {
+  props: {
+    // boolean
+    inset: figma.boolean('Inset', {
+      true: {
+        default: 'insetMd'
+      },
+      false: {
+        default: 'insetNone'
+      }
+    }),
+
+    // enum
+    isBox: figma.enum('Type', {
+      Boxed: true,
+      'Boxed Light': true
+    }),
+
+    children: figma.children('Tab items - Horizontal')
+  },
+  example: (props) => (
+    <Tabs
+      activeKey="activeTabKey"
+      aria-label="Tabs example"
+      inset={props.inset}
+      isBox={props.isBox}
+      onSelect={() => {}}
+      role="region"
+    >
+      {props.children}
+    </Tabs>
+  )
+});
diff --git a/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx b/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx
new file mode 100644
index 00000000000..8326783def8
--- /dev/null
+++ b/packages/code-connect/components/Tabs/SubTabsItemHorizontal.figma.tsx
@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6284&m=dev',
+  {
+    props: {
+      // enum
+      isBox: figma.enum('Type', {
+        Boxed: true,
+        'Boxed Light': true
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Tabs
+        aria-label="Horizontal subtabs example"
+        isSubtab={true}
+        isBox={props.isBox}
+        onSelect={() => {}}
+        role="region"
+      >
+        {props.children}
+      </Tabs>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx b/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx
new file mode 100644
index 00000000000..b523d5efb6c
--- /dev/null
+++ b/packages/code-connect/components/Tabs/TabItemsHorizontal.figma.tsx
@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect';
+import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+const shareProps = {
+  icon: figma.boolean('Icon', {
+    true: (
+      <>
+        <TabTitleIcon>
+          <HelpIcon />
+        </TabTitleIcon>{' '}
+      </>
+    ),
+    false: undefined
+  }),
+  popover: figma.boolean('Help button', {
+    true: (
+      <Popover
+        headerContent={<div>Help popover</div>}
+        bodyContent={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+        footerContent="Popover footer"
+        triggerRef={ref}
+      />
+    ),
+    false: undefined
+  })
+};
+
+figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6161', {
+  props: {
+    ...shareProps,
+
+    // string
+    tabText: figma.string('Tab text'),
+
+    // enum
+    isDisabled: figma.enum('State', { Disabled: true })
+  },
+  example: (props) => (
+    <Tab
+      eventKey={0}
+      isDisabled={props.isDisabled}
+      actions={props.popover}
+      title={
+        <>
+          {props.icon}
+          <TabTitleText>{props.tabText}</TabTitleText>
+        </>
+      }
+    >
+      {props.tabText}
+    </Tab>
+  )
+});
diff --git a/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx b/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx
new file mode 100644
index 00000000000..fad050f30e2
--- /dev/null
+++ b/packages/code-connect/components/Tabs/TabItemsVertical.figma.tsx
@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect';
+import { Popover, Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// Note: Static eventKey is used for the example, but the component should be used with dynamic eventKey
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+const shareProps = {
+  popover: figma.boolean('Help icon', {
+    true: (
+      <Popover
+        headerContent={<div>Help popover</div>}
+        bodyContent={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+        footerContent="Popover footer"
+        triggerRef={ref}
+      />
+    ),
+    false: undefined
+  }),
+  icon: figma.boolean('Icon at start', {
+    true: (
+      <>
+        <TabTitleIcon>
+          <HelpIcon />
+        </TabTitleIcon>{' '}
+      </>
+    ),
+    false: undefined
+  })
+};
+
+figma.connect(Tab, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6407', {
+  props: {
+    ...shareProps,
+
+    // string
+    tabText: figma.string('Text'),
+
+    // enum
+    isDisabled: figma.enum('State', { Disabled: true })
+  },
+  example: (props) => (
+    <Tab
+      eventKey={0}
+      isDisabled={props.isDisabled}
+      actions={props.popover}
+      title={
+        <>
+          {props.icon}
+          <TabTitleText>{props.tabText}</TabTitleText>
+        </>
+      }
+    >
+      {props.tabText}
+    </Tab>
+  )
+});
diff --git a/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
new file mode 100644
index 00000000000..b48a04a9f5e
--- /dev/null
+++ b/packages/code-connect/components/Tabs/VerticalTabs.figma.tsx
@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Tabs } from '@patternfly/react-core';
+
+// Documentation for Tabs can be found at https://www.patternfly.org/components/tabs
+
+figma.connect(Tabs, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=14327-6656', {
+  props: {
+    // enum
+    isExpandable: figma.enum('Type', {
+      Expandable: {
+        default: 'expandable'
+      },
+      false: undefined
+    }),
+    isBox: figma.enum('Type', {
+      Boxed: true,
+      'Boxed Light': true
+    }),
+    inset: figma.enum('Type', {
+      Inset: { default: 'insetMd' },
+      'Inset Boxed': { default: 'insetMd' }
+    }),
+
+    children: figma.children('Tab items - Vertical')
+  },
+  example: (props) => (
+    <Tabs isBox={props.isBox} isVertical={true} onSelect={() => {}} role="region">
+      {props.children}
+    </Tabs>
+  )
+});
diff --git a/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
new file mode 100644
index 00000000000..b8d600c3edc
--- /dev/null
+++ b/packages/code-connect/components/TimeStamp/Timestamp.figma.tsx
@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+// TODO: DESIGN: Refine intent, enum/dropdown options confuse date and time formats. They shoudd be separated
+// Documentation for Timestamp can be found at https://www.patternfly.org/components/timestamp
+
+figma.connect(
+  Timestamp,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7472-6718',
+  {
+    props: {
+      // string
+      defaultTimestampContent: figma.string('✏️ Default timestamp content'),
+
+      // boolean
+      tooltip: figma.boolean('With tooltip underline', {
+        true: { variant: TimestampTooltipVariant.default },
+        false: undefined
+      }),
+
+      // enum
+      date: figma.enum('Format', {
+        Default: figma.string('✏️ Default timestamp content'),
+        'Without time': figma.string('✏️ Without time'),
+        'Without day': figma.string('✏️ Without day'),
+        Abbreviated: figma.string('✏️ Without time'),
+        Numberic: figma.string('✏️ Without time'),
+        'Custom content': figma.string('✏️ Without time')
+      })
+    },
+    example: (props) => <Timestamp tooltip={props.tooltip} date={props.date} />
+  }
+);
diff --git a/packages/code-connect/components/ToggleGroup/BaseComponentsToggleGroupsParts.figma.tsx b/packages/code-connect/components/ToggleGroup/BaseComponentsToggleGroupsParts.figma.tsx
new file mode 100644
index 00000000000..d4ae3695dd8
--- /dev/null
+++ b/packages/code-connect/components/ToggleGroup/BaseComponentsToggleGroupsParts.figma.tsx
@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { ToggleGroupItem } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+// Documentation for Spinner can be found at https://www.patternfly.org/components/spinner
+
+figma.connect(
+  ToggleGroupItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2089-5606&m=dev',
+  {
+    props: {
+      // boolean
+      icon: figma.boolean('Has icon', {
+        true: <BellIcon />,
+        false: undefined
+      }),
+      text: figma.boolean('Has text', {
+        true: figma.string('Text'),
+        false: undefined
+      }),
+
+      // enum
+      isDisabled: figma.enum('State', { Disabled: true }),
+      isSelected: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <ToggleGroupItem
+        buttonId="toggle-group-single"
+        icon={props.icon}
+        isDisabled={props.isDisabled}
+        isSelected={props.isSelected}
+        text={props.text}
+        onChange={() => {}}
+      />
+    )
+  }
+);
diff --git a/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
new file mode 100644
index 00000000000..115fb2b8ac4
--- /dev/null
+++ b/packages/code-connect/components/ToggleGroup/ToggleGroup.figma.tsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { ToggleGroup } from '@patternfly/react-core';
+
+// Documentation for ToggleGroup can be found at https://www.patternfly.org/components/toggle-group
+
+figma.connect(
+  ToggleGroup,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7644-56919',
+  {
+    props: {
+      // enum
+      isCompact: figma.enum('Size', {
+        Default: undefined,
+        Compact: 'compact'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <ToggleGroup aria-label="Toggle group example" isCompact={props.isCompact}>
+        {props.children}
+      </ToggleGroup>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Tooltip/Tooltip.figma.tsx b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
new file mode 100644
index 00000000000..9eeed084351
--- /dev/null
+++ b/packages/code-connect/components/Tooltip/Tooltip.figma.tsx
@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { Button, Tooltip } from '@patternfly/react-core';
+
+// Documentation for Tooltip can be found at https://www.patternfly.org/components/tooltip
+
+figma.connect(
+  Tooltip,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=6598-70985',
+  {
+    props: {
+      // string
+      content: figma.string('Text'),
+
+      // enum
+      position: figma.enum('Type', {
+        'Bottom-left': 'bottom-start',
+        'Bottom-middle': 'bottom',
+        'Bottom-right': 'bottom-end',
+        'Left-bottom': 'left-end',
+        'Left-middle': 'left',
+        'Left-top': 'left-start',
+        'Right-bottom': 'right-end',
+        'Right-middle': 'right',
+        'Right-top': 'right-start',
+        'Top-left': 'top-start',
+        'Top-middle': 'top',
+        'Top-right': 'top-end'
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <Tooltip content={props.content} position={props.position}>
+        <Button>I have a tooltip!</Button>
+      </Tooltip>
+    )
+  }
+);
diff --git a/packages/code-connect/components/auto-generate-figma.config.json b/packages/code-connect/components/auto-generate-figma.config.json
new file mode 100644
index 00000000000..80b3c01654a
--- /dev/null
+++ b/packages/code-connect/components/auto-generate-figma.config.json
@@ -0,0 +1,7 @@
+{
+  "codeConnect": {
+    "include": ["../../**/*.{tsx,jsx}"],
+    "label": "React",
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components"
+  }
+}
diff --git a/packages/code-connect/components/bafigma.config.json b/packages/code-connect/components/bafigma.config.json
new file mode 100644
index 00000000000..a1b9a9916e8
--- /dev/null
+++ b/packages/code-connect/components/bafigma.config.json
@@ -0,0 +1,36 @@
+{
+  "codeConnect": {
+    "label": "React",
+    "include": [
+      "components/NotificationDrawer/*.tsx",
+      "components/Pagination/*.tsx",
+      "components/Popover/*.tsx",
+      "components/SimpleList/*.tsx",
+      "components/Skeleton/*.tsx"
+    ],
+    "paths": {
+      "components": "components"
+    },
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
+    },
+    "aliases": {
+      "@patternfly/react-core": "."
+    },
+    "importPaths": {
+      "components": "components"
+    },
+    "options": {
+      "instanceSwapper": {
+        "enabled": true
+      },
+      "development": {
+        "enabled": true,
+        "verbose": true
+      },
+      "production": {
+        "enabled": false
+      }
+    }
+  }
+}
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..46613939317 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -2,12 +2,16 @@
   "codeConnect": {
     "parser": "react",
     "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
+      "components/Slider/*.tsx",
+      "components/Spinner/*.tsx",
+      "components/Tabs/*.tsx",
+      "components/Timestamp/*.tsx",
+      "components/ToggleGroup/*.tsx",
+      "components/Tooltip/*.tsx"
     ],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/e1OeQDrgPKW13FswRqSP3I/PatternFly-6--Components"
+    },
     "paths": {
       "src/components": "src/components"
     },
@@ -30,4 +34,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}