Node Decoder

About this plugin

Node Decoder generates plugin or widget source code from any Figma design as Javascript and JSX. Useful for avoiding the need to code visual assets manually when developing plugins.

Generating source code

1. Select one or more (ideally top level) layers/nodes
2. Run the command Node Decoder
3. Copy the generated source code
4. Click the toggle to flip between plugin and widget code.

Previewing code

1. Press the play icon to run the currently generated code

Plugin code

• Selection should ideally be made at the top level
• Doesn't support checking for custom fonts yet
• Doesn't support images yet
• Some frames which use Auto Layout may be slightly off because of when properties are applied

Features

• Generates most of the source code needed to create, frames, shapes, vectors, text, groups, boolean operations, components and component sets
• Provides syntax highlighted code which you can copy to use in your own plugin
• Detects when text layers are present and provides a function for loading fonts before setting text properties
• Automatically creates components needed for selection if not selected by the user
• Automatically creates paint, effect, grid and text styles if used by nodes
• Intelligently generates overrides for instance nodes

Widget code

• Vectors should be in frames and have an export setting of SVG.
• It's better to use frames than groups (for now)
• Doesn't support images yet
• Some nodes do not exist as React components are not supported in widget code

If you encounter any issues or have any feedback, please raise an issue at https://github.com/limitlessloop/figma-node-decoder

JavaScript API (Alpha)

An alpha version of a JavaScript API is now available to try in your own plugins. Convert any node to a string that can be recreated later.

https://github.com/limitlessloop/figma-node-decoder/tree/javascript-api