Zed to Figma (Figma Plugin)

Render a editable, syntax-highlighted code block in Figma via Zed's copy highlight json command.

Usage

1. Run pnpm install - You may need to ensure you have node 20 or run nvm use 20.
2. In Zed, select the code block you want to copy.
3. Run the editor: copy highlight json command.
4. Paste the JSON into the static_json const in src/main.ts.
5. Run npm run build to build the plugin.
6. In Figma, load the plugin through Import plugin from manifest… and select the manifest.json file.
7. Execute the Zed to Figma plugin from the Plugins menu or command palette (cmd+/).

Contributing

Feel free to contribute code to this project. I tend to need this on-and-off, so I'll probably only spend time on it as I need improvements or there is demand. If you have a feature request, feel free to open an issue – I may not see these, and am not looking to boil the ocean with this plugin.

Some obvious improvements that could be made:

• Fixing output indentation and spacing.
• Add a basic UI to enable some of the latter features.
• Add option for line numbers
• Enable modifying line height, font size, etc.
• Allowing dynamic input of JSON strings.
• Enabling theme selection.
• Allow passing a range of desired editable lines, flattening the rest to improve performance
• General performance improvements to improve the time it takes to render the code block
• Extend the Zed CLI to allow running the copy highlight json command from the command line (removing the need to go into Zed at all)

Themes:

• Add more themes - Ideally just some common ones, I don't want to check in 50 themes here.
• A way to handle custom themes with some error handling for missing or malformed themes.
• Some cleanup of the Theme type, and a way to make them selectable in a UI.

Acknowledgements

• Thanks @nathansobo for writing the original copy highlight json command in Zed 🙏🏽
• This plugin is built with Create Figma Plugin.

Development guide

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.