Base64
by Yury Zeliankouski
Encode selected nodes into Base64 and get code snippets for HTML, CSS, React, SVG, JSON, Data URI
Installs
146
Likes
31
Users
2,616
Views
3,584
Preview
About this plugin
Encode selected nodes into Base64 and get code snippets in Figma Dev mode for HTML, CSS, React.js and React Native, SVG, JSON, Data URI.
Compatible with Figma for VS Code extension.
Base64 plugin encodes the nodes to the Data URI scheme and generates the code based on the export settings. In the Figma export settings, you can apply several settings at once, for example, add the required number of resources of different formats (such as PNG, JPG, SVG, PDF), specify the scaling factor and suffix, and the plugin will automatically generate and update the code for these settings with the appropriate format and MIME type.
In the plugin settings, you can control which code snippets will be displayed in the Inspect panel, as well as show/hide comments in the code. To do this, click the Inspect settings icon > Settings in the Code section of the Inspect panel.
The Base64 plugin is also available for Penpot. You can install it from the Penpot Hub.
Donation:
You can support the development and maintenance of this plugin by donating via destream.
Creator:
Yury ZeliankouskiMy other projects:
Glyphs plugin;Change Font plugin;Translation Suggestions plugin;Code Block to File plugin;Translate widget;How many Sticky Notes? widget.
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.