/ iconify-figma

Импортируйте значки Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji и многие другие значки (более 60 наборов значков, содержащих более 50 000 значков) в документ Figma в виде векторных фигур.

Что такое Iconify?

Iconify — это новая унифицированная структура значков. Он разработан для замены устаревших глифовых шрифтов современным фреймворком JavaScript SVG и предлагает огромный выбор иконок. В отличие от шрифтов, Iconify загружает только значки, используемые на страницах, поэтому вы можете использовать значки из FontAwesome, Material Design Icons, Firefox Emoji и других на веб-странице без загрузки множества шрифтов. Это быстро и очень просто в использовании.

Подробнее см. Https://iconify.design/.

В дополнение к скрипту фреймворка SVG, Iconify доступен как Компонент React, компонент Angular и скоро будет доступен как компонент Vue.

См. Https://github.com/iconify/iconify-react и https://github.com/iconify/iconify- angular

Что может делать плагин Figma?

Плагин Figma предлагает простой способ импортировать значки в проект .

Вы можете просматривать и искать наборы значков прямо из Figma. Не нужно копировать/вставлять значки — плагин будет импортировать выбранные вами значки.

В будущем плагин Figma сможет публиковать значки прямо в Iconify, поэтому потребуется всего 1 простой шаг от создания значка до его использования на веб-сайте. Однако это долгосрочная цель, требующая серьезной доработки, поэтому, надеюсь, она будет реализована к концу 2019 года.

Установка

В Figma на панели инструментов выберите «Плагины», «Просмотреть все плагины», найдите «Iconify». Нажмите «Установить».

Использование

В Figma выберите главное меню -> Плагины -> Iconify

Просмотрите или найдите значки, выберите любой значок, нажмите кнопку «Импорт» или перетащите значок в документ Figma. Плагин импортирует значок в ваш текущий проект.

Снимки экрана

Список коллекций:

Поиск значков:

Просмотр значков Material Design:

Просмотр IonIcon в компактном режиме:

Перетащите:

Недавние значки:

Вставить SVG:

Перетащите и drop

Из-за ограничений системы плагинов Figma перетаскивание является приблизительным. Figma не поддерживает перетаскивание из пользовательского интерфейса плагина, поэтому плагин приблизительно определяет местоположение перетаскивания на основе событий мыши, что неточно.

Из-за этого значок может быть сброшен на несколько пикселей от цели. Чтобы максимизировать вероятность того, что значок переместится в нужное место, увеличьте масштаб до нужного кадра или используйте кнопку «Импорт» вместо перетаскивания.

Вставьте SVG

Функция Paste SVG может извлекать SVG из URI данных (вы можете сохранить часть «url»), например

  url ("data: image/svg  + xml,% 3Csvg fill = 'none' height = '128' viewBox = '0 0 32 128' width = '32 'xmlns =' http://www.w3.org/2000/svg'%3E%3Cg clip  -rule = 'evenodd' fill-rule = 'evenodd'% 3E% 3Cpath d = 'm12 12v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z'  fill = '% 23000' fill-opacity = '. 8'/% 3E% 3Cpath d = 'm12 44v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-  3z 'fill ='% 23000 'fill-opacity ='. 3 '/% 3E% 3Cpath d =' m12 76v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-  3-3z 'fill ='% 2318a0fb '/% 3E% 3Cpath d =' m12 108v8h8v-1h-3c0-2.209-1.7909-4-4-4v-3zm1 4v3h3c0-1.657-1.3431-3-3-3z 'fill =  '% 23fff'/% 3E% 3C/g% 3E% 3C/svg% 3E ")  

упрощая вставку фоновых изображений из браузера ‘ s инструменты разработчика.

Чтобы установить плагин Figma из репозитория, вам необходимо его собрать.

Первый плагин сборки с использованием npm run build , затем откройте Figma, в меню выберите Plugins -> Development -> New Plugin. Нажмите «Связать существующий плагин», перейдите к manifest.json

