В очередной части по основам Figma (уже четвертая по счету) учимся выравнивать объекты и распределять их по пространству. Изучаем новые примитивы: эллипс, полигон, звезду. Они не так просты, как кажутся на первый взгляд.

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

Выравнивание одного объекта относительно другого

Выравнивание можно производить и вручную, но чтобы повысить скорость работы Figma предоставляет специальные инструменты. Чтобы выровнять объекты нужно:

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

  • На правой панели кликнуть по одному из типов выравнивания. Они находятся сверху панели свойств сразу под вкладкой Design. Рассмотрим каждый вид выравнивания и горячие клавиши:

    • Align Left – выровнять по левому краю большего объекта. Option + A в macOs. Alt + A в Windows;
    • Align Horizontal Centers – выровнять горизонтально по центру большего объекта. Option + H в macOs. Alt + H в Windows;
    • Align Right – выровнять по правому краю большего объекта. Option + D в macOs. Alt + D в Windows;
    • Align Top – выровнять по верхнему краю большего объекта. Option + W в macOs. Alt + W в Windows;
    • Align Vertical Centers – выровнять по верхнему краю большего объекта. Option + W в macOs. Alt + W в Windows;
    • Align Bottom – выровнять по нижнему краю большего объекта. Option + S в macOs. Alt + S в Windows.
  • Обратите внимание, что горячие клавиши для выравнивания по сторонам выставлены в таком же порядке, как и кнопки-стрелочки. Еще одна аналогия для геймеров – горячие клавиши выравнивания аналогичны перемещению в Counter-Strike (AWSD).
  • Сразу после клика объекты будут мгновенно переставлены в новое место, координаты изменятся. Вы можете продолжать кликать по другим типам выравнивания, наблюдая как изменяется положение.

Выравнивание нескольких объектов относительно другого

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


Обратите внимание, что объекты, которые выравниваются, изменяют свое положение один относительно другого (так как они разного размера). Чтобы избежать этого, достаточно предварительно сгруппировать объекты, что показано в следующем разделе.

Выравнивание группы объектов относительно другого с сохранением позиции

Звучит противоречиво, но после просмотра инструкции ниже все станет на свои места.


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

Выравнивание обособленных объектов

Если выделенные объекты расположены обособленно (без большого объекта, который перекрывает по размерам остальные, как в предыдущих примерах), то выравнивание будет происходить относительно границ всех выделенных объектов. На практике это выглядит так (после каждого выравнивания применяется отмена последнего действия Cmd + Z):


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

Выравнивание одного объекта внутри фрейма

Если выделить лишь один объект внутри фрейма, то он будет выравниваться по границам последнего:


Как видите, в зависимости от контекста инструмент выравнивания работает по-разному. Убедитесь в том, что вы понимаете, как будут выровнены объекты в зависимости от ситуации. Приучивайте себя использовать горячие клавиши.

Равномерное распределение

Еще один крайне полезный инструмент для расстановки объектов. Представьте себе ситуацию: у вас есть несколько объектов (кнопок), но расстояния между ними разные и вам нужно выставить одинаковые отступы. Конечно, можно самому все расставить, но инструмент Tidy Up сделает все за вас. Для этого выбираем все объекты и нажимаем Ctrl + Alt + T в macOs или Ctrl + Alt + Shift + T в Windows. Кликаем по появившемуся полю и кнопками-стрелками (вверх и вниз) подбираем подходящее расстояние между элементами или вписываем значение сразу и нажимаем Enter.


Есть еще два похожих инструмента – Distribute Vertical Spacing (Ctrl + Alt + V в macOs и Ctrl + Alt + Shift + V в Windows) и Distribute Horizontal Spacing (Ctrl + Alt + H в macOs и Ctrl + Alt + Shift + H в Windows). У них есть два ключевых отличия:

  1. Они распределяют выделенные объекты внутри своих границ, другими словами после перераспределния объектов, они будут занимать тоже пространство, что и до применения операции. Инструменту Tidy Up наоборот плевать на то, сколько в итоге пространства займут объекты на новых позициях;
  2. Вам нужно явно указать в каком направлении распределять объекты (горизонтально или вертикально). Tidy Up делает это автоматически.

Смотрим на практике:


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

Новые примитивы

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

Эллипс

Создание эллипса элементарно. Достаточно воспользоваться горячей клавишей O (или выбрать соответствующий пункт в выпадающем меню инструментов) и дальше все проделать точно также, как с прямоугольником. Дальше начинается самое интересное:

  • Если навести курсор на только что созданный круг можно заметить, что справа появился белый кружек (если навести на него курсор, то появится подсказка Arc – дуга), за который можно потянуть. Если это сделать, то круг превратится в дугу;
  • Сразу после превращения появится три кружка: Start – начальная точка, Sweep – размах (определяет длину дуги), Ratio – соотношение внутренего радиуса дуги к внешнему (определяет толщину дуги).
  • Соответствующие параметры появятся в панели свойст, там можно задать точные значения;
  • Полезным может оказаться радиус скругления, который позволит смягчить торцы. Находится на том же месте правой панели, что и у прямоугольника.

Полигон

Позволяет создавать многоугольники: от треугольника до полигона с неограниченным количеством вершин (чаще всего до 10). Горячей клавиши нет, поэтому прийдется воспользоваться выпадающим меню. Как и в случае с эллипсом после создания и наведения появится два кружечка с такими параметрами:

  • Count – количество вершин;
  • Radius – радиус скругления вершин.

