diff --git a/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx
new file mode 100644
index 00000000000..00be3d4f189
--- /dev/null
+++ b/packages/code-connect/components/JumpLinks/JumplinkHorizontal.figma.tsx
@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { JumpLinksItem } from '@patternfly/react-core';
+
+// TODO: DESIGN: FIGMA: Remove icons, help popup, and close button
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinksItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5286-5330',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+
+      // enum
+      isActive: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+      </JumpLinksItem>
+    )
+  }
+);
diff --git a/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx
new file mode 100644
index 00000000000..927a4e897a4
--- /dev/null
+++ b/packages/code-connect/components/JumpLinks/JumplinkVertical.figma.tsx
@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { JumpLinksItem } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinksItem,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8306',
+  {
+    props: {
+      // string
+      tabText: figma.string('Tab Text'),
+
+      // enum
+      isActive: figma.enum('State', { Selected: true })
+    },
+    example: (props) => (
+      <JumpLinksItem href="#" isActive={props.isActive}>
+        {props.tabText}
+      </JumpLinksItem>
+    )
+  }
+);
diff --git a/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx
new file mode 100644
index 00000000000..10ba1868643
--- /dev/null
+++ b/packages/code-connect/components/JumpLinks/JumplinksHorizontal.figma.tsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { JumpLinks } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinks,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=8644-150823',
+  {
+    props: {
+      // boolean
+      label: figma.boolean('Show label', {
+        true: 'Jump to section',
+        false: undefined
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <JumpLinks aria-label={props.label} label={props.label}>
+        {props.children}
+      </JumpLinks>
+    )
+  }
+);
diff --git a/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx
new file mode 100644
index 00000000000..e0d18ce0d57
--- /dev/null
+++ b/packages/code-connect/components/JumpLinks/JumplinksVertical.figma.tsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { JumpLinks } from '@patternfly/react-core';
+
+// Documentation for JumpLinks can be found at https://www.patternfly.org/components/jump-links
+
+figma.connect(
+  JumpLinks,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5426-8542',
+  {
+    props: {
+      // boolean
+      label: figma.boolean('Show Label', {
+        true: 'Jump to section',
+        false: undefined
+      }),
+
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <JumpLinks aria-label={props.label} isVertical label={props.label}>
+        {props.children}
+      </JumpLinks>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Label/LabelGroups.figma.tsx b/packages/code-connect/components/Label/LabelGroups.figma.tsx
new file mode 100644
index 00000000000..d71b4f69849
--- /dev/null
+++ b/packages/code-connect/components/Label/LabelGroups.figma.tsx
@@ -0,0 +1,230 @@
+import figma from '@figma/code-connect';
+import { Label, LabelGroup } from '@patternfly/react-core';
+
+// Documentation for LabelGroups can be found at https://www.patternfly.org/components/label
+
+const sharedProps = {
+  closableLabels: (
+    <>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+      <Label onClose={() => {}}>Label</Label>
+    </>
+  ),
+  editableLabels: (
+    <>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label1'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label1'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label2'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label3'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label4'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label5'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label6'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label7'
+        }}
+      >
+        Label
+      </Label>
+      <Label
+        color="grey"
+        isCompact
+        onClose={() => {}}
+        closeBtnAriaLabel="Custom close button for compact editable label"
+        onEditCancel={() => {}}
+        onEditComplete={() => {}}
+        isEditable
+        editableProps={{
+          'aria-label': `Editable compact label with text`,
+          id: 'compact-editable-label8'
+        }}
+      >
+        Label
+      </Label>
+    </>
+  )
+};
+
+figma.connect(
+  LabelGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
+  {
+    props: {
+      ...sharedProps,
+      // boolean
+      numLabels: figma.boolean('Has collapsed labels', {
+        true: 6,
+        false: undefined
+      }),
+
+      // enum
+      addLabelControl: figma.enum('Type', {
+        'Label management': (
+          <Label variant="add" onClick={() => {}}>
+            Add label
+          </Label>
+        )
+      })
+    },
+    example: (props) => (
+      <LabelGroup
+        addLabelControl={props.addLabelControl}
+        categoryName="Group label"
+        isClosable
+        numLabels={props.numLabels}
+        onClick={() => {}}
+      >
+        {props.closableLabels}
+      </LabelGroup>
+    )
+  }
+);
+
+figma.connect(
+  LabelGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1075',
+  {
+    variant: { Type: 'Label management' },
+    props: {
+      ...sharedProps,
+      // boolean
+      numLabels: figma.boolean('Has collapsed labels', {
+        true: 6,
+        false: undefined
+      }),
+
+      // enum
+      addLabelControl: figma.enum('Type', {
+        'Label management': (
+          <Label variant="add" onClick={() => {}}>
+            Add label
+          </Label>
+        )
+      })
+    },
+    example: (props) => (
+      <LabelGroup
+        addLabelControl={props.addLabelControl}
+        categoryName="Group label"
+        isClosable
+        numLabels={props.numLabels}
+        onClick={() => {}}
+      >
+        {props.editableLabels}
+      </LabelGroup>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Label/LabelInGroup.figma.tsx b/packages/code-connect/components/Label/LabelInGroup.figma.tsx
new file mode 100644
index 00000000000..561c66ec342
--- /dev/null
+++ b/packages/code-connect/components/Label/LabelInGroup.figma.tsx
@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Badge, Label } from '@patternfly/react-core';
+
+// TODO: DESIGN: Reconfigure how numlabels is set. Currently, the text string "more" is not customizable
+// TODO: DESIGN: Label group should contain label components
+
+// NOTE: "Label overflow" doesn't appear to be necessary
+// Documentation for Label can be found at https://www.patternfly.org/components/label-group
+
+figma.connect(Label, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2800-1067', {
+  props: {
+    labelText: figma.string('Label text'),
+    isCloseable: figma.boolean('Has Close button', {
+      true: `{() => {}}`,
+      false: undefined
+    }),
+    badge: figma.boolean('Has counter', {
+      true: <Badge>06</Badge>,
+      false: undefined
+    })
+  },
+  example: (props) => (
+    <Label onClose={props.isCloseable}>
+      {props.labelText}
+      {props.badge}
+    </Label>
+  )
+});
diff --git a/packages/code-connect/components/Label/LabelNonStatus.figma.tsx b/packages/code-connect/components/Label/LabelNonStatus.figma.tsx
new file mode 100644
index 00000000000..466f51b8c49
--- /dev/null
+++ b/packages/code-connect/components/Label/LabelNonStatus.figma.tsx
@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect';
+import { Label } from '@patternfly/react-core';
+
+// Documentation for Label can be found at https://www.patternfly.org/components/label
+// TODO: DESIGN: Update status to be a prop
+
+figma.connect(
+  Label,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-609',
+  {
+    props: {
+      status: 'info', // TODO: DESIGN: Update status to be a prop
+      // string
+      labelText: figma.string('Text'),
+
+      // boolean
+      isEditable: figma.boolean('Is Editable', {
+        true: {
+          isEditable: true,
+          onEditCancel: () => {}, // Callback when an editable label cancels an edit.
+          onEditComplete: () => {}, // Callback when an editable label completes an edit.
+          editableProps: {
+            'aria-label': `Editable label with text`,
+            id: 'editable-label'
+          }
+        },
+        false: undefined
+      }),
+
+      // enum
+      isCompact: figma.enum('Size', { Compact: true }),
+      color: figma.enum('Color', {
+        Red: 'red',
+        Orange: 'orange',
+        'Orange Red': 'orangered',
+        Green: 'green',
+        Blue: 'blue',
+        Purple: 'purple',
+        Grey: 'grey',
+        Cyan: 'teal', // TODO: DESIGN: Update to teal
+        Gold: 'yellow' // TODO: DESIGN: Update to yellow
+      }),
+      variant: figma.enum('Type', { Outlined: 'outline' })
+    },
+    example: (props) => (
+      <Label
+        isCompact={props.isCompact}
+        status={props.status}
+        isEditable={props.isEditable}
+        color={props.color}
+        variant={props.variant}
+      >
+        {props.labelText}
+      </Label>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Label/LabelStatus.figma.tsx b/packages/code-connect/components/Label/LabelStatus.figma.tsx
new file mode 100644
index 00000000000..e8cb48a55d5
--- /dev/null
+++ b/packages/code-connect/components/Label/LabelStatus.figma.tsx
@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import { Label } from '@patternfly/react-core';
+
+// Documentation for Label can be found at https://www.patternfly.org/components/label
+
+figma.connect(
+  Label,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2800-488',
+  {
+    props: {
+      // string
+      text: figma.string('Text'),
+      isCompact: figma.enum('Size', { Compact: true }),
+
+      // enum
+      variant: figma.enum('Type', { Outlined: 'outline' }),
+      status: figma.enum('Status', {
+        Success: 'success',
+        Warning: 'warning',
+        Danger: 'danger',
+        Info: 'info',
+        Custom: 'custom'
+      })
+    },
+    example: (props) => (
+      <Label isCompact={props.isCompact} status={props.status} variant={props.variant}>
+        {props.text}
+      </Label>
+    )
+  }
+);
diff --git a/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx b/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx
new file mode 100644
index 00000000000..b1849790164
--- /dev/null
+++ b/packages/code-connect/components/LoginPage/DesktopLoginPage.figma.tsx
@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { LoginPage } from '@patternfly/react-core';
+
+// TODO: Map Figma component to these properties
+// Documentation for LoginPage can be found at https://www.patternfly.org/components/login-page
+
+figma.connect(
+  LoginPage,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-4180',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => (
+      <LoginPage
+        brandImgSrc={brandImg}
+        brandImgAlt="PatternFly logo"
+        backgroundImgSrc="/assets/images/pfbg-icon.svg"
+        footerListItems={listItem}
+        textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
+        loginTitle="Log in to your account"
+        loginSubtitle="Enter your single sign-on LDAP credentials."
+        socialMediaLoginContent={socialMediaLoginContent}
+        socialMediaLoginAriaLabel="Log in with social media"
+        signUpForAccountMessage={signUpForAccountMessage}
+        forgotCredentials={forgotCredentialsprops.isInvalid}
+      >
+        {props.children}
+      </LoginPage>
+    )
+  }
+);
diff --git a/packages/code-connect/components/Masthead/Masthead.figma.tsx b/packages/code-connect/components/Masthead/Masthead.figma.tsx
new file mode 100644
index 00000000000..56982963c5b
--- /dev/null
+++ b/packages/code-connect/components/Masthead/Masthead.figma.tsx
@@ -0,0 +1,105 @@
+import figma from '@figma/code-connect';
+import {
+  Button,
+  Masthead,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  Menu,
+  MenuSearch,
+  MenuSearchInput,
+  SearchInput,
+  Divider,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  Nav,
+  NavItem,
+  NavList
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import { useState } from 'react';
+
+// TODO: DESIGN: Create masthead main section MastheadMain MastheadContent
+// TODO: DESIGN: Move Context Switcher, Horizontal Nav, etc to MastheadContent
+// TODO: DESIGN: Create necessary wrappers for MastheadToggle, MastheadBrand, MastheadContent
+// Documentation for Masthead can be found at https://www.patternfly.org/components/masthead
+
+const sharedProps = {
+  mastheadContent: figma.enum('Masthead content', {
+    'Context switcher': (
+      <Menu onSelect={() => {}} activeItemId={0}>
+        <MenuSearch>
+          <MenuSearchInput>
+            <SearchInput value={''} aria-label="Filter menu items" onChange={() => {}} />
+          </MenuSearchInput>
+        </MenuSearch>
+        <Divider />
+        <MenuContent>
+          <MenuList>
+            <MenuItem>Item 1</MenuItem>
+            <MenuItem>Item 2</MenuItem>
+            <MenuItem>Item 3</MenuItem>
+          </MenuList>
+        </MenuContent>
+      </Menu>
+    ),
+    'Horizontal navigation': (
+      <Nav onSelect={() => {}} variant="horizontal" aria-label="Horizontal nav local">
+        <NavList>
+          {Array.from({ length: 10 }).map((_value, index) => {
+            const num = index + 1;
+            return (
+              <NavItem
+                preventDefault
+                key={num}
+                itemId={num}
+                isActive={activeItem === num}
+                id={`horizontal-nav-${num}`}
+                to={`#horizontal-nav-${num}`}
+              >
+                Horizontal navigation item {num}
+              </NavItem>
+            );
+          })}
+        </NavList>
+      </Nav>
+    )
+  })
+};
+
+figma.connect(
+  Masthead,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6642',
+  {
+    props: {
+      ...sharedProps,
+      mastheadBrand: figma.children('Masthead logo'),
+      mastheadToggle: figma.boolean('Left Menu Toggle', {
+        true: (
+          <MastheadToggle>
+            <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+          </MastheadToggle>
+        ),
+        false: undefined
+      })
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [activeItem, setActiveItem] = useState(0);
+      /* eslint-enable */
+
+      return (
+        <Masthead id="basic-example">
+          <MastheadMain>
+            {props.mastheadToggle}
+            {props.mastheadBrand}
+          </MastheadMain>
+          <MastheadContent>
+            <span>{props.mastheadContent}</span>
+          </MastheadContent>
+        </Masthead>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx b/packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx
new file mode 100644
index 00000000000..c084d207f79
--- /dev/null
+++ b/packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { MastheadToggle } from '@patternfly/react-core';
+
+// Documentation for MastheadToggle can be found at https://www.patternfly.org/components/masthead
+
+figma.connect(
+  MastheadToggle,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6713',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <MastheadToggle onClick={() => {}}>{props.children}</MastheadToggle>
+  }
+);
diff --git a/packages/code-connect/components/Modal/AlertModal.figma.tsx b/packages/code-connect/components/Modal/AlertModal.figma.tsx
new file mode 100644
index 00000000000..ef4589e5a6a
--- /dev/null
+++ b/packages/code-connect/components/Modal/AlertModal.figma.tsx
@@ -0,0 +1,94 @@
+import figma from '@figma/code-connect';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// TODO: DESIGN: Add Modal Body component to Modal
+// TODO: DESIGN: Add Modal Footer component to Modal
+// TODO: DESIGN: Add Modal Header component to Modal
+// Documentation for Modal can be found at https://www.patternfly.org/components/modal
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2940-18403',
+  {
+    props: {
+      // boolean
+      hasDescription: figma.boolean('Description', {
+        true: 'Product description goes here',
+        false: undefined
+      }),
+      help: 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"
+          >
+            <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
+          </Popover>
+        ),
+        false: undefined
+      }),
+      title: 'Modal title',
+
+      // enum
+      modalFooter: figma.children(['Button', 'Link Button']),
+      modalContent: 'Content goes here',
+      titleIconVariant: figma.enum('Status', {
+        Success: 'success',
+        Danger: 'danger',
+        Info: 'info',
+        Warning: 'warning'
+      }),
+      variant: figma.enum('Size', {
+        Small: 'small',
+        Medium: 'medium',
+        Large: 'large'
+      })
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isOpen, setIsOpen] = React.useState(false);
+      /* eslint-enable */
+
+      return (
+        <>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setIsOpen(!isOpen);
+            }}
+          >
+            Show about modal
+          </Button>
+          <Modal
+            aria-labelledby="<modal-id>"
+            aria-describedby="<modal-body>"
+            isOpen={true}
+            onClose={() => {
+              setIsOpen(!isOpen);
+            }}
+            variant={props.variant}
+          >
+            <ModalHeader
+              description={props.hasDescription}
+              help={props.help}
+              labelId="<modal-id>"
+              title={props.title}
+              titleIconVariant={props.titleIconVariant}
+            />
+            <ModalBody tabIndex={0} id="<modal-body>">
+              {props.modalContent}
+            </ModalBody>
+            <ModalFooter>{props.modalFooter}</ModalFooter>
+          </Modal>
+          <Button></Button>
+        </>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/components/Modal/BasicModal.figma.tsx b/packages/code-connect/components/Modal/BasicModal.figma.tsx
new file mode 100644
index 00000000000..ccfcd4e40b2
--- /dev/null
+++ b/packages/code-connect/components/Modal/BasicModal.figma.tsx
@@ -0,0 +1,84 @@
+import figma from '@figma/code-connect';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+// TODO: DESIGN: Add Modal Body component to Modal
+// TODO: DESIGN: Add Modal Footer component to Modal
+// TODO: DESIGN: Add Modal Header component to Modal
+// Documentation for Modal can be found at https://www.patternfly.org/components/modal
+
+figma.connect(
+  Modal,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2937-158',
+  {
+    props: {
+      // boolean
+      hasDescription: figma.boolean('Description', {
+        true: 'Product description goes here',
+        false: undefined
+      }),
+      help: 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"
+          >
+            <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
+          </Popover>
+        ),
+        false: undefined
+      }),
+      title: 'Modal title',
+
+      // enum
+      modalFooter: figma.children(['Button', 'Link Button']),
+      modalContent: 'Content goes here',
+      variant: figma.enum('Size', {
+        Small: 'small',
+        Medium: 'medium',
+        Large: 'large'
+      })
+    },
+    example: (props) => {
+      /* eslint-disable */
+      const [isModalOpen, setIsOpen] = React.useState(false);
+      /* eslint-enable */
+
+      return (
+        <>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setIsOpen(!isModalOpen);
+            }}
+          >
+            Show about modal
+          </Button>
+          <Modal
+            aria-labelledby="<modal-id>"
+            aria-describedby="<modal-body>"
+            isOpen={isModalOpen}
+            onClose={() => setIsOpen(!isModalOpen)} // handles the close button
+            variant={props.variant}
+          >
+            <ModalHeader
+              description={props.hasDescription}
+              title={props.title}
+              titleIconVariant={props.titleIconVariant}
+              labelId="<modal-id>"
+              help={props.help}
+            />
+            <ModalBody id="<modal-body>">{props.modalContent}</ModalBody>
+            <ModalFooter>{props.modalFooter}</ModalFooter>
+          </Modal>
+          <Button></Button>
+        </>
+      );
+    }
+  }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..6a65d1f747e 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -2,17 +2,22 @@
   "codeConnect": {
     "parser": "react",
     "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
+      "components/JumpLinks/*.figma.tsx",
+      "components/Label/*.figma.tsx",
+      "components/LoginPage/*.figma.tsx",
+      "components/Masthead/*.figma.tsx",
+      "components/Model/*.figma.tsx"
     ],
     "paths": {
-      "src/components": "src/components"
+      "@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
+      "@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"
+    },
+    "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": "."
+      "@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",
+      "@patternfly/react-table": "/Users/mnolting/Web/patternfly-react/packages/react-table/src"
     },
     "importPaths": {
       "src/components": "src/components"
@@ -28,6 +33,7 @@
       "production": {
         "enabled": false
       }
-    }
+    },
+    "exclude": ["node_modules/**", "scripts/**"]
   }
-}
\ No newline at end of file
+}