Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nil/figma-dynamic-icon-export
Export icons in a dynamic way
https://github.com/nil/figma-dynamic-icon-export
export figma figma-export figma-plugin figma-plugins icons workflow
Last synced: about 1 month ago
JSON representation
Export icons in a dynamic way
- Host: GitHub
- URL: https://github.com/nil/figma-dynamic-icon-export
- Owner: nil
- License: mit
- Created: 2020-04-05T15:28:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-20T08:24:51.000Z (about 4 years ago)
- Last Synced: 2024-11-11T01:47:57.620Z (3 months ago)
- Topics: export, figma, figma-export, figma-plugin, figma-plugins, icons, workflow
- Language: TypeScript
- Size: 327 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Dynamic Icon Export](https://www.figma.com/community/plugin/833685193586385445)
[](https://github.com/nil/figma-dynamic-icon-export)
[](https://david-dm.org/nil/figma-dynamic-icon-export)
[](https://david-dm.org/nil/figma-dynamic-icon-export?type=dev)
[](http://https://github.com/nil/figma-dynamic-icon-export/blob/master/LICENSE)
A Figma plugin to export multiple frames as an SVG with a single path. No need to manually clone the frame, detach the instances, outline the vectors and flatten them, Dynamic Icon Export does this for you without modifying the original frame, so you can still edit the icon in the future.
[Install on Figma](https://www.figma.com/community/plugin/833685193586385445)
## How does it work
This plugin automatizes a very common and tedious task. It exports all the icons in a page and keeps the original frame editable, with all the layers untouched.
Under the hood, this plugin clones every frame that starts with a specific character, by default `$` but can be changed by the user. Then it outlines and flattens all its contents, so when exporting the SVG it only contains one path. Finally, it resizes the frame according to the size set by the user and it generates a .zip file containing all the icons.
## Features roadmap
- [x] Export the same icon on multiple sizes
- [x] Export components too
- [ ] Add option to not automatically export icons
- [ ] Add option to not have the size explicitly in the icon name
- [ ] Create components containing the resulting SVG code
- [ ] Optimize the icon with SVGO before exporting
- [ ] Hide some layers when exporting
- [ ] Show list of exported icons on the UI
- [ ] Export only a few of the icons
- [ ] Only have size folder when there are multiple sizes
- [ ] Add a more user-friendly to use the plugin
## Local development
Dynamic Icon Export is wrote using the [Figma Plugin API](https://www.figma.com/plugin-docs/intro/) with [TypeScript](https://www.figma.com/plugin-docs/typescript/), as recommended by them. The UI is build with [React](https://reactjs.org/) to create an interactive and reactive interface and it also uses [PostCSS](https://postcss.org/), as I personally like to write CSS with nested selectors.
To begin local development of the plugin, first clone the repository:
```sh
git clone https://github.com/nil/figma-dynamic-icon-export
cd figma-dynamic-icon-export
```
Then install all the dependencies and run Webpack:
```sh
npm install
npm run serve
```
Finally, install the plugin locally:
1. Open the desktop app and go to `Plugins`.
2. Click on the `+` next to `Development` on the right sidebar.
3. Choose the `manifest.json` inside the figma-dynamic-icon-export you have just cloned.
4. Run the plugin by going to `Menu > Plugins > Development > Dynamic Icon Export`.
## License
Copyright © 2020 Nil Vila. Released under the [MIT License](http://https://github.com/nil/figma-dynamic-icon-export/blob/master/LICENSE).