Figma: векторные значки и обложки
Курс «Макет учебного портала в Figma»
Страницы портала «Маршрут» уже содержат реальные учебные названия. Добавим к курсам небольшие векторные значки: сетку, обмен данными и развилку истории. Они помогут различать темы визуально, сохраняя текст основным источником смысла. Нам не нужны портреты, заимствованные логотипы сервисов или сложная декоративная иллюстрация.
Вектор состоит из геометрических объектов и путей. Его удобно масштабировать и перекрашивать, но аккуратность маленького значка всё равно зависит от формы, толщины линий и свободного пространства. Разберём простые операции объединения и вычитания, затем посмотрим, чем редактируемая композиция отличается от Flatten.
Общий размер и первая форма
На странице 02 Components создайте три фрейма 48 на 48 с именами Icon/Grid, Icon/API и Icon/Git. Уберите фоновую заливку. Внутри будем рисовать на условной области 32 на 32, оставляя поля 8 со всех сторон. Общая внешняя область позволяет выравнивать разные значки, хотя их силуэты неодинаковы.
Для сетки нарисуйте четыре прямоугольника 12 на 12 с промежутком 4. Вместе они занимают 28 на 28; центрируйте композицию в области. Назначьте цвет action/primary и скругление 2. Сетка узнаётся по структуре клеток, поэтому дополнительные тени и градиенты не нужны. На маленьком размере они скорее ухудшат различимость.
Объедините фигуры через Union selection. Получится boolean group с общим оформлением, внутри которой исходные фигуры остаются доступны. Если поменять положение одного прямоугольника, итоговый силуэт пересчитается. Это полезно при подборе расстояний: структура ещё редактируема, и нам не приходится рисовать все клетки снова.
В письменном авторском курсе Figma boolean operations используются для собственных геометрических фигур. Мы применяем тот же механизм к учебным темам и другим размерам. Различия Union, Subtract, Intersect и Exclude разобраны в уроке об объединении фигур.
Для SVG-значков сохраните одинаковую систему цветов. Если экспорт содержит жёсткий синий, разработчику может понадобиться заменить его на currentColor или другой договор проекта. В спецификации укажите это как желаемое поведение, не выдавая текущий файл за уже подготовленный компонент браузера. Декоративному значку можно не назначать самостоятельное текстовое имя в интерфейсе, если рядом есть полное название курса; однако окончательную семантику определяет реализация. Макет лишь объясняет, какую информацию несёт рисунок и что уже повторено текстом.
Вычитание и путь
Для API нарисуйте округлый прямоугольник 32 на 24. Поверх поместите внутренний прямоугольник 26 на 18 и примените Subtract, чтобы получить рамку. Порядок слоёв существенен: верхняя фигура вырезает область нижней. Если поменять порядок, результат изменится или исчезнет, поскольку операция описывает конкретное отношение форм.
Рядом добавьте две короткие стрелки в противоположных направлениях. Они изображают отправку и получение, но не претендуют на схему реального сетевого протокола. Подпись курса остаётся «Запросы к API»; значок только поддерживает тему. Вся полезная информация не должна сводиться к тому, способен ли посетитель угадать значение стрелок.
У Icon/Git создайте три круга и соединяющие отрезки. Центральный узел находится слева, два других — справа на разной высоте. При необходимости откройте vector edit mode и поправьте точки соединения. Перемещение точки меняет геометрию пути, а перемещение целого слоя — положение всего значка. Выделение следует проверять, чтобы случайно не сдвинуть область контейнера.
Обратите внимание на координату Y: рост значения в экранной системе перемещает точку вниз. Для точного движения можно использовать арифметику в числовом поле. Этот приём показан в письменном уроке редактирования векторных точек. В нашей композиции достаточно небольшого симметричного смещения, не копирования авторской формы.
Дуга и границы слоя
Для дополнительного декоративного акцента создайте эллипс и измените параметры дуги. Получится сектор или часть кольца. Его видимая форма может занимать только часть прежних границ эллипса, поэтому при выравнивании с текстом ориентируйтесь также на bounding box. Невидимая часть области способна создавать кажущийся лишним отступ.
Если требуется плотная граница по видимой геометрии, используйте Flatten на копии. После этого отдельные исходные фигуры и специальные параметры могут перестать быть доступны как прежде. Сохраните редактируемый образец в секции Sources, а итоговый — в Export. Подробнее это отличие показано в уроке о превращении эллипса в дугу.
| Операция | Что меняется | Что удобно сохранить |
|---|---|---|
| Union | Общий силуэт фигур | Исходные формы внутри boolean group |
| Subtract | Вырезанная область | Порядок и размеры вычитающего слоя |
| Vector edit | Геометрия выбранного пути | Понятные точки и минимальное их число |
| Flatten | Единый результирующий вектор | Отдельная редактируемая копия |
Не применяйте Flatten ко всей карточке с текстом и кнопкой ради «порядка». Такой шаг разрушит содержательную структуру компонента. Портал требует редактируемых надписей и экземпляров, а не одной векторной картинки. Flatten относится к подготовке отдельного графического элемента, когда его последствия действительно нужны.
Сохраните исходную редактируемую фигуру рядом с подготовленной иконкой до разрушительного объединения. Это позволит изменить промежутки или толщину отдельных элементов, если на размере 16 изображение оказалось слишком плотным. После экспорта назовите SVG по роли, а не по порядку создания: icon-grid понятнее, чем Vector17. Файл должен сопровождаться сведением о том, используется ли знак самостоятельно или рядом с названием курса. Сам по себе формат SVG не сообщает назначение изображения, и разработчику всё равно потребуется этот контекст.
Применение и малый размер
Превратите каждый значок в компонент. В CourseCard добавьте вложенный экземпляр и свойство для замены значка, если хотите управлять им из панели. Для первого курса используйте сетку, для второго — API, для третьего — историю. Внешняя область остаётся 48 на 48, поэтому смена силуэта не нарушает вертикальный ритм карточки.
Посмотрите на значок при масштабе, близком к предполагаемому отображению. Сильное увеличение полезно для редактирования точки, но скрывает проблему слишком тонкой линии. Не уменьшайте большой сложный рисунок до 16 пикселей с ожиданием, что все детали сохранятся. Для маленького размера можно подготовить отдельную упрощённую форму с тем же смыслом.
В архиве серии находятся собственные SVG-референсы этих идей. Они подписаны как учебная графика и не являются скриншотами Figma. Можно импортировать их для сравнения, однако самостоятельное создание фигур помогает понять операции. Наличие SVG не подтверждает выполненный экспорт из редактора или визуальную проверку вашего файла.
Ожидаемый результат — три небольших значка, которые поддерживают темы курсов и имеют одинаковую область применения. При смене значка текст и кнопка остаются согласованными. На следующем шаге перенесём готовые компоненты на мобильные экраны и проверим, какие ограничения ширины требуют изменения композиции.