Режимы сборки:

  • npm run build — строить производственный код. Вывод сохраняется в «dist».
  • npm run dev — код разработки сборки. Вывод сохраняется в «dist». Измените отладочные данные в ui/plugin-ui.js (см. Условные операторы, которые проверяют process.env.SEARCH_DEV).
  • npm run watch — то же, что и «dev «, но также следит за изменениями файлов и автоматически перестраивает файлы.
  • npm run start — отладка пользовательского интерфейса без Figma. Создает веб-сервер на http://localhost: 8080/и показывает интерфейс. Измените конфигурацию пользовательского интерфейса в ui/dev-ui.js
  • npm run test — проверьте ядро ​​Icon Finder.

Чтобы создать собственную сборку, вам необходимо изменить хэш и имя плагина в manifest.json. Этого достаточно, чтобы Figma рассматривала плагин как отдельный плагин, поэтому он не будет делиться конфигурацией с плагином Iconify.

Этот плагин может быть ограничен одной коллекцией, упрощая создание настраиваемых плагинов для коллекций. Чтобы установить коллекцию, добавьте параметр «префикс» в ui/plugin-ui.js и ui/dev-ui.js. Код уже есть, вам нужно только раскомментировать его и установить правильные значения.

Вы можете отключить любые разделы меню, которые вам не нужны, в ui/src/components/header /navigation.jsx . Просто закомментируйте то, что вам не нужно. В меню «О программе/GitHub» храните информацию о проекте Iconify и его авторе. Вы также можете добавить информацию о своем наборе значков.

Iconify Icon Finder имеет двойную лицензию под лицензией Apache 2.0 и GPL 2.0. Вы можете выбрать по своему усмотрению одну из перечисленных выше лицензий.

Идентификатор лицензии SPDX: Apache-2.0 ИЛИ GPL-2.0

Плагин Iconify для Figma основан на Iconify Icon Finder и имеет ту же лицензию, что и Icon Finder.

© 2019-2020 Вячеслав Трушкин



Как использовать значки в Figma

Простое руководство и два бесплатных набора значков пользовательского интерфейса в файле .fig

Иева Андрюлевичуте
Подписаться
6 сентября 2019 г. · 7 мин чтения

Изображение для  post

Популярность Figma в прошлом году резко возросла. Мы в Iconfinder тоже одни из поклонников. Нам нравится использовать Figma для создания каркасов, представления пользовательских потоков и создания простых руководств по стилю.

В этом посте мы рассмотрим основные инструкции по работе с иконками в Figma. Используйте приведенное ниже содержание, если вы хотите перейти непосредственно в определенный раздел.

  • Допустимые форматы файлов
  • Импорт файлов значков в Figma
  • Изменение размера значка в Figma
  • Изменение цвета значка в Figma
  • Изменение ширины штриха
  • Сохранение значки согласованы с вашим дизайном (с помощью компонентов).
  • Экспорт из Figma
  • FREEBIE — два бесплатных пакета значков пользовательского интерфейса в файле Figma

Figma позволяет импортировать довольно широкий спектр форматов файлов изображений: PNG, JPG, GIF, SVG, SKETCH, и FIGMA .

Когда дело доходит до значков, мы всегда рекомендуем использовать SVG для плавного масштабирования. Если у вас есть набор значков, довольно часто он будет представлен в формате .sketch или .figma, и оба они будут работать точно так же.

Есть несколько способов получить в Figma, и они в первую очередь зависят от типа файла, с которым вы имеете дело.

Два места, где может происходить импорт в Figma, — это окно File Browser (там вы видите список всех ваших Документы Figma) и ваш холст (это открытый документ Figma).

Если вы импортируете значок SVG или PNG, перетащите его прямо на холст.

 Изображение для сообщения

Изображение для сообщения

Если вы хотите избавиться от рамки, вы можете изменить ее в группу на панели свойств справа.

 Изображение для сообщения

Изображение для публикации

Вы можете изменить размер своего векторного значка, удерживая кнопку Shift и перетащите один из ее углов. Если вам нужна точность в пикселях, отрегулируйте размер на панели свойств справа. Не забудьте щелкнуть значок «Сохранить пропорции» перед изменением ширины или высоты.

