Figma Code Snippet Widget

Development guide

This widget is built with Create Figma Plugin. It uses Prismjs with a custom theme inspired by CodeSandbox for syntax highlighting and react-simple-code-editor for a simple, pared back code editing interface.

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the widget

To build the widget:

$ npm run build

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

To watch for code changes and rebuild the widget automatically:

$ npm run watch

Install the widget

1. In the Figma desktop app, open a FigJam document.
2. Search for and run Import widget 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.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins
• Prismjs
• react-simple-code-editor

Official docs and code samples from Figma:

• Widget API docs
• figma/widget-samples