Figma Assets Portal
A magical Figma portal that can transport assets directly into your VS Code.
🚀 What's new?
💡 You can now export assets directly through the VS Code Command Palette. Just press CTRL + SHIFT + P, search for Import Figma Asset and follow the steps to export your assets.
Features
- Ability to use all the default Figma export features.
- Flexible assets filtering options.
- Ability to export all the assets within a Figma container, either a frame or group.
- Ability to easily export assets with a naming convention using regex.
- Preserved configuration.
- Ability to specify the export path; if the folder doesn't exist, it will be automatic
- Export assets via the Command Palette
Usage
- Generate a Figma API access token and make sure to give it file read permission.
- The extension icon will appear in the sidebar; click on it and insert your token.
- After you are authenticated, you need to insert the Figma file ID, which you can find in the URL after '/design/'. For example,
/design/<fileId>/.
- Specify the name of the Figma page that contains your assets.
- Set the export path to where you'd like your assets to be exported.
- There will be a checkbox to toggle between two options:
- Container Export: You can specify the name of the container that holds your assets, which will filter all the assets for export.
- Regex Search: This feature gives you the ability to filter assets throughout the whole page. Using regex, you can get assets that follow a certain naming convention.
- Click on the search button to fetch the assets.
- You can now select the assets that you want to export or export all.
- Finally, click on the export button to export the selected assets.
Installation
First install in the root directory
npm install
Then, moving to the react directory, install the packages
cd web
npm install
Then run the script with, npm start or you can build with npm run build.
npm start
Development
Now you can start developing by pressing Ctrl + F5 or through the commands palette by usingCtrl + Shift + P shortcut and chosing Start Debugging.
Tip: You don't have to restart the project to see new changes, you can do so just by closing the webview tab and reopen it.
Changelog
Check the CHANGELOG.md for any version changes.
Reporting issues
Report any issues on the github issues page. Follow the template and add as much information as possible.
Contributing
The source code for this extension is hosted on GitHub. Contributions, pull requests, suggestions, and bug reports are greatly appreciated.
- Post any issues and suggestions to the github issues page. Add the
feature request tag to any feature requests or suggestions.
- To contribute, fork the project and then create a pull request back to master. Please update the README if you make any noticeable feature changes.
- There is no official contribution guide or code of conduct yet, but please follow the standard open source norms.
License
This project is licensed under the MIT License - see the LICENSE file for details