Изображение для сообщения

Два способа изменения размера значка

Как почти все в Figma, изменение цвет значка довольно прост. Убедитесь, что вы импортируете значок в формате SVG. На панели «Слои» слева щелкните элемент, который нужно перекрасить, и измените цвет в разделе «Заливка» на панели свойств. Вы можете установить значение цвета в HEX, RGB, CSS, HSL и HSB.

Изображение для сообщения

Если вы работаете со значками контура, вам может потребоваться отрегулировать ширину обводки. Особенно, если вы имеете дело с иконками из разных наборов. Это можно сделать в разделе «Обводка» на панели свойств. Начните с изменения выравнивания обводки на «Центр» и введите желаемую ширину линии.

 Изображение для сообщения

Изображение для сообщения

Теперь вы заметите, что слои, представляющие значок, стали фиолетовыми. Это признак того, что этот значок теперь является повторно используемым компонентом. Этот элемент будет называться главным компонентом.

Чтобы повторно использовать компонент, вы должны создать его экземпляры. Экземпляры — это дубликаты, которые будут получать изменения стиля, внесенные в главный компонент. Есть несколько способов добиться этого, но, пожалуй, самый простой — удерживая клавишу «Alt» и перетаскивая экземпляр из компонента. Вы также можете скопировать и вставить его, используя сочетания клавиш «CMD + C» и «CMD + V» («Ctrl + C»//«Ctrl + V» для Windows).

 Изображение для сообщения

 Изображение для сообщения

Изображение для сообщения

Изменение цвета главного компонента также обновит все экземпляры этого значка.

Весь Twitter Экземпляры значков были плавно обновлены путем простого изменения цвета в главном компоненте.

Вероятно, вы захотите использовать несколько вариантов одного и того же значка в своем дизайне. Если вы измените характеристики экземпляра , я t переопределит. Это означает, что только этот экземпляр получит новые характеристики.

Изображение для  post

Изменение цвета компонента экземпляра приведет только к влияет на этот конкретный экземпляр значка.

Если вы хотите сбросить изменения переопределения, примененные к экземпляру, выберите его и щелкните значок «Сбросить экземпляр» на верхней панели инструментов.

Изображение для сообщения

Нажмите« Сбросить экземпляр », чтобы восстановить характеристики главного компонента.

Вы также можете отсоедините экземпляр значка, если вы не хотите, чтобы он получал изменения, которые вы вносите в главный компонент nt. Это можно сделать на панели свойств.

 Изображение для сообщения

 Изображение для сообщения

Изображение для сообщения

Вы можете экспортировать отдельные элементы в файл или полную графику. Если вы экспортируете несколько элементов, они будут объединены в файл .zip.

Изображение для сообщения

Экспорт PNG вашего дизайна в двойном размере исходного.

Есть дополнительные настройки экспорта его можно найти, щелкнув значок с тремя точками в разделе «Экспорт». Например, если вы экспортируете SVG, вы можете включить атрибут «id», текст контура или упростить обводку. Вы можете найти более подробное описание параметров экспорта в этой статье от команды Figma.

Если вы хотите сохранить свой документ как файл Figma, щелкните значок меню гамбургера в левом верхнем углу угол и выберите Файл → Сохранить как .fig.

Изображение для публикации

В качестве небольшого бонуса мы создали файл Figma с бесплатными значками пользовательского интерфейса, с которыми вы можете практиковаться 🙌

Вы можете скачать его здесь : bit.ly/figmafreebieuiicons .

Надеемся, вы узнали что-то полезное об использовании значков в Figma. Если у вас есть какие-либо вопросы, не стесняйтесь задавать нам их в разделе комментариев.

Наборы значков, которые мы использовали в наших примерах:

  • Brickspeed by Juraj Sedlák
  • Схема карты от Sur JJ
  • Логотипы социальных сетей 2018 от Антона Д.
Оцените статью
logicle.ru
Добавить комментарий