diff --git a/packages/raystack/figma.config.json b/packages/raystack/figma.config.json
index b7cc8b09a..bac267d89 100644
--- a/packages/raystack/figma.config.json
+++ b/packages/raystack/figma.config.json
@@ -4,7 +4,7 @@
     "exclude": [],
     "parser": "react",
     "documentUrlSubstitutions": {
-      "<FIGMA_BUTTON>": "node-id=1-101"
+      "<FIGMA_LINK>": "FIGMA_FILE_URL"
     }
   }
 }
diff --git a/packages/raystack/figma/button.figma.tsx b/packages/raystack/figma/button.figma.tsx
index 19cee0163..37a13ab52 100644
--- a/packages/raystack/figma/button.figma.tsx
+++ b/packages/raystack/figma/button.figma.tsx
@@ -1,7 +1,7 @@
 import figma from '@figma/code-connect';
 import { Button } from '../components/button';
 
-figma.connect(Button, '<FIGMA_BUTTON>', {
+figma.connect(Button, '<FIGMA_LINK>?node-id=1-84', {
   imports: ["import { Button } from '@raystack/apsara'"],
   props: {
     variant: figma.enum('Variant', {
@@ -20,7 +20,21 @@ figma.connect(Button, '<FIGMA_BUTTON>', {
       Small: 'small',
       Normal: 'normal'
     }),
-    children: figma.string('Label Copy')
+    children: figma.string('Label Copy'),
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    leadingIcon: figma.boolean('Leading Visible', {
+      true: figma.instance('Leading Icon'),
+      false: undefined
+    }),
+    trailingIcon: figma.boolean('Trailing Visible', {
+      true: figma.instance('Trailing Icon'),
+      false: undefined
+    }),
+    loading: figma.enum('Label Copy', {
+      'Loading...': true
+    })
   },
   example: ({ children, ...props }) => <Button {...props}>{children}</Button>
 });
diff --git a/packages/raystack/figma/checkbox.figma.tsx b/packages/raystack/figma/checkbox.figma.tsx
new file mode 100644
index 000000000..d0c088e2f
--- /dev/null
+++ b/packages/raystack/figma/checkbox.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from '../components/checkbox';
+
+figma.connect(Checkbox, '<FIGMA_LINK>?node-id=1-372', {
+  imports: ["import { Checkbox } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    checked: figma.enum('Variant', {
+      Default: false,
+      Selected: true,
+      Indeterminate: 'indeterminate'
+    })
+  },
+  example: props => <Checkbox {...props} />
+});
diff --git a/packages/raystack/figma/input.figma.tsx b/packages/raystack/figma/input.figma.tsx
new file mode 100644
index 000000000..605d6e4f9
--- /dev/null
+++ b/packages/raystack/figma/input.figma.tsx
@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { InputField } from '../components/input-field';
+
+figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
+  imports: ["import { InputField } from '@raystack/apsara'"],
+  props: {
+    prefix: figma.enum('Variant', {
+      Prefix: figma.textContent('Prefix')
+    }),
+    suffix: figma.enum('Variant', {
+      Suffix: figma.textContent('Suffix')
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Place holder'),
+      Active: figma.textContent('Place holder'),
+      Hover: figma.textContent('Place holder'),
+      Disabled: figma.textContent('Place holder')
+    }),
+    value: figma.enum('State', {
+      Filled: figma.enum('Variant', {
+        Normal: figma.textContent('Filled'),
+        Prefix: figma.textContent('Input text'),
+        Suffix: figma.textContent('Input text')
+      })
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    }),
+    label: figma.boolean('Label', {
+      true: figma.textContent('Label'),
+      false: undefined
+    }),
+    helperText: figma.boolean('Helper text', {
+      true: figma.textContent('Helper Text'),
+      false: undefined
+    }),
+    optional: figma.boolean('Optional'),
+    leadingIcon: figma.instance('Leading Icon')
+  },
+  example: props => <InputField {...props} />
+});
diff --git a/packages/raystack/figma/radio.figma.tsx b/packages/raystack/figma/radio.figma.tsx
new file mode 100644
index 000000000..24a32d41c
--- /dev/null
+++ b/packages/raystack/figma/radio.figma.tsx
@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { Radio } from '../components/radio';
+
+figma.connect(Radio, '<FIGMA_LINK>?node-id=2-148', {
+  imports: ["import { Radio } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    })
+  },
+  example: props => (
+    <Radio>
+      <Radio.Item value='value' {...props} />
+    </Radio>
+  )
+});
diff --git a/packages/raystack/figma/search.figma.tsx b/packages/raystack/figma/search.figma.tsx
new file mode 100644
index 000000000..ba9d9e411
--- /dev/null
+++ b/packages/raystack/figma/search.figma.tsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect';
+import { Search } from '../components/search';
+
+figma.connect(Search, '<FIGMA_LINK>?node-id=209-1186', {
+  imports: ["import { Search } from '@raystack/apsara'"],
+  props: {
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Search...'),
+      Active: figma.textContent('Search...'),
+      Hover: figma.textContent('Search...')
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    })
+  },
+  example: props => <Search {...props} />
+});
diff --git a/packages/raystack/figma/slider.figma.tsx b/packages/raystack/figma/slider.figma.tsx
new file mode 100644
index 000000000..cecf1a416
--- /dev/null
+++ b/packages/raystack/figma/slider.figma.tsx
@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { Slider } from '../components/slider';
+
+figma.connect(Slider, '<FIGMA_LINK>?node-id=254-549', {
+  imports: ["import { Slider } from '@raystack/apsara'"],
+  props: {
+    variant: figma.enum('Variant', {
+      Single: 'single',
+      Range: 'range'
+    }),
+    handle: figma.nestedProps('Handle', {
+      thumbSize: figma.enum('Size', {
+        Small: 'small',
+        Large: 'large'
+      }),
+      label: figma.boolean('Handle Label', {
+        true: figma.textContent('Label'),
+        false: undefined
+      })
+    })
+  },
+  example: ({ handle, ...props }) => (
+    <Slider thumbSize={handle.thumbSize} label={handle.label} {...props} />
+  )
+});
diff --git a/packages/raystack/figma/switch.figma.tsx b/packages/raystack/figma/switch.figma.tsx
new file mode 100644
index 000000000..f8cac9555
--- /dev/null
+++ b/packages/raystack/figma/switch.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Switch } from '../components/switch';
+
+figma.connect(Switch, '<FIGMA_LINK>?node-id=1-349', {
+  imports: ["import { Switch } from '@raystack/apsara'"],
+  props: {
+    disabled: figma.enum('State', {
+      Disabled: true
+    }),
+    size: figma.enum('Size', {
+      Small: 'small',
+      Large: 'large'
+    }),
+    defaultChecked: figma.boolean('Selected')
+  },
+  example: props => <Switch {...props} />
+});
diff --git a/packages/raystack/figma/textarea.tsx b/packages/raystack/figma/textarea.tsx
new file mode 100644
index 000000000..e36794a7d
--- /dev/null
+++ b/packages/raystack/figma/textarea.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { TextArea } from '../components/text-area';
+
+figma.connect(TextArea, '<FIGMA_LINK>?node-id=180-585', {
+  imports: ["import { TextArea } from '@raystack/apsara'"],
+  props: {
+    placeholder: figma.enum('State', {
+      Default: figma.textContent('Place holder'),
+      Active: figma.textContent('Place holder'),
+      Hover: figma.textContent('Place holder')
+    }),
+    value: figma.enum('State', {
+      Filled: figma.textContent('Filled'),
+      'Filled Active': figma.textContent('Filled')
+    }),
+    label: figma.boolean('Label', {
+      true: figma.textContent('Label'),
+      false: undefined
+    }),
+    helperText: figma.boolean('Helper text', {
+      true: figma.textContent('Helper Text'),
+      false: undefined
+    }),
+    isOptional: figma.boolean('Optional')
+  },
+  example: props => <TextArea {...props} />
+});
diff --git a/packages/raystack/scripts/update-figma-config.js b/packages/raystack/scripts/update-figma-config.js
index 74fb27f75..285e7d150 100644
--- a/packages/raystack/scripts/update-figma-config.js
+++ b/packages/raystack/scripts/update-figma-config.js
@@ -3,11 +3,12 @@ const path = require('path');
 
 // Load environment variables from .env file
 require('dotenv').config();
+const FIGMA_FILE_URL = 'FIGMA_FILE_URL';
 
 const CONFIG_FILE = path.join(__dirname, '..', 'figma.config.json');
 
 // Read Figma URL from environment
-const figmaUrl = process.env.FIGMA_FILE_URL;
+const figmaUrl = process.env[FIGMA_FILE_URL];
 
 if (!figmaUrl) {
   console.error('Error: FIGMA_FILE_URL environment variable is not set');
@@ -21,8 +22,11 @@ const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
 for (const [key, value] of Object.entries(
   config.codeConnect.documentUrlSubstitutions
 )) {
-  if (value.startsWith('node-id='))
-    config.codeConnect.documentUrlSubstitutions[key] = `${figmaUrl}?${value}`;
+  if (value.startsWith(FIGMA_FILE_URL))
+    config.codeConnect.documentUrlSubstitutions[key] = value.replace(
+      FIGMA_FILE_URL,
+      figmaUrl
+    );
 }
 
 // Write updated config