diff --git a/packages/react-core/codeConnect/components/AboutModal.figma.tsx b/packages/react-core/codeConnect/components/AboutModal.figma.tsx
new file mode 100644
index 00000000000..52be73b8423
--- /dev/null
+++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx
@@ -0,0 +1,28 @@
+import { AboutModal } from '@patternfly/react-core/dist/js/components/AboutModal';
+import figma from '@figma/code-connect';
+
+figma.connect(
+ AboutModal,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2879-13973&m=dev',
+ {
+ // reserve variables for mapping
+ // use props for Figma design file properties
+ props: {
+ productName: figma.string('Product name'),
+
+ // use `Content` ubiquitiously
+ children: figma.children('*')
+ },
+ example: (props) => (
+
+ {props.children}
+
+ )
+ }
+);
diff --git a/packages/react-core/codeConnect/components/Avatar.figma.tsx b/packages/react-core/codeConnect/components/Avatar.figma.tsx
new file mode 100644
index 00000000000..a374bf4c0a7
--- /dev/null
+++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx
@@ -0,0 +1,27 @@
+import { Avatar } from 'src/components/Avatar';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+ Avatar,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=1561-4342&m=dev',
+ {
+ props: {
+ isBordered: figma.boolean('Bordered'),
+ size: figma.enum('Size', {
+ small: 'sm',
+ med: 'md',
+ lg: 'lg',
+ XL: 'xl'
+ })
+ },
+ example: (props) =>
+ }
+);
diff --git a/packages/react-core/codeConnect/components/BackToTop.figma.tsx b/packages/react-core/codeConnect/components/BackToTop.figma.tsx
new file mode 100644
index 00000000000..a0e4229257e
--- /dev/null
+++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx
@@ -0,0 +1,12 @@
+import { BackToTop } from '@patternfly/react-core/dist/js/components/BackToTop';
+import figma from '@figma/code-connect';
+
+figma.connect(
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1521-958&m=dev',
+ {
+ props: {
+ title: figma.string('Text')
+ },
+ example: (props) =>
+ }
+);
diff --git a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx
new file mode 100644
index 00000000000..9092ccea8ad
--- /dev/null
+++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx
@@ -0,0 +1,19 @@
+import { BackgroundImage } from 'src/components/BackgroundImage';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+ BackgroundImage,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2722-13543&m=dev',
+ {
+ props: {},
+ example: () =>
+ }
+);
diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx
new file mode 100644
index 00000000000..20187ca3b57
--- /dev/null
+++ b/packages/react-core/codeConnect/components/Banner.figma.tsx
@@ -0,0 +1,47 @@
+import { Banner } from 'src/components/Banner';
+import figma from '@figma/code-connect';
+
+/** Status banner example */
+figma.connect(
+ Banner,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev',
+ {
+ props: {
+ status: figma.enum('Status', {
+ Success: 'success',
+ Warning: 'warning',
+ Danger: 'danger',
+ Info: 'info',
+ Custom: 'custom'
+ })
+ },
+ example: (props) => {
+ ;
+ }
+ }
+);
+
+/** Non-Status banner example */
+figma.connect(
+ Banner,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443&m=dev',
+ {
+ props: {
+ className: figma.className([]),
+ color: figma.enum('Color', {
+ Red: 'red',
+ Orangered: 'orangered',
+ Orange: 'orange',
+ Gold: 'gold',
+ Green: 'green',
+ Cyan: 'cyan',
+ Blue: 'blue',
+ Purple: 'purple',
+ Gray: 'gray'
+ })
+ },
+ example: (props) => {
+ ;
+ }
+ }
+);
\ No newline at end of file
diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx
new file mode 100644
index 00000000000..85b47e6cf44
--- /dev/null
+++ b/packages/react-core/codeConnect/components/Brand.figma.tsx
@@ -0,0 +1,19 @@
+import { Brand } from 'src/components/Brand';
+import figma from '@figma/code-connect';
+
+// Masthead logo
+figma.connect(
+ Brand,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev',
+ {
+ example: () =>
+ }
+);
+
+figma.connect(
+ Brand,
+ 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev',
+ {
+ example: () =>
+ }
+);
diff --git a/packages/react-core/figma.config.json b/packages/react-core/figma.config.json
new file mode 100644
index 00000000000..1e21f790e32
--- /dev/null
+++ b/packages/react-core/figma.config.json
@@ -0,0 +1,31 @@
+{
+ "codeConnect": {
+ "parser": "react",
+ "label": "PF-React",
+ "include": [
+ "codeConnect/*.tsx",
+ "codeConnect/components/*.tsx"
+ ],
+ "paths": {
+ "src/components": "src/components"
+ },
+ "aliases": {
+ "@patternfly/react-core": "."
+ },
+ "importPaths": {
+ "src/components": "src/components"
+ },
+ "options": {
+ "instanceSwapper": {
+ "enabled": true
+ },
+ "development": {
+ "enabled": true,
+ "verbose": true
+ },
+ "production": {
+ "enabled": false
+ }
+ }
+ }
+}