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

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 do

• You can export to png, jpg or svg files
• You can set scale ratio for png & jpg assets
• You 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 components
• PonyUI 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.

Usage

Inside the plugin

• Open 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 workspace

Install 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 PonyUI

PonyUI 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.