Продолжаем знакомство с основами Figma. Сегодня узнаем новые приемы работы со слоями, включая выделение, перемещение, группировку, блокировку и скрытие.

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

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

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

Группы

Выполняя домашнее задание из прошлого урока вы обязательно столкнулись с проблемой управления слоями. Например, любая кнопка состоит из: прямоугольника (определяющего границы) и текстового блока (поясняющего, что эта кнопка делает). Чтобы переместить кнопку, вам прийдется сначала выделить каждую ее составляющую. А что если вы захотите переместить верхнюю часть сайта с навигационным меню, которое состоит из 5 текстовых элементов? Это уже займет некоторое время. С такими микро-задачами вы будете сталкиваться постоянно.

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

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

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

Создание и удаление группы

Предположим, что нам нужно объединить несколько примитивов, составляющих кнопку в группу. Для этого:

  1. Воспользуемся приемом из прошлого урока, зажав левую кнопку мыши сверху слева и потянув ее в нижний правый угол, тем самым выделим сразу все примитивы, из которых построена кнопка. На панели слева подсветятся выделенные слои;
  2. Нажимаем правую кнопку мыши над любым из компонентов кнопки и из выпадающего меню выбираем Group Selection. Доступна и комбинация горячих клавиш для быстрого объединения: Command + G в MacOs или Control + G в Windows;
  3. Обратите внимание, что в панели слоев вместо двух выделенных примитивов появился один слой с новой иконкой и названием Group 1 – это и есть наша кнопка;
  4. Теперь вы можете работать с кнопкой, как с обычным слоем: перемещать, масштабировать, дублировать и так далее без необходимости выделять каждый слой;
  5. Чтобы разбить группу назад на составляющие, нужно выделить кнопку и в контекстном меню выбрать Ungroup или нажать Shift + Command + G в MacOs или Shift + Control + G в Windows;



Сворачивание и разворачивание группы

Как вы заметили, после создания группы ее содержимое автоматически скрывается. Это состояние называется свернутой группой. Чтобы показать все содержимое, группу нужно развернуть:

  1. Подвести курсор внутрь панели слоев. Слева напротив каждой группы появится маленькая треугольная стрелочка указывающая направо;
  2. Кликнуть на стрелочку, содержимое группы станет видимо. Стрелка повернется вниз, сигнализируя про развернутое состояние;
  3. Чтобы опять свернуть содержимое, еще раз кликните на стрелку.



Вложенные группы

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

Зачем это может понадобится? Все с той же целью: для удобной и быстрой работы. Рассмотрим пример. Несколько кнопок и логотип с подложкой могут быть объединены в так называемую шапку сайта (на английском – header, читается хэдэ) – элемент дизайна, который повторяется на всех страницах и обычно содержит средства для быстрой навигации. В глазах Figma это просто группа с другими вложенными группами.

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




Перегруппировка

Иногда может понадобится переместить слой из одной группы в другую или дополнить группу новыми слоями.

Для этого достаточно перетащить слой на нужную группу в панели слоев – и он мгновенно окажется внутри. Также можно перетащить слой в нужное место между слоями внутри развернутой группы. Если слой нужно убрать из группы, то его нужно перетащить в область над группой или под ней, как показано в видео:




Выделение слоев

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

Выбираем вложенный слой

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

Чтобы спуститься ниже по дереву вложенности и выделить надпись кнопки, достаточно сделать еще один двойной клик. Как вы уже поняли, двойной клик позволяет выделить объекты на один уровень вложенности ниже текущего.

Двойной клик ускоряет выделение при работе с вложенными слоями и значительно быстрее ручного развертывания групп. Но что если уровней вложенности больше одного? Ведь прийдется делать несколько двойных кликов. Чтобы выделить объект на самом нижнем уровне вложенности, достаточно зажать Command в MacOs или Ctrl в Windows и сделать клик по объекту – это называется глубокое выделение (deep selection).




Выбираем несколько слоев (новый способ)

Зажмите кнопку Command в MacOs или Ctrl в Windows и кликайте по слоям один за другим в панели слева. Зажмите клавишу Shift и выделяйте объекты кликом или рамкой в рабочей области. Каждое новое выделение будет объединяться со старым. Этот способ очень удобен при создании групп и в комбинации с глубоким выделением.




Выбираем диапазон слоев

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




Выбираем перекрытый слой

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

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

Эти способы выделения работают и для заблокированных слоев, но не для невидимых!




Снимаем выделение

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

Чтобы снять выделение с объекта через панель слоев кликните на выделенном объекте с зажатой клавишей Command в MacOs или Ctrl в Windows.




Работа со слоями

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

