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 codeSelect one or more (ideally top level) layers/nodesRun the command Node DecoderCopy the generated source codeClick the toggle to flip between plugin and widget code.Previewing codePress the play icon to run the currently generated codePlugin codeSelection should ideally be made at the top levelDoesn't support checking for custom fonts yetDoesn't support images yetSome frames which use Auto Layout may be slightly off because of when properties are appliedFeaturesGenerates most of the source code needed to create, frames, shapes, vectors, text, groups, boolean operations, components and component setsProvides syntax highlighted code which you can copy to use in your own pluginDetects when text layers are present and provides a function for loading fonts before setting text propertiesAutomatically creates components needed for selection if not selected by the userAutomatically creates paint, effect, grid and text styles if used by nodesIntelligently generates overrides for instance nodesWidget codeVectors 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 yetSome nodes do not exist as React components are not supported in widget codeIf you encounter any issues or have any feedback, please raise an issue at https://github.com/limitlessloop/figma-node-decoderJavaScript 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