Гайд по работе с иконками в Figma и их передачей в разработку

Работа в Figma

Иконки в вариантах

Об этом совсем недавно рассказывал Саша Окунев. Я тоже об этом немного расскажу, так как это часть процесса.

Некоторые дизайнеры избыточно используют фишку Figma — Variants, закидывая в них иконки. Это не удобно по ряду причин:

• если иконок много, то в списке вариантов вы можете запутаться;
• на превью компонента всегда будет одна и та же иконка, найти нужную будет сложно;
• не будет поиска по названию, компонент всегда будет один;
• при экспорте иконки, имена файлов будут соответствовать названию слоя, то есть содержать длинное свойство компонента, например так:

icon name=ArrowCircleUpLeft, size=32px.svg

Иконки отдельным компонентом

Лучше всего организовывать свою библиотеку с иконками отдельным компонентом, для более гибкого управления:

• выгружать такие иконки легче и название файла будет понятно для всех;
• легко можно найти в панели Assets, как по имени, так и по превью;
• можно писать в начало названия компонента 16px, 24px и тд, тогда размерность иконок будет разложена по виртуальным папкам.

Иконки в папках

Несколько советов по хранению иконок в проектах.

Здесь важно обратится к иерархии хранения компонентов. Figma раскладывает компоненты по папкам через Страница — Фрейм — Название компонента. Некоторые свойства иерархии можно миновать.

• Если компоненты иконок лежат на странице icons, а название иконки heart, то в панели assets компонент будет лежать в папке icons/heart;

• Если компоненты иконок лежат на странице icons, во фрейме с названием 24px, а название иконки heart, то в панели assets компонент будет лежать в папке icons/24px/heart;

• Если компоненты иконок лежат на странице icons, а вы не хотите хранить иконки в отдельных фреймах, а просто на канвасе, при этом сохранить размерную иерархию, то добавьте к названию иконки 24px/heart. Тогда в панели assets компонент будет лежать в папке icons/24px/heart.

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

• Если у вас не так много компонентов и вы хотите держать их на одной странице, но хотите сохранить иерархию компонентов, то заведите страницу components (или как вам удобно), положите в нее все компоненты и назовите иконки полным адресом иерархии icons/24px/icon-name.

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

Стиль для иконок

К сожалению, на протяжении долгого времени Figma не может поправить прыжок цвета, после того, как мы подменяем инстанс иконки. Поэтому заведите отдельный цветовой стиль.

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

Чуть дальше мы рассмотрим почему так происходит и научимся объединять слои.

Изменение размера

Предположим, что имеем иконку в размере 16px, которую мы хотим увеличить до 24px. Заливки у иконок нет, а есть линии — Stroke.

Если попробовать изменить размер инструментом move, то размер иконки увеличится, а размер обводки (stroke) — нет. Иконка стала тоньше.

В Figma есть отличный инструмент Scale, с помощью которого мы можем поменять все свойства объекта пропорционально.

В панели инструментов зажимаем Move и выбираем Scale, либо нажимаем на горячую клавишу K и тянем иконку за угол с зажатым Shift, чтобы пропорционально изменить её размеры.

Размер иконки поменялся, а вместе с ним сохранила свои пропорции и толщина обводки.

Почему иконки делают через Stroke мы узнаем дальше.

Взаимодействие дизайнер — разработчик

Во взаимодействии дизайнера и разработчика бывают сложности в силу некоторых причин:

• Дизайнеры — делают иконки разного размера, с дробными величинами, с лишними слоями.
• Разработчики — не видят слои, прокликивают в иконку мимо квадратного фрейма и выгружают совсем не то, что нужно.

Сейчас по шагам разберём, какие проблемы могут вас ждать и как их решить.

Иконки во фрейме

Самая большая ошибка, которая может повлечь за собой большие переделки — не унифицировать иконки.

Геометрия у иконок разная: квадратная, прямоугольная вертикальная, прямоугольная горизонтальная. От этого могут не правильно отображаться компоненты, в которых есть иконка, если ее подменять. А еще может поехать верстка, потому что у разных иконок — разные размеры.

Решением такой проблемы — унификация всех компонентов. Достаточно положить иконки в квадратный фрейм фиксированного размера и проблема будет решена.

Теперь внутри квадратного фрейма мы можем делать всё что угодно, добавлять иконки любого размера, даже с дробными числами. Главное, что обертка остается всегда фиксированного размера.

Stroke иконки

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

Regular иконки могут быть с толщиной линии 1-1.5px, но вам может понадобится иконки чуть жирнее или менее интенсивнее. Тогда вы с легкостью, поменяв толщину обводки, измените их вид.

Но отдавать разработчику иконки в режиме stroke — плохая идея.

Как мы помним — svg это код. Когда браузер подгрузит иконку, у которой включена обводка, он может неправильно сделать рендер и тогда наша иконка в вебе будет выглядеть плохо. Например, при смене размера иконки в коде.

