Яркий свет! Яркий свет!
Мы старались держать их подальше от солнечного света, никогда не давали им воды и не кормили после полуночи. Тем не менее, каким-то образом количество значков в Font Awesome продолжает увеличиваться с появлением новых стилей и категорий.
С этими изменениями в стиле Гремлина управление нашим рабочим процессом проектирования и библиотекой ресурсов стало более громоздким, в то время как инструменты, которые мы традиционно использовали для создания значков, отстают.
Чтобы упростить наш процесс, мы недавно перешли на Figma для разработки и управления нашими иконками и хотели поделиться десятью причинами, почему.
Содержание статьи
- 1 Поиск подходящего программного обеспечения для проектирования, отвечающего нашим потребностям
- 1.1 1. Логические операции создают сложные формы, оставаясь при этом редактируемыми.
- 1.2 2. Векторные пути могут иметь независимые торцевые заглушки и угловые соединения.
- 1.3 3. Рамы могут быть стилизованы и складываются.
- 1.4 4. Компоненты упрощают повторное использование элементов дизайна.
- 1.5 5. Варианты создают альтернативные версии компонентов.
- 1.6 6. Привязка к сетке делает меня лучшим дизайнером иконок.
- 1.7 7. Величину подталкивания можно изменить.
- 1.8 8. Векторные сети — новый черный.
- 1.9 9. Плагины добавляют новую функциональность в Figma.
- 1.10 10. Комментирование упрощает обратную связь.
Поиск подходящего программного обеспечения для проектирования, отвечающего нашим потребностям
Команда дизайнеров здесь, в Font Awesome, начала использовать Figma пару лет назад для создания визуальных ресурсов и дизайна макетов и прототипов. Нас привлекла простота использования и возможности совместной работы.
Дизайн нашего сайта новой версии 6 был создан и повторен в Figma, и мы даже создали простой компонент иконок, который упростил интеграцию иконок.
И поскольку мы тратили все больше и больше времени на проектирование в Figma, я начал задаваться вопросом, можем ли мы перенести в программу всю нашу дизайнерскую работу, включая значки. Интерфейс Figma является одновременно интуитивно понятным и мощным, а его ориентация на совместную работу сделала работу с полностью удаленной командой дизайнеров несложной.
После подробного разговора с некоторыми удивительными и талантливыми дизайнерами иконок, которые превозносили достоинства Figma, я потратил время на тестирование Figma и начал взвешивать все за и против в отношении дизайна иконок. Настал момент, когда я понял, что мы можем оставить значки полностью редактируемыми, но при этом экспортировать простые и удобные SVG-файлы. Вдобавок ко всему, встроенные инструменты Figma кажутся почти настраиваемыми для создания значков.
По этим и перечисленным ниже причинам мы решили полностью перейти на использование Figma для создания значков в Font Awesome.
1. Логические операции создают сложные формы, оставаясь при этом редактируемыми.
Большинство инструментов для редактирования векторных изображений включают в себя некоторые вариации этого общего набора инструментов (в Illustrator вы можете найти их на панели «Обработка контуров»), и все их функции очень похожи. Возьмите несколько элементов и объедините их, вычтите их, пересеките и т. Д. Проще говоря, это способ взять несколько элементов и объединить их в один.
В отличие от других программ, когда вы применяете логическую операцию к набору фигур в Figma, она не разрушает. Комбинированные выделения становятся логической группой, которая рассматривается как составная фигура (и может быть экспортирована как таковая), оставаясь при этом полностью редактируемой.
Не только это, но вы можете комбинировать как формы, так и контуры с обводкой в логической группе и при этом экспортировать один слой формы. Одна только эта функция стоит стоимости входного билета. Это позволяет вам извлечь выгоду из обведенного штриха без, кхм, необходимости обводки штриха.
2. Векторные пути могут иметь независимые торцевые заглушки и угловые соединения.
Еще одна особенность Figma — ее способность назначать уникальные конечные точки и углы векторным путям. При создании значка эти параметры дают вам большую свободу действий по отношению к отдельным элементам, позволяя смешивать свойства обводки n-match.
Одна конечная точка пути может иметь закругленную границу, в то время как другой конец имеет квадратную форму или вообще не закруглен. Один угол может быть острым, а другой скошенным. Это как собаки и кошки, живущие вместе. Но вместо массовой истерии — совершенная гармония.
3. Рамы могут быть стилизованы и складываются.
В Figma фреймы — это, по сути, мощные группы. Они во многом похожи на более традиционный «артборд», но в Figma вы можете вкладывать кадры в другие кадры. Когда дело доходит до дизайна иконок, это полезно для организации и презентации.
Фреймы в Figma также имеют дополнительное преимущество в виде стилизации. Добавляйте обводки, заливки и закругленные углы к кадрам.
4. Компоненты упрощают повторное использование элементов дизайна.
Компоненты — это многократно используемые элементы дизайна, которые можно использовать в файлах и проектах. Внесите изменения в основной компонент, и эти изменения отразятся на всех экземплярах указанного компонента.
Что делает компоненты мощными в дизайне иконок, так это то, что компонент логической группы по-прежнему действует как единый слой-фигура. Таким образом, вы можете комбинировать компоненты с другими элементами с помощью логических операций, что особенно полезно при создании разных, но похожих версий значка.
5. Варианты создают альтернативные версии компонентов.
Варианты компонентов — это относительно новая функция Figma, которая позволяет группировать похожие компоненты. В Font Awesome мы начали использовать варианты компонентов для определения многоразовых изменяемых элементов для наших значков.
Например, модификатор значка, который мы часто используем, представляет собой маленький кружок с плюсом. Нам нужно использовать этот модификатор с несколькими значками и в разных стилях. Вариант компонента означает, что мы можем хранить эти варианты вместе в одном месте. И если нам когда-нибудь понадобится обновить компонент, изменения отражаются на всех значках.
6. Привязка к сетке делает меня лучшим дизайнером иконок.
Как дизайнер иконок, мой лучший друг — это пиксельная сетка. (Без обид, кривые Безье. Мы все еще ПОЛНОСТЬЮ друзья.) В программах для дизайна решающее значение имеет возможность «привязки к сетке». Это помогает обеспечить последовательность и применяет полезные ограничения, повышающие творческий потенциал.
При рисовании объекта или линии его конечные точки будут плавно привязаны к координатам сетки, чтобы элементы оставались идеальными по пикселям.
Способ, которым Figma обрабатывает привязку к сетке, является одним из лучших, которые мы когда-либо видели. Большинство программ привязываются только к точкам сетки с шагом в 1 пиксель. По умолчанию Figma привязывается к шагу ½ пикселя, что является YUGE. Это позволяет вам быть более осознанным при размещении объектов.
Figma предполагает, что вы хотите, чтобы все соответствовало сетке, и это предположение оправдывает себя.
7. Величину подталкивания можно изменить.
Когда вы выбрали объект или точку и нажмете одну из клавиш со стрелками, величина смещения — это то, насколько далеко будет перемещаться выбранный элемент. По умолчанию величина смещения составляет 1 пиксель (с «большим» смещением — Shift + клавиша со стрелкой — установлено значение 10 пикселей).
У меня значение смещения по умолчанию установлено на ¼ пикселя, а для большого смещения (Shift + клавиша со стрелкой) установлено значение 1 пиксель, что очень полезно при разработке крошечных значков.
8. Векторные сети — новый черный.
Далее следует прямая вырезка и вставка из документации Figma, потому что они объясняют это лучше, чем я когда-либо мог:
Векторные сети — одна из самых уникальных особенностей Figma. Большинство инструментов «Перо» рисуют контуры в виде цикла с определенным направлением, всегда желая повторно соединиться с их исходной точкой. Векторные сети не имеют направления и могут разветвляться в разных направлениях, не требуя создания отдельного объекта пути. Сложные объекты затем могут быть созданы внутри одного объекта и с одинаковыми свойствами намного быстрее, чем их можно было бы нарисовать с помощью традиционных инструментов векторной траектории.
9. Плагины добавляют новую функциональность в Figma.
Если функция недоступна в Figma или у вас есть уникальный вариант использования, скорее всего, существует плагин, который поможет вам в рабочем процессе. А если нет, вы всегда можете построить его самостоятельно.
Вот некоторые из плагинов, которые мы использовали в последнее время (и которые помогли с нашим первоначальным переключением):
10. Комментирование упрощает обратную связь.
Возможность оставлять комментарии прямо в файле дизайна значительно сэкономила время для нашей команды и помогла избавиться от магического мира дизайна иконок.
До Figma я трудился в темноте, придумывая новые иконки, используя глаз тритона и палец лягушки, шерсть летучей мыши и язык собаки, и иногда публиковал скриншоты незавершенной работы над дизайном иконок. Теперь, когда я прошу обратную связь, комментарии (и ответы на них) можно делать там же, где идет работа.
Я твердо убежден, что дело не в инструментах, которые вы используете для создания. Все, что работает для вас, работает и для вас. Но после переноса дизайна иконок в Figma работа, безусловно, стала намного веселее.
Вы используете Figma для дизайнерских работ? Какие функции вам нравятся больше всего? Дайте нам знать в Твиттере!
А пока ознакомьтесь с нашим официальным компонентом значков, который использует OTF-файлы и лигатуры Font Awesome Pro, чтобы упростить и упростить добавление значков (и замену стилей).
Ознакомьтесь с компонентом
Загрузка...
