|
| 1 | +# Iconify plug-in for Figma |
| 2 | + |
| 3 | +Import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 150 icon sets containing over 200,000 icons) to Figma document as vector shapes. |
| 4 | + |
| 5 | +## Pre-release |
| 6 | + |
| 7 | +This is a pre-release branch for version 3 of plug-in. |
| 8 | + |
| 9 | +It contains built files that you can use in Figma. |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +1. Clone or download this repository |
| 14 | +2. Open Figma |
| 15 | +3. In menu go to Plugins -> Development -> Manage plugins in development |
| 16 | +4. Click "+" icon to create a new plugin, select option "Import plugin from manifest" |
| 17 | +5. Select `manifest.json` from this repository. |
| 18 | + |
| 19 | +This will install plugin to your Figma app. |
| 20 | + |
| 21 | +To run it, go to Plugins -> Development, select "Iconify Dev". |
| 22 | + |
| 23 | +## Functionality |
| 24 | + |
| 25 | +This is a preview version. |
| 26 | + |
| 27 | +Functions that do not work yet: |
| 28 | +- Various pages (About, Recent icons) |
| 29 | +- Color picker (icons are imported as black for now) |
| 30 | + |
| 31 | +### New features |
| 32 | + |
| 33 | +Version 3 has been completely rewritten. It includes many new shiny features, which should all work in development preview. |
| 34 | + |
| 35 | +### New UI |
| 36 | + |
| 37 | +Plugin has completely new UI. |
| 38 | + |
| 39 | +Many Figma users have small monitors, plugin takes precious space. |
| 40 | +UI has been re-designed to fit as much information as possible in a small plugin window. |
| 41 | + |
| 42 | +### Icon sets |
| 43 | + |
| 44 | +[Iconify for Figma - icon sets](https://iconify.github.io/iconify-figma/samples/icon-sets.png) |
| 45 | + |
| 46 | +Icon sets list is shorter, but offers a lot more: |
| 47 | +- Hints when you hover icon set, showing various details, including extended license information. |
| 48 | +- Favorite and recent icon sets. You can mark any icon set as favorite to access it quicker. |
| 49 | +- Advanced filters. You can filter icon sets by category, grid, license, license details. |
| 50 | + |
| 51 | +[Iconify for Figma - icon sets filters](https://iconify.github.io/iconify-figma/samples/filters.png) |
| 52 | + |
| 53 | +### Icon set |
| 54 | + |
| 55 | +[Iconify for Figma - icon sets filters](https://iconify.github.io/iconify-figma/samples/icon-set.png) |
| 56 | + |
| 57 | +Icon set page now has: |
| 58 | +- Advanced license details: attribution, commercial use. |
| 59 | +- You can add icon set to favorite icon sets list to quickly access it. |
| 60 | +- Scrolling for icons. No more pagination (though it is available if you prefer to click pages). |
| 61 | +- You can select multiple icons. To enable multi-select, click "Select multiple icons" box. |
| 62 | + |
| 63 | +[Iconify for Figma - icon sets filters](https://iconify.github.io/iconify-figma/samples/multi-select.png) |
| 64 | + |
| 65 | +### Search |
| 66 | + |
| 67 | +[Iconify for Figma - icon sets filters](https://iconify.github.io/iconify-figma/samples/search.png) |
| 68 | + |
| 69 | +Search results feature: |
| 70 | +- Infinite scroll for icons, same as in icon set view. It is not typical slow infinite scroll, it is very fast and renders only icons that are visible. |
| 71 | +- License information for each icon. |
| 72 | + |
| 73 | +### Drag and drop |
| 74 | + |
| 75 | +Drag and drop has been redesigned. It is now more precise, dropping icon to correct layer. |
| 76 | + |
| 77 | +There are some caveats though: |
| 78 | +- Cannot drop icon to component instance: Figma plugin system limitation. Must drop it to main component. |
| 79 | +- If layer has auto-layout, icon will be imported as first item in frame, not necessary where you drop it. |
| 80 | + |
| 81 | +## Feedback |
| 82 | + |
| 83 | +Feedback is very welcome. |
| 84 | + |
| 85 | +Please open issues at this repository if: |
| 86 | +- You think this version is missing a critical feature that older version used to have. |
| 87 | +- You have a suggestion. |
| 88 | +- You found something that does not feel right, which might be a bug or bad design. |
| 89 | + |
| 90 | +## Source code |
| 91 | + |
| 92 | +Source code for this version is not available yet. |
| 93 | + |
0 commit comments