tempad-dev

---

Key features

Inspect CSS code

Select any element, and you can obtain the CSS code through the plugin's Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.

You can configure CSS units and root font size to convert px dimensions in CSS to rem units. You can also apply a scale factor to scale px values according to your handoff requirements.

[!WARNING] Switching units only affects the output in the TemPad Dev panel, not the Figma canvas.

Deep select mode

In Figma's read-only view, selecting nodes requires double-clicking to drill down, and it often takes repeated double-clicks to select the lowest-level node. Although Figma offers a ⌘ + click shortcut, many users are unaware of this feature and need to perform extra key operations each time. Therefore, TemPad Dev provides a deep select mode in preferences.

Measure to selection mode

In Figma's read-only view, you need to hold ⌥ and move the cursor to display the spacing between other nodes and the selected node. For similar reasons to the deep select mode, TemPad Dev provides a measure to selection mode in preferences.

Scroll selection into view

When you hover over a node name section in TemPad Dev's inspect panel, a corresponding button appears. Clicking it will scroll the current selection to the center of the Figma viewport. Figma has a similar ⇧2 shortcut, but it zooms in to fill the viewport, which often doesn't meet the needs. Figma actually exposes an interface in the plugin API to move and zoom to 100%, so we also provide this capability as a supplement.

---

Plugins

Plugins allow you to customize the built-in code output or add custom code blocks.

A TemPad Dev plugin is a simple JavaScript file that exports a plugin object as its default export or plugin named export. To install a plugin, paste the plugin file's URL into the Preferences > Plugins section. Some built-in plugins can also be enabled by using @{name} syntax (e.g., @foo), which corresponds to the plugin names in our plugin registry.

[!NOTE] Plugin code is stored in the browser's local storage. Plugins are not versioned or auto-updated, so you must manually update them from the UI.

Creating plugins

Use the fully typed definePlugin function from the @tempad-dev/plugins package to simplify plugin creation.

npm install -D @tempad-dev/plugins # or pnpm add -D @tempad-dev/plugins

Here is an example of a simple plugin that overrides the built-in CSS code block and hides the JavaScript code block:

import { definePlugin } from '@tempad-dev/plugins'

export default definePlugin({
  name: 'My Plugin',
  code: {
    css: {
      title: 'Stylus', // Custom code block title
      lang: 'stylus', // Custom syntax highlighting language
      transform({ style }) {
        return Object.entries(style)
          .map(([key, value]) => `${key} ${value}`)
          .join('\n')
      }
    },
    js: false // Hides the built-in JavaScript code block
  }
})

See Justineo/tempad-dev-plugin-kong for more comprehensive examples.

[!NOTE] Plugin file must be a valid ES module and export the plugin object as the default export or plugin named export.

Currently, we support 4 plugin hooks:

• transform: Converts the style object or code into a string format for the code block. Useful for custom structures, such as Tailwind CSS or UnoCSS.
• transformVariable: Converts CSS variables into alternate formats, e.g., converting them to Sass variables for design tokens.
• transformPx: Converts pixel values into other units or scales.
• transformComponent: Converts the design component object into a dev component object or a string for the code block. Useful for generating component code for design systems.

[!TIP] To include JavaScript variables in generated CSS, wrap the variable name in \0 characters. This will convert it into string interpolation for JavaScript. e.g. if you return \0foo\0 as the return value, an input of calc(var(--foo) + 10px) will be transformed into a JavaScript template string as `calc(${foo} + 10px)`.

Additionally, you can specify a custom title and lang for the code block or hide the built-in code block by setting it to false.

For full type definitions and helper functions, see packages/plugins/src/index.ts.

Deploying a plugin

Ensure your plugin is accessible via a URL that supports cross-origin requests, such as a GitHub repository (or Gist). For instance, you can use a raw URL:

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

[!NOTE] Plugin URLs must support cross-origin requests. Raw URLs provided by GitHub or Gist are generally suitable.

Plugins run in a Web Worker, so they do not impact the main thread or access the DOM, safeguarding performance and security. Only a limited set of globals is available in the plugin context. See packages/extension/codegen/safe.ts for details.

Sharing a plugin

You can also register the plugin into our plugin registry file so that your plugin can be installed by name directly.

Come and add your own awesome plugin!

Current available plugins:

| Plugin name | Description | Author | Repository | | -- | -- | -- | -- | | @kong | Kong Design System | @Justineo | <img alt="GitHub" src="https://simpleicons.org/icons/gi