Звезда

У этой фигуры тоже нет горячей клавиши. Границы ее применения достаточно ограничены, но не совсем тривиальны. Я покажу, как можно с ее помощью сделать шестеренку и даже морского ежа. Познакомимься с кружечками-параметрами:

  • Count – количество лучей звезды;
  • Ratio – соотношение между углублениями и выступами луча (чем меньше значение, тем длинее лучи);
  • Radius – радиус скругления.

Экспорт дизайна

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

  • Переслать несколько экранов в файлах в формате Png без потери качества заказчику по электронной почте;
  • Передать иконки в векторном формате Svg разработчику;
  • Предоставить фотографии товаров в файлах формата Jpg.

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

Как пометить слой для экспорта и сохранить его в файл

Последовательность действий такая:

  1. Выбираем фрейм, группу или слой для экспорта;
  2. В панели свойств справа нажимаем + (плюсик) напротив надписи Export;
  3. Появятся настройки для экспорта;
  4. Самое правое выпадающее меню указывает, в каком формате будет сохранен файл. Убедитесь, что выбран PNG – это формат без потери качества;
  5. Нажимаем кнопку Export название выбранного слоя, которая находится под настройками (надпись на кнопке будет соответствовать названию выбранного слоя);
  6. Появится окно, в котором указываем, где и под каким названием сохранить графический файл. По-умолчанию название файла берется из названия выбранного слоя, но вы это можете изменить. Не вздумайте менять формат файла на этом этапе (три символа после точки) – уже поздно. Если нужно, нажмите Cancel и измените формат в самом правом выпадающем списке;
  7. Нажимаем кнопку Save. Окно выбора файла скроется. Готово! Изображение сохранено в указанном месте в заданный файл. Теперь вы можете отправить его клиенту на утверждение или мне в качестве домашки

Формат Png

PNG (Portable Network Graphics) – растровый формат без потери качества. Позволяет точно запечатлить каждый пиксель исходного изображения. Другими словами, получатель увидит его без искажений. Всегда экспортируйте дизайн в формате Png для клиента (если по какой-то причине он не может посмотреть его прямо в Figma) и во всех остальных случаях.

Формат Jpg

Jpg (Jpeg, Joint Photographic Experts Group) – растровый формат для фотографий с потерей качества. Малозаметно искажает исходное изображение используя особенности человеческого восприятия. Позволяет значительно экономить на размере файла. Никогда не используйте Jpg для экспорта своего дизайна.

Формат Svg

Svg (Scalable Vector Graphics) – векторный графический формат. Поддерживает как статические, так и анимированные изображения. Figma пока экспортирует только статически, хотя и поддерживает анимации. Занимает крайне мало места. Повсевместно используется для экспорта иконок и иллюстариций с небольшим количеством цветов (инфографика, схемы, таблицы с нетривиальной версткой). Обратите внимание, что вступительная картинка в каждом уроке была экспортированна именно в этом формате. Чтобы убедиться в этом, достаточно увеличить масштаб страницы – потери качества не произойдет никогда (вы не увидите пиксельной лесенки).

Формат Pdf

Pdf (Portable Document Format) – формат электронных документов. Позволяет сохранять дизайн в векторной форме, но это не его прямое назначение. Чаще используется для сохранения презентаций для инвестовов или отчетов. К сожалению, Figma генерирует крайне тяжелые файлы в этом формате. Никогда не используйте Pdf для экспорта дизайна.

У каждого формата есть свои особенности использования и специальные возможности (например, Png позволяет указывать в каком месте изображение прозрачно, а Jpg так не умеет). Но с этим я вас буду знакомить постепенно в следующих уроках, пока изложенного материала достаточно.

Домашнее задание

Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro

  1. Создайте новый файл в Figma. Для каждого задания сделайте отдельную страницу. Вот первое задание. Повторите картинку ниже, отрисовав все фигурки в отдельных фреймах, используя все известные вам примитивы. Далее экспортируйте каждую фигуру (с подписью), используя фреймы одинаковых размеров в отдельный png-файл. Потом импортируйте назад в Figma только что созданные png-файлы. Далее расположите в отдельном фрейме только что импортированные фигуры, как на исходном рисунке. В итоге у вас должно быть на странице три фрейма сверху вниз: 1) с исходным изображением (референс); 2) с отрисованными фигурками; 3) с отрисованными фигурками в растровом формате (которые вы импортировали в самом конце). Все три фрейма должны быть максимально похожими.

    Фигуры для первого задания по 4-ой части уроков по основам Figma

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

    Пример темного интерфейса

  3. Третье задание. Зайдите на Behance или Awwwards (гуглим, если забыли, что это) и найдите два дизайна веб-сайта. Нарисуйте новый дизайн, используя структуру из одного сайта, а цвета и иллюстрации – из второго. Это очень сложное задание, учитывая, что вы ничего не знаете об основах дизайна, но хотя бы попытайтесь.

На проверку присылайте рабочую ссылку на файл с правами на редактирование. Как дать соответствующие права читайте в предыдущем уроке. Не забываем, что каждое задание должно быть выполнено на отдельной странице. Внимательно читайте каждый пункт, там очень много нюансов. Используйте новые приемы из этого урока (выравнивание уж точно пригодится).

Выводы

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

Постарайтесь выполнить домашку из этого урока, это даст вам много опыта. А это самое главное в этом деле.

Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

Stay tuned!