Группы. Cлои. Пипетка. Импорт картинок
Рассмотрим выделение, перемещение, группировку, блокировку и скрытие слоев, а также научимся вставлять растровые изображения и использовать инструмент "пипетка". В последнем разделе мы углубимся в новые команды, касающиеся выставления точных расстояний между объектами.
Группы в Figma — это удобный способ объединять несколько слоев в один, что значительно упрощает управление элементами на дизайн-проекте. Создание группы позволяет рассматривать несколько слоев как единый объект.
Для создания группы:
1. Выделите несколько слоев: Зажмите левую кнопку мыши и выделите все слои, которые вы хотите объединить в группу. На панели слоев эти слои подсветятся.
2. Выберите опцию группировки: После выделения слоев, щелкните правой кнопкой мыши на одном из них и выберите "Group Selection" из контекстного меню. Можно также воспользоваться комбинацией клавиш: `Command + G` в MacOs или `Control + G` в Windows.
3. Работа с группой: Теперь создан новый слой, который представляет собой группу выбранных слоев. Вы можете перемещать, изменять размеры и применять к группе различные действия, как если бы это был один слой.
Для разбивки группы:
1. Выделите группу: Щелкните на слое, представляющем группу, на панели слоев.
2. Выберите опцию разгруппировки: После этого щелкните правой кнопкой мыши и выберите "Ungroup" из контекстного меню. Можно также воспользоваться комбинацией клавиш: `Shift + Command + G` в MacOs или `Shift + Control + G` в Windows.
Этот инструмент полезен при работе с комплексными элементами, такими как кнопки, которые состоят из нескольких слоев. Группировка упрощает манипуляции с элементами и повышает организованность вашего дизайн-проекта.
Сворачивание и разворачивание группы в Figma предоставляет удобный способ управления видимостью и организацией слоев в проекте. Когда вы создаете группу, ее содержимое автоматически скрывается, что полезно при работе с сложными структурами.
Чтобы развернуть или свернуть группу:
1. Развернуть группу:
- Подвести курсор внутрь панели слоев, слева от имени группы.
- Появится маленькая треугольная стрелочка, указывающая вправо.
- Кликните на стрелочку, чтобы развернуть содержимое группы.
- Стрелка повернется вниз, сигнализируя о развернутом состоянии.
2. Свернуть группу:
- Повторно кликните на стрелочку, находящуюся слева от имени группы.
- Содержимое группы станет невидимым, и стрелка вернется в исходное положение, указывая на свернутое состояние.
Этот функционал особенно полезен при работе с проектами, содержащими большое количество слоев и групп, позволяя легко управлять и структурировать элементы дизайна.
Вложенные группы в Figma
Группы в Figma обладают удобной функциональностью — возможность вложения одной группы внутрь другой. Это прием, который помогает логически организовать и упорядочить элементы дизайна в вашем проекте. Рассмотрим, как это работает:
1. Создание вложенной группы:
- Выберите несколько слоев или групп, которые вы хотите вложить в новую группу.
- Используйте комбинацию клавиш: `Command + G` в MacOs или `Control + G` в Windows, чтобы создать новую группу.
- Теперь выбранные слои становятся частью вновь созданной группы.
2. Изменение вложенной группы:
- Чтобы развернуть вложенную группу и видеть ее содержимое, кликните на треугольную стрелочку слева от имени группы.
- Для сворачивания вложенной группы, повторно кликните на стрелочку.
3. Работа с элементами внутри вложенной группы:
- Вы можете свободно перемещать, изменять и взаимодействовать с элементами внутри вложенной группы, не разворачивая ее.
- При необходимости можно развернуть вложенные группы по мере необходимости, чтобы точно настроить дизайн.
Вложенные группы особенно полезны, когда у вас есть сложные элементы дизайна, такие как шапки сайта, блоки контента и другие композиции, требующие организации и структурирования.
Перегруппировка слоев в Figma
Перегруппировка слоев в Figma - это важная возможность, позволяющая вам организовывать и изменять структуру слоев в вашем проекте. Вот несколько шагов по перегруппировке слоев:
1. Перемещение слоя в другую группу:
- Выберите слой, который вы хотите переместить.
- Перетащите выбранный слой и бросьте его на группу, в которую вы хотите его добавить.
- Слой теперь станет частью новой группы.
2. Перемещение слоя внутри группы:
- Если вы хотите изменить порядок слоев внутри развернутой группы, перетащите слой в нужное место между другими слоями.
- Полоса-маркер покажет, куда будет помещен слой после броска.
3. Убирание слоя из группы:
- Чтобы убрать слой из группы, перетащите его за пределы группы в область выше или ниже группы в панели слоев.
- Слой теперь станет частью основного списка слоев, а не вложенной группы.
Перегруппировка особенно полезна при реорганизации элементов дизайна, а также при точной настройке порядка и структуры слоев в вашем проекте.
Выделение слоев в Figma
В Figma, выделение слоев - это важная часть работы с элементами в проекте. Вот несколько способов выделения слоев:
1. Обычное выделение:
- Чтобы выделить слой на холсте, кликните по нему левой кнопкой мыши. Слой подсветится, и его свойства будут отображены в панели справа.
2. Выделение нескольких слоев:
- Зажмите левую кнопку мыши и нарисуйте рамку вокруг слоев, которые вы хотите выделить. Все слои внутри рамки будут выделены.
3. Двойной клик для вложенных слоев:
- Двойной клик по слою развернет группу или компонент и позволит вам выделить слои внутри.
4. Глубокое выделение:
- Удерживайте клавишу Command (на Mac) или Ctrl (на Windows) и кликайте по слою, чтобы выделить самый вложенный слой. Это особенно полезно, когда есть несколько уровней вложенности.
5. Выделение в панели слоев:
- Кликните на слое в панели слоев справа, чтобы выделить его на холсте. Это полезно, когда слои перекрывают друг друга, и вы хотите точно выбрать нужный слой.
6. Использование комбинации Shift:
- Удерживайте клавишу Shift, чтобы добавлять дополнительные слои к текущему выделению или убирать их из него.
Выбор правильных слоев важен для точной работы с элементами вашего дизайна и удобства в последующем редактировании.
Выбор нескольких слоев в Figma: Новый способ
В Figma существует удобный способ выбирать несколько слоев одновременно с использованием комбинации клавиш. Вот как это делается:
1. Выбор в панели слоев:
- Зажмите клавишу Command (на Mac) или Ctrl (на Windows).
- Кликайте по слоям в панели слева. Каждый клик добавит слой к текущему выделению.
2. Выбор на холсте:
- Зажмите клавишу Shift.
- Выберите слои на холсте, кликая по каждому из них. Каждый новый слой будет добавляться к текущему выделению.
Этот способ удобен, когда вам нужно быстро выделить несколько слоев и, например, создать группу или применить к ним какие-то операции.
Помните, что использование комбинации клавиш может варьироваться в зависимости от вашей операционной системы (Mac или Windows), и иногда это может потребовать некоторой практики, чтобы привыкнуть к новым горячим клавишам.
Выбор диапазона слоев в Figma:
Если вам нужно выбрать диапазон слоев в панели слоев Figma, вы можете воспользоваться следующим методом:
1. Выбор первого слоя:
- Кликните на первом слое в панели слоев.
2. Выбор последнего слоя:
- Зажмите клавишу Shift.
- Кликните на последнем слое в диапазоне.
Теперь все слои, находящиеся между первым и последним, будут выделены. Это удобно, если вам нужно оперативно выбрать большой диапазон слоев для выполнения определенных действий, таких как группировка, перемещение или изменение свойств.
Этот метод также применим в комбинации с предыдущими способами выбора, такими как использование клавиш Command (на Mac) или Ctrl (на Windows) для добавления слоев к текущему выделению.
Выбор перекрытого слоя в Figma:
Когда слой полностью перекрыт другим и его сложно выделить на рабочей области, вы можете воспользоваться следующим методом:
1. Используя панель слоев:
- Кликните правой кнопкой мыши по области, где находится перекрытый слой.
- Из выпадающего меню выберите "Select Layer".
2. С помощью комбинации клавиш:
- Зажмите клавишу Ctrl.
- Нажмите правой кнопкой мыши в область перекрытия слоя.
- Вместо контекстного меню сразу появится список слоев.
Эти методы помогут вам выбрать даже те слои, которые скрыты или заблокированы. Однако они не применимы к невидимым слоям.
Снятие выделения в Figma:
Чтобы снять выделение в рабочей области:
1. С использованием Shift:
- Зажмите клавишу Shift.
- Кликните по нужному объекту.
- Это снимет выделение с данного объекта.
2. Через рамку:
- Нарисуйте рамку вокруг объектов, отмеченных для снятия выделения.
- Выделение будет снято с объектов, попавших в рамку.
3. Через панель слоев:
- Зажмите клавишу Command в MacOs или Ctrl в Windows.
- Кликните на выделенном объекте в панели слоев.
- Это снимет выделение с данного объекта в рабочей области.
Эти методы позволяют эффективно управлять выделением объектов в Figma.
Блокировка и скрытие слоев:
Иногда в процессе работы вы сосредотачиваетесь только на определенном элементе интерфейса, и выделение других частей дизайна может быть мешающим. В таких случаях полезными оказываются инструменты блокировки и скрытия слоев. Вот как использовать эти функции:
Блокировка слоев:
1. Выберите слои, которые вы хотите заблокировать.
2. Наведите курсор на выделенные объекты в рабочей области или в панели слоев.
3. Нажмите правую кнопку мыши.
4. Выберите "Lock/Unlock" в контекстном меню.
Или используйте горячие клавиши:
- MacOs: Shift + Command + L
- Windows: Shift + Control + L
Разблокировка слоев:
1. Выберите заблокированные слои.
2. Наведите курсор на выделенные объекты в рабочей области или в панели слоев.
3. Нажмите правую кнопку мыши.
4. Выберите "Lock/Unlock" в контекстном меню.
Скрытие слоев:
1. Выберите слои, которые вы хотите скрыть.
2. Наведите курсор на выделенные объекты в рабочей области или в панели слоев.
3. Нажмите правую кнопку мыши.
4. Выберите "Show/Hide" в контекстном меню.
Или используйте горячие клавиши:
- MacOs: Shift + Command + H
- Windows: Shift + Control + H
Показ скрытых слоев:
1. Выберите скрытые слои.
2. Наведите курсор на выделенные объекты в рабочей области или в панели слоев.
3. Нажмите правую кнопку мыши.
4. Выберите "Show/Hide" в контекстном меню.
Или используйте горячие клавиши:
- MacOs: Shift + Command + H
- Windows: Shift + Control + H
Эти инструменты позволяют эффективно управлять видимостью и редактированием слоев в Figma.
Копирование, вырезание и вставка слоя:
Копирование слоя:
- Выберите объект, который вы хотите скопировать.
- Нажмите Command + C в MacOs или Ctrl + C в Windows.
Вырезание слоя:
- Выберите объект, который вы хотите вырезать.
- Нажмите Command + X в MacOs или Ctrl + X в Windows.
Вставка слоя:
- Выберите объект или снимите выделение, если вы хотите вставить в текущем месте.
- Нажмите Command + V в MacOs или Ctrl + V в Windows.
Вставка в позицию другого объекта:
- После копирования или вырезания выберите объект.
- Нажмите Shift + Command + V в MacOs или Shift + Ctrl + V в Windows.
Эти команды обеспечивают удобный способ копирования, вырезания и вставки объектов в Figma.
Названия слоев:
Управление слоями также включает в себя правильное именование, что значительно упрощает работу с проектом. Вот как переименовывать слои:
Переименование слоя:
- Выберите нужный объект.
- Нажмите Command + R в MacOs или Ctrl + R в Windows.
- Измените название слоя.
- Нажмите Enter, чтобы сохранить изменения.
Переименование группы слоев:
- Выберите несколько слоев.
- Нажмите Command + R в MacOs или Ctrl + R в Windows.
- Введите новое название и нажмите Enter.
Хорошие практики включают в себя использование осмысленных имен и избегание пробелов, вместо них используйте дефисы или нижние подчеркивания. Это улучшает читаемость и удобство в дальнейшей работе с проектом.
Импорт изображений в Figma:
Референсы и мудборды:
Референс (Reference):
- Пример изображения или несколько примеров, предоставленных заказчиком, чтобы показать, что он хочет получить в результате вашей работы.
- Референсы могут касаться конкретных аспектов дизайна, таких как цвета, структура шапки, навигационное меню и др.
- Референсы делают техническое задание более понятным и конкретизируют ожидания клиента.
Мудборд (Mood Board):
- Подборка изображений, составленная дизайнером, чтобы показать заказчику и получить его отзыв на ранних этапах проекта.
- Мудборд помогает прощупать вкус клиента и понять его предпочтения.
- Изображения из мудборда могут использоваться как отправная точка для начала дизайна (референсы).
Импорт изображений в Figma:
1. Импорт из буфера обмена:
- Найдите картинку в браузере.
- Правой кнопкой мыши кликните по изображению.
- Выберите "Copy Image" для копирования изображения в буфер обмена.
- Перейдите в Figma.
- Нажмите `Command + V` в MacOs или `Ctrl + V` в Windows для вставки изображения из буфера.
- Изображение появится в рабочей области.
2. Импорт из файла:
- Перетащите файл изображения на рабочую область Figma.
- Позиция вставленного изображения зависит от места, где вы отпустите левую кнопку мыши после перетаскивания.
3. Инструмент "Пипетка" (Eyedropper Tool):
- Позволяет считать цвет из любого примитива и назначить его выбранному объекту.
- Используется для подбора цветовой гаммы на основе изображений.
4. Быстрое присваивание цвета:
- Выберите объект(ы), которые нужно перекрасить.
- Нажмите `I` или `Ctrl + C` для активации пипетки.
- Наведите на точку рабочей области, из которой нужно считать цвет.
- Сделайте клик левой кнопкой мыши для подтверждения.
5. Присваивание цвета пикселям изображения:
- Повторите те же шаги, что и в предыдущем пункте, наводя пипетку на изображение.
6. Точное позиционирование:
- Выделите объект, который вы хотите точно подогнать.
- Зажмите `Option` в MacOs или `Alt` в Windows.
- Подведите курсор к другому объекту, чтобы увидеть расстояние в пикселях.
- Одновременно изменяйте положение выделенного объекта с помощью кнопок-стрелочек.
7. Как поделиться проектом:
- Нажмите кнопку "Share" в правом верхнем углу.
- Выберите "Anyone with the link" для доступа по ссылке.
- Нажмите "Copy link" и отправьте ссылку на проект.
Эти инструменты помогут вам эффективно работать с изображениями в Figma, создавая референсы, мудборды и улучшая дизайн.
Самостоятельная работает
1. Вернитесь к файлу с первым и вторым заданием темы «Регистрация. Интерфейс. Первые шаги. Навигация»:
- Группируйте связанные слои вместе, используя логическую структуру (например, группируйте элементы формы регистрации, элементы навигации и т.д.).
- Переименуйте слои так, чтобы названия были понятными и отражали содержимое каждого слоя.
2. Behance:
- Посетите сайт Behance и найдите иллюстрации, которые вам нравятся.
- Кликните на изображение для увеличения и скопируйте его себе (используйте команду "Copy Image").
- В Figma создайте копию каждой картинки и нарисуйте 4-8 кружков, окрашенных в основные цвета иллюстрации с использованием инструмента пипетки.
3. UI web app на Unsplash:
- Введите запрос "UI web app" в поисковой строке Behance.
- Найдите простой дизайн сайта и перерисуйте его в Figma, используя свои изображения (замените их с сайта Unsplash).
4. Awwwards:
- Посещайте сайт Awwwards и просматривайте лучшие примеры веб-дизайна.
- Используйте их в качестве вдохновения для улучшения своих навыков и воссоздания дизайнов в Figma.
5. Задание повышенной сложности (по желанию):
- Нарисуйте любую страницу из двух других сайтов, которые вы найдете на Behance или Awwwards.
Помните об использовании групп и горячих клавиш в Figma для более эффективной работы. Уделите внимание деталям и старайтесь внедрить приемы, изученные в предыдущих уроках.