Back to Plugins
PonyUI Assets Export - Figma nodes to png, jpg, svg, svgr

PonyUI Assets Export - Figma nodes to png, jpg, svg, svgr

Batch export of assets right into dev workspace

assets exportfigma to jpgdesign to codefigma-to-codeimagesdevvectorfigma to pngcodeexportfigma to codefigma to svgbatch export

Plugin Preview

PonyUI Assets Export - Figma nodes to png, jpg, svg, svgr preview

About this plugin

PonyUI Assets Export helps developers to export assets from Figma to local workspace! FAST and FREE!✨ Save your time - Configure what should be exported inside Figma with our Figma plugin and export all assets with a single command.📤 Simplified asset export - No more repetitive steps for each file like save file to disk, rename and copy to source folder.⚛️ Automated React icons - Generate React icon components automatically, no more copy-pasting code to/from SVGR.💻 Directly into your Local Workspace - our CLI tool will get all configured assets from your Figma file and save them in your source folder.What you can doYou can export to png, jpg or svg filesYou can set scale ratio for png & jpg assetsYou can export any Figma node, doesn't matter what's inside. So you can compose different elements and export it as a single asset.If you used SVGR to create React icon components from SVG files, PonyUI Assets Export will now do it for you.Eslint and prettier supported for React icon componentsPonyUI Assets Export will remember exported nodes, so you always know if a particular node is already exported in your source code and where to find it.Inside the dev workspace you can configure different default folders for different types of assets.And you can specify a custom folder for any special asset if you need it.UsageInside the pluginOpen PonyUI Assets Export Plugin inside your Figma file.Select a node you want to export in Figma and it appears in PonyUI Assets Export under the "Nodes" tab.Under "Export as" combobox select any of png, jpg, svg or react-icon-component.[Optional] It will fill File Name or Class Name text input automatically based on node's name, if you don't like the name, correct it.[Optional] If you don't want it to be in a default path, please specify any relative path in your local workspace you want it to appear.[Optional] For png & jpg assets if you want different scale than 2, set it.Repeat steps 2-6 for each node you want to export.Once done, open the "Publish" tab inside the Plugin and review changes you did.Click "Save for Export" button and go to your local workspace.In developer's local workspaceInstall npm package & initialize it:$ npm install --save-dev @ponyui/assets-export-cli $ npx pa init Import assets to your local workspace:$ npx pa import What's PonyUIPonyUI is a toolchain aimed to automate the coding of your UI. It's going to be a small workhorse that converts Design to Code and vice versa to make Design File is the real "source of truth" for project's UI. Now we focus on a tool to convert Figma to React & React Native.Our goal is to help software dev teams iterate faster and cheaper.

Plugin Details

Version2
CreatedMay 21, 2024
Last UpdatedJune 10, 2024
CategoryImport & export plugins
CreatorPonyUI
Stats109 installs, 7 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:./ui.html
  • main:./code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://api-js.mixpanel.com
    • https://assets.ponyui.com
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com
    • https://o4507078014009344.ingest.us.sentry.io
    • https://ponyui.com