Блокировка и скрытие слоев

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

  1. Выделить нужные слои;
  2. Навести курсор на выделенные объекты в рабочей области или в панели слоев;
  3. Вызвать контекстное меню правой кнопкой мыши;
  4. Выбрать Lock/Unlock, чтобы заблокировать или Show/Hide, чтобы скрыть слой;
  5. Если навести курсор на слой в панели слоев, то справа от него появятся иконки действий: кликните на замок, чтобы заблокировать/разблокировать слой или на глаз, чтобы скрыть/показать его;
  6. Но лучше воспользоваться горячими клавишами: заблокировать – Shift + Command + L в MacOs или Shift + Control + L в Windows; скрыть – Shift + Command + H в MacOs или Shift + Control + H в Windows;
  7. Разблокировка и показ скрытых слоев выполняется аналогично, но выделять их следует, по понятным причинам, на панели слоев.


Копирование, вырезание и вставка слоя

Для копирования объекта выделите его и нажмите Command + C в MacOs или Ctrl + C в Windows.

Чтобы вырезать объект, выделите его и нажмите Command + X в MacOs или Ctrl + X в Windows.

Для вставки выберите объект или совсем уберите выделение и нажмите Command + V в MacOs или Ctrl + V в Windows.

Копирование, вырезание и вставка объектов, такие привычные по другим программам команды, некоторых новичков в Figma вводят в недоумение. Дело в том, что позиция, куда будет вставлен объект зависит от того, какой сейчас выбран тип объекта (примитив или группа) и на каком уровне вложенности он находится. Рассмотрим все на примерах:

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

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

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




Вставка в позицию другого объекта

Позицией любого объекта в Figma считается его верхний левый угол. Чтобы сделать позицию вставки более предсказуемой, достаточно после копирования или вырезания выбрать объект и нажать Shift + Command + V в MacOs или Shift + Ctrl + V в Windows. Новый объект будет вставлен аккуратно в левом верхнем углу выделенного слоя.




Названия слоев

Упорядочить и сделать понятным тот хаос, который происходит в недрах любого большого проекта одной группировкой не исправить. Понадобится хорошая система именования. Это занимает дополнительное время, но потом сэкономит нервы при поиске нужного слоя да и frontend-разработчик скажет спасибо.

Переименование слоев

Чтобы переименовать слой достаточно:

  1. Выбрать нужный объект на рабочей области или в панели слоев и нажать Command + R в MacOs или Ctrl + R в Windows;
  2. Изменить название слоя;
  3. Нажать Enter, чтобы сохранить изменения;
  4. Также можно сделать двойной клик по названию слоя в панели слоев, чтобы войти в режим редактирования.

Чтобы переименовать группу слоев нужно:

  1. Выбрать несколько слоев;
  2. Нажать Command + R в MacOs или Ctrl + R в Windows;
  3. В поле Rename to вписать новое название и нажать Enter.



Задавайте названия со смыслом

Названия должны быть понятны не только вам, но и разработчикам, которые в дальнейшем будут работать с вашим проектом. Если вы работаете с зарубежной компанией, то названия нужно задавать исключительно на английском языке. Если вы не знаете, как что-то перевести, используйте Google Translate.

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

Вот небольшой список типичных названий слоев, чтобы у вас было представление:

  • Header
  • Footer
  • Button-CTA
  • Modal-Export
  • Icon-Reload
  • Img-Banner

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

Импорт изображений

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

Референсы и мудборды

Референс, референсы (от англ. reference – рекомендация, эталон, намек, ссылка) — одно или несколько примеров изображений, которые предоставляет заказчик, чтобы показать, что он хочет получить в результате вашей работы. Референс может касаться не всего сайта, а лишь какого-то конкретного его аспекта. Например, цвета попросят, как на первом сайте, структура шапки – как на втором, навигационное меню мобильной версии – как на третьем. Референсы сопровождаю техническое задание и делают его более понятным. Референсом может выступать не только изображение, но и ссылка на сайт или даже фото/видео.

Мудборд (от англ. mood board – доска настроения) — это подборка изображений, которую составляет дизайнер, с целью показать заказчику и получить отзыв на самом раннем этапе, еще до начала работы. С помощью таких подборок мы пытаемся прощупать вкус клиента, понять его предпочтения. Лучшие экземпляры из мудборда в дальнейшем могут использоваться, как отправная точка для начала дизайна (как референсы). Как и в случае с референсами, изображениями для мудборда могут выступать дизайны других сайтов, фотографии (как примеры удачных цветовых сочетаний), иллюстрации, шрифты, наборы цветов и так далее.

Для создания мудбордов существуют специальные бесплатные сервисы: Milanote, Pinterest. Но не спешите там регистрироваться, для начала нам хватит возможностей Figma.