А ещё у иконки может быть несколько слоёв, каждый из которых отрисовывает определенную часть иконки.

Нам необходимо преобразовать обводку в фигуру (кривые), объединить все слои в группу и слить всё в один слой.

Сделать это довольно просто:

• выбираем иконку;
• выделяем все слои в ней;
• ПКМ — Outline Stroke
  или нажимаем горячую клавишу CMD (CTRL) + Shift + O;
• В верхней панели булевых операций выбираем Union Selection или Flatten Selection.

Всё, наши слои стали фигурой и слиты в один. Это порадует разработчика потому что:

• код изображения станет меньше, а значит легче, следовательно подгрузится быстрее на странице;
• разработчик сможет их красить CSS-свойством Fill, но об этом поговорим ниже.

Выгрузка иконок разработчиком и блокировка слоёв

Теперь рассмотрим проблему со стороны фронта. Когда он заходит в наш проект с правами доступа can view, то разработчик не может гибко управлять выделением слоёв и кликает в то, что кликается первым.

Разработчик кликает в иконку и вместо квадратного фрейма выбирает как раз его внутренность — то есть иконку с рандомным размером. Квадратный фрейм он тоже может выбрать, но здесь играет роль человеческий фактор.

Разрешить такую ситуацию поможет блокировка слоя с иконкой. Когда разработчик кликнет в заблокированные слои, то выбрать он их не сможет и выберет только квадратный фрейм.

Массовая выгрузка и лайфхак для лучшего взаимодействия

На одном из проектов иконки жили как самостоятельные изображения. Чтобы каждый раз не говорить разработчикам какие иконки мы сменили, не созваниваться и не обсуждать каждую, мы сократили коммуникацию и унифицировали процесс.

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

• Заводим страницу с иконками или фрейм;
• Выбираем иконки;
• В правой панели нажимаем плюс, рядом с настройкой Export;
• Настраиваем нужный формат, в данном случае SVG.

А дальше нам нужно зайти в Меню — File — Export. В открывшемся окне видим все изображения, которые можно выгрузить. Оставляем все или выбираем необходимые и сохраняем.

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

Такой подход хорош в двух случаях:

• если вы добавили новые иконки, то при выгрузке всех иконок разработчик увидит в репозитории новые файлы (если подключен Git, а скорее всего он подключен);
• если вы перерисовали и заменили иконки, то при выгрузке они просто перезапишутся и отобразятся новые (при чем изменения разработчик увидит так же через Git).

Виды иконок в вебе

Бонусный блок для общего понимания, как работают иконки.

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

Самостоятельные изображения

Самостоятельные изображения, это когда каждая иконка хранится отдельным файлом. Ее можно добавить как в html-разметку, так добавить с помощью CSS-свойства background-image.

Так как мы говорим об svg, то такие иконки можно красить через свойство fill прямо в коде, а еще изменять размер.

Поэтому, если в вашем проекте хранятся несколько иконочных библиотек с разными размерами (например 16, 24 и 32px), то для кода будет достаточно одной. Все остальное можно настроить через CSS.

Но такой способ не очень удобен, если в библиотеке большое количество иконок.

Такой фокус не прокатывает с png изображениями.

Спрайты иконок

Спрайт — одно изображение с сеткой иконок, которые отображаются на странице с помощью позиционирования и ID. Так же поддаются покраске, изменению фона и размера.

Большой отличительной чертой от самостоятельного изображения является скорость загрузки. В первом случае — каждая иконка загружается отдельно. В случае плохого интернета часть иконок может подгрузиться, а часть подвиснуть.

Спрайты работают как с svg, так и png. Отличаются только разными подходами. Сгенерировать svg-спрайт можно на сайте svgsprit.es

Забрасываем иконки и получаем спрайт:

