В очередной части по основам Figma (уже четвертая) научимся выравнивать объекты и распределять их в пространстве. Изучим новые фигуры: эллипс, полигон, звезду. Они не такие простые, как кажутся на первый взгляд.
Научимся экспортировать фреймы в графические файлы. Это позволит впоследствии поделиться ими с заказчиком или разработчиками. Оглядим популярные форматы изображений и поймем, в каких случаях их использовать.
- Вирівнювання одного об'єкта відносно іншого
- Вирівнювання кількох об'єктів відносно іншого
- Вирівнювання групи об'єктів відносно іншого зі збереженням позиції
- Вирівнювання відокремлених об'єктів
- Вирівнювання одного об'єкту всередині фрейму
- Рівномірний розподіл
- Нові примітиви
- Еліпс
- Полігон
- Зірка
- Експорт дизайну
- Як помітити прошарок для експорту та зберегти його у файл
- Формат Png
- Формат Jpg
- Формат Svg
- Формат Pdf
- Домашнє завдання
- Висновки
Выравнивание можно выполнять и вручную, но чтобы повысить скорость работы 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.
- Обратите внимание, что горячие клавиши для выравнивания выставлены в таком же порядке, как и кнопки-стрелочки. Еще одна аналогия для геймеров – горячие клавиши выравнивания аналогичны перемещению в любом 3D-шутере, например Counter-Strike (AWSD).
- Сразу после клика объекты будут мгновенно переставлены в новое место, координаты изменятся. Вы можете продолжать нажимать на другие типы выравнивания, наблюдая, как обновляется положение.
Здесь последовательность действий такая же, как и в предыдущем случае, но выбрать нужно больше двух объектов. Выравнивание будет происходить относительно наибольшего.
Обратите внимание, что объекты, которые выравниваются, меняют свое положение друг относительно друга (так как они разного размера). Чтобы избежать этого, необходимо предварительно сгруппировать объекты, что показано в следующем разделе.
Звучить суперечливо, але після перегляду інструкції нижче все стане на свої місця.
Таким чином, попереднє групування дозволяє зберегти відносні позиції прошарків, що вирівнюються, що іноді стає в нагоді. В іншому випадку без групування при застосуванні кількох вирівнювань усі об'єкти можуть перемішатися в купу, що і сталося на початку відео.
Если выделенные объекты расположены отдельно (без большого объекта, который перекрывает по размерам другие, как в предыдущих примерах), то выравнивание будет происходить относительно границ всех выделенных объектов. На практике это выглядит так (после каждого выравнивания применяется отмена последнего действия Cmd+Z или Ctrl+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). У них есть два отличия:
- Они распределяют выделенные объекты внутри своих границ, то есть после перераспределения объектов они займут то же пространство, что и до применения операции. Инструмент Tidy Up, наоборот, не учитывает, сколько в результате пространства займут объекты на новых позициях;
- Вам нужно указать, в каком направлении распределять объекты (горизонтально или вертикально). Tidy Up делает это автоматически.
На практике это выглядит так:
Не забываем, что распределение можно применять вместе с выравниванием. Это позволяет быстро упорядочить большое количество неточно расставленных объектов.
В панели инструментов у нас осталось еще несколько незнакомых фигур. Давайте разберемся, как ими пользоваться, если вы этого еще не сделали. Уверена, вы и не подозревали, что эллипс имеет столько возможностей.
Создать эллипс просто, достаточно воспользоваться горячей клавишей O (или выбрать соответствующий пункт в меню инструментов) и дальше сделать всё так же, как с прямоугольником. Дальше начинается самое интересное:
- Если навести курсор на только что созданный круг, то можно заметить, что справа появился белый кружочек, за который можно потянуть. Если это сделать, то круг преобразится в дугу;
- Сразу после преобразования в дугу появится еще три кружочка: Start – начальная точка, Sweep – размах, определяющий длину дуги, Ratio – соотношение внутреннего радиуса дуги к внешнему, которое определяет толщину дуги.
- Эти параметры доступны и в панели свойств, там можно задать точные значения с клавиатуры;
- Полезным может быть радиус закругления, который позволит смягчить торцы. Находится в том же месте правой панели, что и в случае с прямоугольником.
Позволяет создавать многоугольники от треугольника до полигона с неограниченным количеством вершин (чаще всего до 10). Я покажу, как можно с его помощью сделать фигуру с относительно размытыми краями. Такие штуки часто используют для фона в дизайне. Их еще называют blobГорячей клавиши нет, поэтому придется воспользоваться меню инструментов. Как и в случае с эллипсом после создания и наведения появится два кружочка, отвечающих за:
- Count – количество вершин;
- Radius – радиус закругления вершин.
Зірка
Ця фігура також не має гарячої клавіші. Межі її застосування досить обмежені, але не тривіальні. Фігуру як на відео можна використати як фон для бейджу зі знижкою. Познайомимося з кружечками, що відповідають за параметрами:
- Count – кількість променів зірки;
- Ratio – співвідношення між заглибленнями та виступами променя. Чим менше значення, тим довші промені;
- Radius – радіус заокруглення.
В работе вам часто нужно преобразовать дизайн внутри Figma в изображение, которое можно переслать в виде файла. Существуют различные форматы для разных целей. Вот несколько примеров, когда это может понадобиться:
- Переслать несколько экранов в файлах в формате Png без потери качества заказчику по электронной почте или в мессенджерах;
- Передать иконки в векторном формате Svg разработчику;
- Предоставить фотографии товаров в файлах формата Jpg.
Процесс преобразования какого-либо элемента дизайна в Figma в файл изображения называется экспортом. Экспортировать можно любой слой или фрейм как отдельно, так и все отмеченные для экспорта элементы за один раз. Вот, как это делается.
- Выбираем фрейм, группу или слой для экспорта;
- На панели свойств справа нажимаем + (плюсик) напротив надписи Export;
- Появятся опции для экспорта;
- Самое правое меню указывает, в каком формате будет сохранен файл. Убедитесь, что выбрано PNG – это формат без потери качества;
- Нажимаем кнопку Export название выбранного слоя,, которая находится под настройками. Надпись на кнопке будет соответствовать названию выбранного слоя;
- Появится окно, в котором указываем, где и с каким названием сохранить графический файл. По умолчанию название берется из названия выбранного слоя, но это можно изменить. Не думайте менять формат файла на этом этапе (три символа после точки) – уже поздно. Если нужно, нажмите Cancel и измените формат с помощью правого выпадающего списка;
- Нажимаем кнопку Save. Окно выбора файла исчезнет. Готово! Изображение сохранено в указанном месте и файле. Теперь вы можете отправить его клиенту на утверждение или мне, как домашнее задание
PNG (Portable Network Graphics) – растровый формат без потери качества. Позволяет точно отобразить каждый пиксель исходного изображения. Другими словами, получатель увидит его без искажений. Всегда экспортируйте дизайн в формате Png для клиента (если по какой-то причине он не может посмотреть его прямо в Figma) и во всех остальных случаях.
Jpg (Jpeg, Joint Photographic Experts Group) – растровый формат для фотографий с потерей качества. Непомітно искажает исходное изображение, используя особенности человеческого восприятия. Позволяет значительно экономить на размере файла. Никогда не используйте Jpg для экспорта дизайна.
Svg (Scalable Vector Graphics) – векторный графический формат. Поддерживает как статические, так и анимированные изображения. Figma пока что экспортирует лишь статично, хоть и поддерживает анимации. Занимает очень мало места. Всегда используйте для экспорта иконок и иллюстраций с небольшим количеством цветов (инфографика, схемы, таблицы с нетривиальной версткой). Обратите внимание, что вступительное изображение в каждом уроке было экспортировано именно в этом формате. Чтобы убедиться в этом, достаточно увеличить масштаб страницы – потери качества не произойдет, и вы не увидите пиксельной лестницы.
Pdf (Portable Document Format) – формат электронных документов. Позволяет сохранять дизайн в векторной форме, но это не его прямое назначение. Часто используется для создания отчетов и презентаций для инвесторов. К сожалению, Figma генерирует очень тяжелые файлы в этом формате. Никогда не используйте Pdf для экспорта дизайна.
У кожного формату є свої особливості та унікальні можливості. Наприклад, Png дозволяє вказувати ділянки з прозорістю, а Jpg так не вміє. Але з цим я вас познайомлю поступово в наступних уроках, поки викладеного матеріалу достатньо.
Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.
За реквізитами пишіть в дірект Інстаграму @frusia.pro
Курс і уроки залишаються безкоштовними.
Домашні завдання більше не перевіряються для громадян росії.
- Создайте новый файл в Figma. Для каждого задания сделайте отдельную страницу. Вот первое задание. Повторите рисунок ниже, отрисовав все фигуры вместе с текстовыми названиями в отдельных фреймах, используя известные вам инструменты. Далее экспортируйте каждую фигуру с названием, фреймы одинаковых размеров в отдельные png-файлы. Затем импортируйте обратно в Figma только что созданные png-файлы. Расположите их в отдельном фрейме. В результате у вас должно быть на странице три фрейма сверху вниз: 1) с изображением самого задания (референс); 2) с отрисованными фигурами (с названиями под каждой фигурой); 3) с отрисованными фигурами в растровом формате, которые вы импортировали. Все три фрейма должны быть максимально похожи.
![Фигуры для первого задания из 4-ой части уроков по основам Figma]( "Фигуры для первого задания 7-ого урока из курса UX/UI дизайна")
- Второе задание. Выберите любой объект из предыдущего задания и отрисуйте, как выглядит в этот момент панель свойств Figma (она находится справа) в отдельном фрейме. Затем измените цвета так, чтобы они соответствовали темной теме интерфейса. Пример темной темы интерфейса смотрите ниже.
![Пример темного интерфейса]( "Пример темного интерфейса")
- Третье задание. Зайдите на Behance или Awwwards (гуглим, если забыли, что это) и найдите два дизайна веб-сайта. Нарисуйте новый дизайн, используя структуру с одного сайта, а цвета и иллюстрации – с другого. Это очень сложное задание, учитывая, что вы ничего не знаете об основах дизайна, но хотя бы попробуйте.
На проверку отправляйте ссылку на файл с правами на редактирование. Как дать соответствующие права читайте в предыдущем уроке. Не забываем, что каждое задание должно быть выполнено на отдельной странице. Внимательно читайте каждый пункт, там много нюансов. Используйте новые приемы из этого урока. Не забывайте про выравнивание, которое пригодится.
Вы продолжаете двигаться вперед в освоении Figma. Еще несколько уроков, и мы перейдем к изучению основ дизайна. Но к тому моменту вы уже хорошо овладеете одним из лучших инструментов, и это будет не просто теория в вакууме, а практические задания.
Постарайтесь выполнить домашние задания с этого урока, это даст вам много опыта. А это самое главное в нашем деле.
Подписывайтесь на меня в Instagram @frusia.pro и будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение
