Продолжаем знакомство с основами Figma. Сегодня узнаем новые приемы работы со слоями, включая выделение, перемещение, группировку, блокировку и скрытие.
Научимся вставлять растровое изображение в проект и узнаем, как работать с новым инструментом – пипеткой, которая считывает цвета из изображений и других объектов.
Последний раздел с новыми командами касается выставления точных расстояний между объектами, что важно в дальнейшем при работе с сетками.
Этот урок расширяет наш арсенал дизайнера новыми приемами, которые ускоряют и упрощают процесс дизайна. Например, сложно представить работу с большим проектом без группировки слоев.
- Группы
- Создание и удаление группы
- Сворачивание и разворачивание группы
- Вложенные группы
- Перегруппировка
- Выделение слоев
- Выбираем вложенный слой
- Выбираем несколько слоев (новый способ)
- Выбираем диапазон слоев
- Выбираем перекрытый слой
- Снимаем выделение
- Работа со слоями
- Блокировка и скрытие слоев
- Копирование, вырезание и вставка слоя
- Вставка в позицию другого объекта
- Названия слоев
- Переименование слоев
- Задавайте названия со смыслом
- Импорт изображений
- Референсы и мудборды
- Импорт из буфера обмена
- Импорт из файла
- Инструмент пипетка
- Быстрое присваивание цвета
- Присваивание цвета пикселей изображения
- Точное позиционирование
- Как поделиться проектом
- Домашнее задание
- Выводы
Группы
Выполняя домашнее задание из прошлого урока вы обязательно столкнулись с проблемой управления слоями. Например, любая кнопка состоит из: прямоугольника (определяющего границы) и текстового блока (поясняющего, что эта кнопка делает). Чтобы переместить кнопку, вам прийдется сначала выделить каждую ее составляющую. А что если вы захотите переместить верхнюю часть сайта с навигационным меню, которое состоит из 5 текстовых элементов? Это уже займет некоторое время. С такими микро-задачами вы будете сталкиваться постоянно.
Чтобы решить эту проблему и существуют группы, которые позволяют работать с несколькими объектами, как с одним слоем.
Например, прямоугольник и текстовый блок можно объединить в одну группу по смыслу – это уже будет кнопка. Это очень удобно и значительно ускоряет работу.
Группа — это специальный слой, который вмещает в себя другие слои и предназначена для объединения и упрощения дальнейшей работы с ними. Группа работает с большим количеством слоев, как с одним.
Создание и удаление группы
Предположим, что нам нужно объединить несколько примитивов, составляющих кнопку в группу. Для этого:
- Воспользуемся приемом из прошлого урока, зажав левую кнопку мыши сверху слева и потянув ее в нижний правый угол, тем самым выделим сразу все примитивы, из которых построена кнопка. На панели слева подсветятся выделенные слои;
- Нажимаем правую кнопку мыши над любым из компонентов кнопки и из выпадающего меню выбираем Group Selection. Доступна и комбинация горячих клавиш для быстрого объединения: Command + G в MacOs или Control + G в Windows;
- Обратите внимание, что в панели слоев вместо двух выделенных примитивов появился один слой с новой иконкой и названием Group 1 – это и есть наша кнопка;
- Теперь вы можете работать с кнопкой, как с обычным слоем: перемещать, масштабировать, дублировать и так далее без необходимости выделять каждый слой;
- Чтобы разбить группу назад на составляющие, нужно выделить кнопку и в контекстном меню выбрать Ungroup или нажать Shift + Command + G в MacOs или Shift + Control + G в Windows;
Сворачивание и разворачивание группы
Как вы заметили, после создания группы ее содержимое автоматически скрывается. Это состояние называется свернутой группой. Чтобы показать все содержимое, группу нужно развернуть:
- Подвести курсор внутрь панели слоев. Слева напротив каждой группы появится маленькая треугольная стрелочка указывающая направо;
- Кликнуть на стрелочку, содержимое группы станет видимо. Стрелка повернется вниз, сигнализируя про развернутое состояние;
- Чтобы опять свернуть содержимое, еще раз кликните на стрелку.
Вложенные группы
Группы могут включать в себя другие группы. Для этого достаточно выбрать несколько слоев с группой и сделать еще одну группу. Слой, который находится внутри группы, называется ребенком. Слой-группа, в котором находятся другие слои называется родителем.
Зачем это может понадобится? Все с той же целью: для удобной и быстрой работы. Рассмотрим пример. Несколько кнопок и логотип с подложкой могут быть объединены в так называемую шапку сайта (на английском – header, читается хэдэ) – элемент дизайна, который повторяется на всех страницах и обычно содержит средства для быстрой навигации. В глазах Figma это просто группа с другими вложенными группами.
Так вот, если нам понадобится переместить кнопки внутри шапки сайта, то мы можем развернуть соответствующую группу и работать с группой каждой кнопки.
Перегруппировка
Иногда может понадобится переместить слой из одной группы в другую или дополнить группу новыми слоями.
Для этого достаточно перетащить слой на нужную группу в панели слоев – и он мгновенно окажется внутри. Также можно перетащить слой в нужное место между слоями внутри развернутой группы. Если слой нужно убрать из группы, то его нужно перетащить в область над группой или под ней, как показано в видео:
Выделение слоев
Мы уже умеем выделять объекты, с помощью клика по ним в рабочей области или на панели слоев. Также, мы знаем как выделить несколько слоев с помощью рамки, зажав левую кнопку мыши в рабочей области. Сейчас познакомимся с новыми приемами и узнаем, как выделять вложенные слои без развертывания группы.
Выбираем вложенный слой
Вернемся к примеру с шапкой сайта. Чтобы выделить кнопку, достаточно сделать двойной клик по ней, что автоматически развернет верхнюю группу.
Чтобы спуститься ниже по дереву вложенности и выделить надпись кнопки, достаточно сделать еще один двойной клик. Как вы уже поняли, двойной клик позволяет выделить объекты на один уровень вложенности ниже текущего.
Двойной клик ускоряет выделение при работе с вложенными слоями и значительно быстрее ручного развертывания групп. Но что если уровней вложенности больше одного? Ведь прийдется делать несколько двойных кликов. Чтобы выделить объект на самом нижнем уровне вложенности, достаточно зажать Command в MacOs или Ctrl в Windows и сделать клик по объекту – это называется глубокое выделение (deep selection).
Выбираем несколько слоев (новый способ)
Зажмите кнопку Command в MacOs или Ctrl в Windows и кликайте по слоям один за другим в панели слева. Зажмите клавишу Shift и выделяйте объекты кликом или рамкой в рабочей области. Каждое новое выделение будет объединяться со старым. Этот способ очень удобен при создании групп и в комбинации с глубоким выделением.
Выбираем перекрытый слой
Иногда случаются ситуации, когда слой полностью перекрыт другим и его невозможно выделить на рабочей области. Остается только копаться в панели слоев. В таком случае достаточно кликнуть правой кнопкой мыши по области, где находится невидимый слой и из выпадающего меню выбрать Select Layer, а потом кликнуть по названию нужного вам слоя.
Еще один вариант: зажмите Ctrl и нажмите правую кнопку мыши в область перекрытия слоя. Вместо контекстного меню сразу появится список слоев, что значительно быстрее предыдущего способа.
Эти способы выделения работают и для заблокированных слоев, но не для невидимых!
Блокировка и скрытие слоев
Иногда вы работаете исключительно над одним элементом интерфейса и случайное выделение других частей дизайна лишь помешает. В таких случаях полезно заблокировать или совсем скрыть некоторую часть слоев. Для этого:
- Выделить нужные слои;
- Навести курсор на выделенные объекты в рабочей области или в панели слоев;
- Вызвать контекстное меню правой кнопкой мыши;
- Выбрать Lock/Unlock, чтобы заблокировать или Show/Hide, чтобы скрыть слой;
- Если навести курсор на слой в панели слоев, то справа от него появятся иконки действий: кликните на замок, чтобы заблокировать/разблокировать слой или на глаз, чтобы скрыть/показать его;
- Но лучше воспользоваться горячими клавишами: заблокировать – Shift + Command + L в MacOs или Shift + Control + L в Windows; скрыть – Shift + Command + H в MacOs или Shift + Control + H в Windows;
- Разблокировка и показ скрытых слоев выполняется аналогично, но выделять их следует, по понятным причинам, на панели слоев.
Копирование, вырезание и вставка слоя
Для копирования объекта выделите его и нажмите 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-разработчик скажет спасибо.
Переименование слоев
Чтобы переименовать слой достаточно:
- Выбрать нужный объект на рабочей области или в панели слоев и нажать Command + R в MacOs или Ctrl + R в Windows;
- Изменить название слоя;
- Нажать Enter, чтобы сохранить изменения;
- Также можно сделать двойной клик по названию слоя в панели слоев, чтобы войти в режим редактирования.
Чтобы переименовать группу слоев нужно:
- Выбрать несколько слоев;
- Нажать Command + R в MacOs или Ctrl + R в Windows;
- В поле Rename to вписать новое название и нажать Enter.
Задавайте названия со смыслом
Названия должны быть понятны не только вам, но и разработчикам, которые в дальнейшем будут работать с вашим проектом. Если вы работаете с зарубежной компанией, то названия нужно задавать исключительно на английском языке. Если вы не знаете, как что-то перевести, используйте Google Translate.
Названия лучше задавать без пробелов, для разделителей используйте знак минус или нижнее подчеркивание. Дело в том, что в дальнейшем некоторые слои будут экспортироваться в файлы ресурсов разработчиками. А для них удобнее задавать именно такие названия файлов.
Вот небольшой список типичных названий слоев, чтобы у вас было представление:
- Header
- Footer
- Button-CTA
- Modal-Export
- Icon-Reload
- Img-Banner
Никто не запрещает вам называть слои так, как вы хотите, подстраиваясь под нужды вашего проекта и команды. Это лишь напутствие для новичка.
Импорт изображений
Фотографии и иллюстрации можно использовать не только, как составную часть дизайна, но и в качестве примеров, на которые стоит ориентироваться перед началом работы. Давайте рассмотрим более детально несколько терминов, с которыми мы уже сталкивались во втором уроке.
Референсы и мудборды
Референс, референсы (от англ. reference – рекомендация, эталон, намек, ссылка) — одно или несколько примеров изображений, которые предоставляет заказчик, чтобы показать, что он хочет получить в результате вашей работы. Референс может касаться не всего сайта, а лишь какого-то конкретного его аспекта. Например, цвета попросят, как на первом сайте, структура шапки – как на втором, навигационное меню мобильной версии – как на третьем. Референсы сопровождаю техническое задание и делают его более понятным. Референсом может выступать не только изображение, но и ссылка на сайт или даже фото/видео.
Мудборд (от англ. mood board – доска настроения) — это подборка изображений, которую составляет дизайнер, с целью показать заказчику и получить отзыв на самом раннем этапе, еще до начала работы. С помощью таких подборок мы пытаемся прощупать вкус клиента, понять его предпочтения. Лучшие экземпляры из мудборда в дальнейшем могут использоваться, как отправная точка для начала дизайна (как референсы). Как и в случае с референсами, изображениями для мудборда могут выступать дизайны других сайтов, фотографии (как примеры удачных цветовых сочетаний), иллюстрации, шрифты, наборы цветов и так далее.
Для создания мудбордов существуют специальные бесплатные сервисы: Milanote, Pinterest. Но не спешите там регистрироваться, для начала нам хватит возможностей Figma.
Импорт из буфера обмена
Чтобы работать с референсами и создавать мудборды нам нужно каким-то образом вставить картинки прямо в рабочую область. В Figma есть несколько механизмов для этого. Сначала познакомимся с самым простым из них. Чтобы вставить картинку нужно:
- Найти любую картинку в браузере;
- Кликнуть правой кнопкой мыши по ней, чтобы вызвать контекстное меню;
- Выбрать команду Copy Image, что заставит браузер скопировать изображение в буфер обмена;
- Переключиться назад в Figma;
- Нажать Command + V в MacOs или Ctrl + V в Windows, чтобы вставить изображение из буфера;
- Обратите внимание, что если изображение окажется большим, то при его вставке оно перекроет всю рабочую область. Не стоит этого пугаться, достаточно уменьшить масштаб картинки;
- Дальше с изображением можно работать, как с прямоугольником: изменять положение, размеры и так далее.
У Figma есть ограничение на вставку больших растровых изображений: если ширина или высота картинки превышает 4096 пикселей, то вставленный объект будет автоматически отмасштабирован до указанных величин.
Импорт из файла
Случается, что графические ресурсы присылают в архивах или файлы уже находятся на вашем компьютере. Достаточно перетащить файл картинки на рабочую область Figma, как показано в видео. Позиция вставленного изображения будет зависеть от того, где вы отпустите левую кнопку мыши после перетаскивания – центр картинки окажется под курсором.
Инструмент пипетка
Пипетка или Eyedropper Tool или Color Picker – позволяет считать цвет из любого примитива и назначить его выбранному объекту. Очень полезен для подбора цветовой гаммы на основе изображений. Мы уже знаем, как скопировать значение цвета из одного объекта и вставить его в другой. Но есть и более быстрый способ.
Быстрое присваивание цвета
Для быстрого копирования цвета достаточно:
- Выбрать один или несколько объектов, которые нужно перекрасить. Если у него есть заливка или обводка, то ее цвет и будет заменен. Если у объекта есть и заливка и обводка, то заменен будет только цвет заливки;
- Нажать кнопку I или Ctrl + C, чтобы активировать пипетку;
- Навести курсор на точку рабочей области, из которой нужно считать цвет. Обратите внимание на увеличительный круг с пиксельной сеткой в верхнем правом углу, который появляется для вашего удобства;
- Осталось сделать клик левой кнопкой мыши для подтверждения;
- Если выбранный объект содержит цвет заливки и обводку и вы хотите изменить цвет обводки с помощью пипетки, то для этого нужно кликнуть по цвету обводки, чтобы вызвать окно выбора цвета и только потом вызвать пипетку.
Точное позиционирование
В Figma есть очень удобный инструмент для точного позиционирования, который показывает расстояние между объектами. Чтобы ним воспользоваться:
- Выделите объект, который вы хотите точно подогнать;
- Зажмите кнопку Option в MacOs или Alt в Windows;
- Подведите курсор к другому объекту, чтобы увидеть расстояние в пикселях;
- Одновременно изменяйте положение выделенного объекта с помощью кнопок-стрелочек.
Как поделиться проектом
Давайте договоримся, что все домашние задания вы теперь будете отправлять в виде ссылки. Для этого в Figma есть кнопка Share в правом верхнем углу. Сделайте следующее:
- Нажмите кнопку Share;
- Нажмите на Only people invited to this file;
- В выпадающем списке выберите Anyone with the link, чтобы сделать файл доступным по ссылке;
- Кликните по Copy link, чтобы скопировать ссылку в буфер обмена;
- Теперь отправьте ссылку человеку, с которым хотите поделиться вашим проектом. Доступ будет только для просмотра: все, кто перейдут по ссылке не смогут ничего изменить.
Домашнее задание
Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro
- Вернитесь к файлу с первым и вторым заданием из прошлого урока и наведите порядок: сгруппируйте и переименуйте слои (задайте осмысленные названия), чтобы в них было проще ориентироваться;
- Зайдите на сайт Behance (тут дизайнеры делятся своими работами), прокручивайте страницу пока не найдете иллюстрации (не путать с фотографиями). Иллюстрации (смотрите пример в видео из предидущего раздела «Как поделиться проектом») нам идеально подходят, так как из них проще выделить основные цвета. Скопируйте себе 5 картинок, которые вам нравятся (чтобы стала доступна команда Copy Image, нужно предварительно кликнуть по работе, она увеличится). Для каждой картинки нарисуйте 4-8 кружков одинаковых размеров и покрасьте их в ключевые цвета иллюстрации (используйте пипетку);
- Введите в поисковой строке Behance запрос «UI web app». Постарайтесь найти простенький дизайн сайта и перерисуйте его как можно более детально, насколько у вас получится (игнорируйте то, что пока не можете воссоздать). Иллюстрации и фото замените своими, ищите их на сайте Unsplash;
- Тренируйте насмотренность. Заходите на сайт Awwwards и просматривайте размещенные там сайты не менее 10 минут в день – здесь собраны лучшие примеры веб-дизайна. Можете также использовать этот сайт для предыдущего задания;
- Задание повышенной сложности (по желанию). Нарисуйте любую страницу из еще двух сайтов, которые вы найдете на Behance или Awwwards.
Во время выполнения этих заданий используйте группы и горячие клавиши. Старайтесь опробовать на практике как можно больше приемов из этого урока. Особое внимание уделите насмотренности, не пропускайте это важное упражнение.
Сегодня мы продолжили знакомиться с новыми приемами для эффективной работы. И хотя теперь вы знаете намного больше и будете чувствовать себя свободнее, этого недостаточно для полноценной работы.
Наберитесь терпения, выполните все домашние задания и перечитывайте старые уроки время от времени. Продолжайте практиковаться и набираться опыта. Задумайтесь, насколько удобнее было бы выполнять домашку из предыдущего урока, если бы вы знали все приемы из этого.
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.
Stay tuned!