<svg width="0" height="0" class="hidden">
        <symbol version="1.1" id="FigmaLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 32 32">
            <path d="M23.3,11.7c0.2-0.2,0.5-0.3,0.7-0.5c1-1,1.5-2.3,1.5-3.7S24.9,4.8,24,3.8c-1-1-2.3-1.5-3.7-1.5H16h-4.2
            C10.4,2.2,9,2.8,8,3.8c-1,1-1.5,2.3-1.5,3.7s0.6,2.7,1.5,3.7c0.2,0.2,0.4,0.4,0.7,0.5c-0.2,0.2-0.5,0.3-0.7,0.5
            c-1,1-1.5,2.3-1.5,3.7s0.6,2.7,1.5,3.7c0.2,0.2,0.4,0.4,0.7,0.5c-0.8,0.6-1.4,1.3-1.8,2.2c-0.4,1-0.5,2-0.3,3c0.2,1,0.7,2,1.4,2.7
            c0.7,0.7,1.7,1.2,2.7,1.4c1,0.2,2.1,0.1,3-0.3c1-0.4,1.8-1.1,2.4-1.9c0.6-0.9,0.9-1.9,0.9-2.9v-4.2v-0.2c0.9,0.7,2,1.2,3.2,1.2
            c2.9,0,5.2-2.4,5.2-5.2C25.5,14.2,24.6,12.7,23.3,11.7z M22.5,5.2c0.6,0.6,1,1.4,1,2.3s-0.3,1.7-1,2.3s-1.4,1-2.3,1H17V4.2h3.2
            C21.1,4.2,21.9,4.6,22.5,5.2z M9.5,9.8c-0.6-0.6-1-1.4-1-2.3s0.3-1.7,1-2.3s1.4-1,2.3-1H15v6.5h-3.2C10.9,10.8,10.1,10.4,9.5,9.8z
            M9.5,13.7c0.6-0.6,1.4-1,2.3-1H15v6.5h-3.2c-0.9,0-1.7-0.3-2.3-1s-1-1.4-1-2.3S8.8,14.3,9.5,13.7z M15,24.5c0,0.6-0.2,1.3-0.5,1.8
            c-0.4,0.5-0.9,1-1.5,1.2c-0.6,0.2-1.2,0.3-1.9,0.2c-0.6-0.1-1.2-0.4-1.7-0.9c-0.5-0.5-0.8-1-0.9-1.7c-0.1-0.6-0.1-1.3,0.2-1.9
            c0.2-0.6,0.7-1.1,1.2-1.5c0.5-0.4,1.2-0.5,1.8-0.5H15V24.5z M20.2,19.2c-1.8,0-3.2-1.5-3.2-3.2c0-1.8,1.5-3.2,3.2-3.2
            s3.2,1.5,3.2,3.2C23.5,17.8,22,19.2,20.2,19.2z"></path>
        </symbol>
        <symbol version="1.1" id="TelegramLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 32 32">
            <path d="M29.5,4.9c-0.1-0.3-0.3-0.7-0.6-0.9c-0.1-0.1-0.2-0.2-0.4-0.2c0,0,0,0,0,0c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4-0.1-0.7,0-1.1,0.1
            L3.8,12.7c-0.8,0.3-1.3,1.1-1.3,2c0.1,0.9,0.7,1.6,1.6,1.8l5.9,1.2V25c0,0.4,0.1,0.8,0.3,1.1c0.2,0.3,0.5,0.6,0.9,0.7
            c0.2,0.1,0.5,0.1,0.8,0.1c0.1,0,0.3,0,0.4,0c0.4-0.1,0.7-0.3,1-0.6l3.2-3.2l4.9,4.3c0.3,0.2,0.6,0.4,0.9,0.5c0.1,0,0.3,0,0.4,0
            c0.2,0,0.4,0,0.6-0.1c0.3-0.1,0.6-0.3,0.9-0.6c0.2-0.3,0.4-0.6,0.5-0.9l4.7-20.5C29.6,5.6,29.6,5.2,29.5,4.9z M22,7.7l-11.3,8.1
            l-6.2-1.3L22,7.7z M12,25v-5.9l3.2,2.8L12,25z M22.9,26l-10.3-9.1L27.4,6.2L22.9,26z"></path>
        </symbol>
    </svg>

А дальше пользуемся короткими вставками кода привязываясь к ID-иконки:

<svg class="icon">
   <use xlink:href="#FigmaLogo"></use>
</svg>

Мы так же можем менять размер svg-иконки, заливку и обводку:

Иконочный шрифт

Когда вы читаете текст — вы видите буквы, которые подгружаются из файла шрифта. Технически, буквы это такой же вектор как и иконки.

Существуют сервисы, которые генерируют шрифты на основе ваших иконок. Буква на клавиатуре или так называемый юникод, соответствует иконке в шрифте. Вы получаете файлы в формате веб-шрифтов: TTF, EOT, WOFF и SVG.

Иконки подключаются как обычный шрифт и управляются в вебе как текст, с помощью свойств color и font-size.

Минусом такого подхода является слабый интернет. В момент загрузки страницы вместо иконок вы можете наблюдать буквы «a, b, c…», пока шрифт с иконками не подгрузится и не отобразится.

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

Создать иконочный шрифт можно с помощью сервиса fontastic.me. Не буду подробно останавливаться на этом моменте, сервис имеет человеко-понятный интерфейс:

• создаем шрифт;
• называем его на латинице как необходимо;
• добавляем иконки
• настраиваем;
• скачиваем и подключаем к проекту.

Вы получаете готовый код, который остается просто подключить к проекту и начать использовать. Сервис генерирует демо с иконками и их отношением к шрифту.

После того как всё подключили, можно добавлять иконки на страницу через тег <i>, <span>, <div> или подключать в CSS через background-image.

Заключение

Я постарался максимально вложить в эту статью все свои знания по процессу работы с иконками в инструменте и их дальнейшей передачей.

Такие подходы позволяют мне сократить время общения с разработкой и улучшить процесс взаимодействия.

Способы не исчерпывающие и наверняка, у вас найдется еще 1000 и 1 способ, как улучшить взаимодействие при передаче иконок.