Мудборд

Импорт из буфера обмена

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

  1. Найти любую картинку в браузере;
  2. Кликнуть правой кнопкой мыши по ней, чтобы вызвать контекстное меню;
  3. Выбрать команду Copy Image, что заставит браузер скопировать изображение в буфер обмена;
  4. Переключиться назад в Figma;
  5. Нажать Command + V в MacOs или Ctrl + V в Windows, чтобы вставить изображение из буфера;
  6. Обратите внимание, что если изображение окажется большим, то при его вставке оно перекроет всю рабочую область. Не стоит этого пугаться, достаточно уменьшить масштаб картинки;
  7. Дальше с изображением можно работать, как с прямоугольником: изменять положение, размеры и так далее.

У Figma есть ограничение на вставку больших растровых изображений: если ширина или высота картинки превышает 4096 пикселей, то вставленный объект будет автоматически отмасштабирован до указанных величин.




Импорт из файла

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




Инструмент пипетка

Пипетка или Eyedropper Tool или Color Picker – позволяет считать цвет из любого примитива и назначить его выбранному объекту. Очень полезен для подбора цветовой гаммы на основе изображений. Мы уже знаем, как скопировать значение цвета из одного объекта и вставить его в другой. Но есть и более быстрый способ.

Быстрое присваивание цвета

Для быстрого копирования цвета достаточно:

  1. Выбрать один или несколько объектов, которые нужно перекрасить. Если у него есть заливка или обводка, то ее цвет и будет заменен. Если у объекта есть и заливка и обводка, то заменен будет только цвет заливки;
  2. Нажать кнопку I или Ctrl + C, чтобы активировать пипетку;
  3. Навести курсор на точку рабочей области, из которой нужно считать цвет. Обратите внимание на увеличительный круг с пиксельной сеткой в верхнем правом углу, который появляется для вашего удобства;
  4. Осталось сделать клик левой кнопкой мыши для подтверждения;
  5. Если выбранный объект содержит цвет заливки и обводку и вы хотите изменить цвет обводки с помощью пипетки, то для этого нужно кликнуть по цвету обводки, чтобы вызвать окно выбора цвета и только потом вызвать пипетку.



Присваивание цвета пикселей изображения

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




Точное позиционирование

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

  1. Выделите объект, который вы хотите точно подогнать;
  2. Зажмите кнопку Option в MacOs или Alt в Windows;
  3. Подведите курсор к другому объекту, чтобы увидеть расстояние в пикселях;
  4. Одновременно изменяйте положение выделенного объекта с помощью кнопок-стрелочек.



Как поделиться проектом

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

  1. Нажмите кнопку Share;
  2. Нажмите на Only people invited to this file;
  3. В выпадающем списке выберите Anyone with the link, чтобы сделать файл доступным по ссылке;
  4. Кликните по Copy link, чтобы скопировать ссылку в буфер обмена;
  5. Теперь отправьте ссылку человеку, с которым хотите поделиться вашим проектом. Доступ будет только для просмотра: все, кто перейдут по ссылке не смогут ничего изменить.



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

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

  1. Вернитесь к файлу с первым и вторым заданием из прошлого урока и наведите порядок: сгруппируйте и переименуйте слои (задайте осмысленные названия), чтобы в них было проще ориентироваться;
  2. Зайдите на сайт Behance (тут дизайнеры делятся своими работами), прокручивайте страницу пока не найдете иллюстрации (не путать с фотографиями). Иллюстрации (смотрите пример в видео из предидущего раздела «Как поделиться проектом») нам идеально подходят, так как из них проще выделить основные цвета. Скопируйте себе 5 картинок, которые вам нравятся (чтобы стала доступна команда Copy Image, нужно предварительно кликнуть по работе, она увеличится). Для каждой картинки нарисуйте 4-8 кружков одинаковых размеров и покрасьте их в ключевые цвета иллюстрации (используйте пипетку);
  3. Введите в поисковой строке Behance запрос «UI web app». Постарайтесь найти простенький дизайн сайта и перерисуйте его как можно более детально, насколько у вас получится (игнорируйте то, что пока не можете воссоздать). Иллюстрации и фото замените своими, ищите их на сайте Unsplash;
  4. Тренируйте насмотренность. Заходите на сайт Awwwards и просматривайте размещенные там сайты не менее 10 минут в день – здесь собраны лучшие примеры веб-дизайна. Можете также использовать этот сайт для предыдущего задания;
  5. Задание повышенной сложности (по желанию). Нарисуйте любую страницу из еще двух сайтов, которые вы найдете на Behance или Awwwards.

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

Выводы

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

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

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

Stay tuned!