Skip to main content

​
Official plugin registry

These plugins are available in the official registry and can be installed by name using the @{name} syntax.

​
Design systems

​
Kong Design System

Install: @kong

Author: @Justineo

Repository: GitHub

Official Kong Design System plugin for converting Figma designs to Kong components.

​
Kong Design System (Advanced)

Install: @kong/advanced

Author: @Justineo

Repository: GitHub

Advanced variant of the Kong Design System plugin with additional features.

​
Nuxt UI

Install: @nuxt

Author: @Justineo

Repository: GitHub

Generate Nuxt UI component code from Figma designs.

​
Nuxt UI Pro

Install: @nuxt/pro

Author: @Justineo

Repository: GitHub

Nuxt UI Pro components support for premium Nuxt UI features.

​
CSS frameworks

​
Tailwind CSS

Install: @tailwind

Author: @haydenull

Repository: GitHub

Convert CSS styles to Tailwind utility classes automatically.

​
UnoCSS by FubukiCSS

Install: @fubukicss/unocss

Author: @zouhangwithsweet

Repository: GitHub

Generate UnoCSS utility classes from Figma designs using FubukiCSS.

​
Framework adapters

​
React Native StyleSheet

Install: @react-native

Author: @CANntyield

Repository: GitHub

Convert CSS to React Native StyleSheet objects for mobile development.

​
Custom design systems

​
Baidu Health wz-style

Install: @baidu-health/wz-style

Author: @KangXinzhi

Repository: GitHub

Custom style plugin for Baidu Health wz-style design system.

​
Baidu Health med-style

Install: @baidu-health/med-style

Author: @KangXinzhi

Repository: GitHub

Custom style plugin for Baidu Health med-style design system.

​
Installation

To install any plugin from the registry:
  1. Open TemPad Dev in Figma
  2. Go to Preferences → Plugins
  3. Enter the plugin name with @ prefix (e.g., @tailwind)
  4. Click Save
@tailwind
@kong
@nuxt/pro
Plugin code is stored in browser local storage and is not auto-updated. Manually update plugins from Preferences when new versions are released.

​
Custom plugins

You can also install plugins by URL: 
https://raw.githubusercontent.com/username/repo/refs/heads/main/plugin.js

Create Your Own Plugin

Learn how to build custom plugins for your design system

​
Contributing your plugin

Want to add your plugin to the registry?
  1. Create your plugin following the creation guide
  2. Host it on GitHub or a public URL
  3. Add it to the registry file
  4. Submit a pull request
Registry entry format: 
{
  "name": "your-plugin",
  "author": "@yourusername",
  "description": "Short description of what your plugin does",
  "repo": "https://github.com/yourusername/tempad-dev-plugin-name",
  "url": "https://raw.githubusercontent.com/yourusername/tempad-dev-plugin-name/main/dist/index.js"
}

Deploy Your Plugin

Learn how to host and share your plugin

​
Plugin requirements

To be accepted into the registry, plugins must:
  • ✅ Be hosted on a public, stable URL
  • ✅ Support cross-origin requests (CORS)
  • ✅ Be a valid ES module
  • ✅ Export a valid plugin object
  • ✅ Have a public repository with documentation
  • ✅ Follow semantic versioning

​
Support and issues

For plugin-specific issues, contact the plugin author directly through their repository. For TemPad Dev core issues: