Deploying Plugins

​

Build your plugin

​

TypeScript compilation

{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "moduleResolution": "bundler",
    "outDir": "dist"
  }
}

​

Using a bundler

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      formats: ['es'],
      fileName: 'plugin'
    },
    rollupOptions: {
      external: ['@tempad-dev/plugins']
    }
  }
})

​

Hosting options

​

GitHub (recommended)

https://raw.githubusercontent.com/{username}/{repo}/refs/heads/{branch}/{filename}.js

https://raw.githubusercontent.com/Justineo/tempad-dev-plugin-kong/refs/heads/main/dist/kong.mjs

• Free hosting
• Version control built-in
• CORS enabled by default
• Easy to update

​

GitHub Gist

1. Create a new Gist at gist.github.com
2. Add your plugin code
3. Click “Create public gist”
4. Click the “Raw” button to get the URL

https://gist.githubusercontent.com/{username}/{gist-id}/raw/{filename}.js

​

CDN services

https://cdn.jsdelivr.net/gh/{username}/{repo}@{version}/{file}

​

Plugin structure requirements

1. Be a valid ES module

// ✅ Good
export default definePlugin({ ... })

// ❌ Bad
module.exports = { ... }

2. Export as default or named plugin

// Option 1: default export (recommended)
export default definePlugin({ ... })

// Option 2: named export
export const plugin = definePlugin({ ... })

3. Support cross-origin requests
   • GitHub raw URLs work automatically
   • Custom servers must set Access-Control-Allow-Origin: *

​

Security considerations

• Standard JavaScript built-ins (Array, Object, Math, Date, etc.)
• console for debugging
• Plugin SDK exports (definePlugin, h, findChild, etc.)

• DOM APIs (document, window, localStorage)
• Network requests (fetch, XMLHttpRequest)
• Node.js APIs (fs, path, process)
• Third-party libraries (unless bundled)

​

Testing your plugin

​

Local testing

1. Run a local dev server (e.g., Vite, Next.js):

npx vite --port 3000

2. Use the local network URL in TemPad Dev:

http://localhost:3000/dist/plugin.js

3. Changes will reflect after manually updating in Preferences

​

Browser testing

1. Open TemPad Dev in Figma
2. Go to Preferences → Plugins
3. Paste your plugin URL
4. Click Save
5. Select an element to see your plugin’s output

​

Sharing your plugin

​

Option 1: Share the URL

Install this plugin in TemPad Dev:
https://raw.githubusercontent.com/username/tempad-plugin/main/dist/index.js

​

Option 2: Add to official registry

1. Fork the TemPad Dev repository
2. Edit packages/extension/plugins/available-plugins.json
3. Add your plugin:

{
  "name": "my-plugin",
  "author": "@yourusername",
  "description": "Short description of your plugin",
  "repo": "https://github.com/yourusername/tempad-plugin",
  "url": "https://raw.githubusercontent.com/yourusername/tempad-plugin/main/dist/index.js"
}

4. Submit a pull request

@my-plugin

​

Example repository structure

tempad-plugin/
├── src/
│   └── index.ts          # Plugin source code
├── dist/
│   └── index.js          # Compiled output
├── package.json
├── tsconfig.json
├── README.md             # Plugin documentation
└── LICENSE

​

Example package.json

{
  "name": "tempad-dev-plugin-example",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "@tempad-dev/plugins": "latest",
    "typescript": "^5.0.0"
  }
}

​

Versioning and updates

​

Versioning strategy

1. Use semantic versioning in your repository
2. Tag releases in GitHub:

git tag v1.0.0
git push origin v1.0.0

3. Update the URL when breaking changes occur:

# Users on v1
https://raw.githubusercontent.com/username/plugin/refs/tags/v1.0.0/dist/index.js

# Users on v2  
https://raw.githubusercontent.com/username/plugin/refs/tags/v2.0.0/dist/index.js

​

Changelog

# Changelog

## [1.1.0] - 2026-03-05
### Added
- Support for transformComponent hook
- New design token mapping

### Fixed
- Variable conversion edge case

## [1.0.0] - 2026-01-15
- Initial release

​

Real-world examples

• Kong Design System - Justineo/tempad-dev-plugin-kong
• Tailwind CSS - haydenull/tempad-dev-plugin-tailwind
• React Native - CANntyield/tempad-dev-plugin-react-native

​

Troubleshooting

​

Plugin not loading

• ✅ Check that the URL is accessible in your browser
• ✅ Verify CORS headers allow cross-origin requests
• ✅ Ensure the file is a valid ES module
• ✅ Check browser console for error messages

​

Changes not reflecting

• ✅ Manually update the plugin from Preferences
• ✅ Clear browser cache and reload
• ✅ Use version tags in URLs to bypass caching

​

Transform not working

• ✅ Check that your hook returns a string (or DevComponent for transformComponent)
• ✅ Verify the hook name matches exactly (transform, transformVariable, etc.)
• ✅ Test with simple console.log statements to debug

​

Next steps