Где искать?
Все слои можно увидеть в панели Layers слева.
Урок 3
СЛОИ, ГРУППЫ И ФРЕЙМЫ
Сначала восстановишь пейзаж, меняя порядок слоёв. Затем создашь фрейм и собственные обои для телефона.
В конце урока ты создашь собственные обои для телефона.
LayersGroupFrame1080 × 1920 px
Слои
ЧТО ТАКОЕ СЛОЙ?
Теперь нарисуй внутри фрейма три фигуры разных цветов так, чтобы они перекрывали друг друга. Каждая фигура появится на отдельном слое. Слоем также может быть линия, текст, изображение, группа или фрейм.
Что сверху?
Чем выше слой находится в списке, тем выше он расположен в композиции.
Объекты перекрываются?
Если один объект перекрывает другой, их порядок можно изменить.
Как изменить порядок объектов
Выдели объект и нажми на него правой кнопкой мыши. В меню можно выбрать:
Bring forward
Поднять на один уровень.
Ctrl+]
Send backward
Опустить на один уровень.
Ctrl+[
Bring to front
Поместить выше всех.
]
Send to back
Поместить ниже всех.
[
Также слой можно перетащить мышкой вверх или вниз прямо в панели Layers. Сочетания на карточках работают в английской раскладке на Windows.
Попробуй внутри фрейма «Обои». Меняй порядок трёх фигур несколькими способами. Посмотри, как меняется рисунок и порядок строк в Layers.
Порядок в работе
ПОНЯТНЫЕ НАЗВАНИЯ СЛОЁВ
Когда объектов становится много, названия вроде Rectangle 12, Ellipse 7 и Group 4 становятся неудобными. Переименовывай важные слои так, чтобы сразу было понятно, что на них находится.
Было
Rectangle 12Ellipse 7Group 4
Стало
ФонСолнцеОблака
Другие понятные названия: Горы, Декор.
Группы
СОБИРАЕМ ВМЕСТЕ
Несколько объектов можно объединить в группу. Например, если несколько фигур вместе образуют облако, цветок, узор или другой элемент.
Объединить
Выдели нужные объекты и нажми:
Ctrl+G
Теперь их можно перемещать вместе.
Разделить
Чтобы разделить группу, нажми:
Ctrl+Shift+G
Назвать
Группы тоже лучше переименовывать.
Скрыть или заблокировать слой
Скрыть или показать
Наведи мышь на строку слоя в панели Layers слева. Справа появится значок глаза. Нажми на него, чтобы скрыть слой. Нажми ещё раз, чтобы показать.
Панель Layers слева
Фон
Заблокировать или разблокировать
Наведи мышь на строку слоя в панели Layers и нажми на значок замка. Слой нельзя будет случайно передвинуть. Нажми на замок ещё раз, чтобы разблокировать. Это удобно для фона.
Панель Layers слева
Фон
Задание 1
ВОССТАНОВИ КАРТИНКУ
Перед тобой готовый образец. В учебном файле находятся те же самые фигуры, но порядок слоёв перепутан.
Создать копию в Figma ↗
Кнопка создаёт копию шаблона. Для этого нужно войти в свой аккаунт Figma. Выполняй оба задания в своей копии.
1. Сравни
Измени порядок слоёв и получи картинку точно как на образце.
2. Собери
После этого объедини связанные элементы в группы.
3. Назови
Дай основным слоям понятные названия.
Фрейм
У РАБОТЫ ЕСТЬ ГРАНИЦЫ
До этого мы могли создавать фигуры в любом месте рабочего поля Figma. Но у готовой работы должны быть точные границы. Для этого используется Frame - фрейм.
Фрейм можно представить как лист бумаги или экран устройства. Всё, что относится к будущим обоям, мы будем размещать внутри одного фрейма.
Создаём экран телефона
Выбери инструмент Frame или нажми F.
Создай вертикальный фрейм.
Установи размеры: W - 1080 px, H - 1920 px.
Назови фрейм «Обои».
Получится вертикальная область с пропорциями экрана смартфона.
Основа композиции
СОЗДАЁМ ФОН
Начни внутри фрейма «Обои»: создай основу, поверх которой будут располагаться остальные фигуры.
Создай прямоугольник размером 1080 × 1920 px. Он должен полностью закрывать весь фрейм.
Выбери для него цвет или градиент.
Назови слой «Фон» и помести его в самый низ списка слоёв внутри фрейма.
Все остальные элементы композиции будут находиться выше него.
Сам фрейм тоже можно залить цветом, но в этом уроке мы специально создаём отдельный слой «Фон», чтобы потренироваться работать со структурой слоёв.
Clip content
ЧТО ЗА ГРАНИЦАМИ ФРЕЙМА?
Передвинь одну из фигур так, чтобы она пересекла край фрейма. Выдели фрейм и включи Clip content (скрыть содержимое за границей). Теперь снаружи видно только то, что находится внутри «Обои». При экспорте фрейма в PNG сохранится его видимая область размером 1080 × 1920 px.
Clip content выключен
Clip content включён
Как включить Clip content
Выдели сам фрейм «Обои». Проще всего нажать на его название в панели Layers.
Справа открой вкладку Design.
Найди раздел Layout.
Включи Clip content.
После этого части объектов, выходящие за границы фрейма, будут скрыты.
Не видишь Clip content? Проверь, что выделен именно фрейм, а не прямоугольник, круг или другой объект внутри него.
Важно
Фигура должна находиться внутри фрейма не только визуально, но и в панели Layers.
Правильно
▾ Обои
Декор
Круг
Волна
Фон
Декор
Круг
Волна
Фон
Все слои вложены во фрейм.
Неправильно
▾ Обои
ФонКругВолна
ФонКругВолна
Круг и волна находятся отдельно от фрейма.
Если слой находится отдельно от фрейма, он не является частью будущих обоев.
Задание 2 · Практическая работа
ОБОИ ДЛЯ ТЕЛЕФОНА
Создай фрейм «Обои» размером 1080 × 1920 px и собери внутри собственные обои для смартфона. Добавь фон и композицию из геометрических фигур.
Абстрактная композицияКосмосПейзажГеометрический узорМинималистичный фонСвоя идея
Используй знания предыдущих уроков: фигуры, заливки, градиенты, прозрачность и обводку.
Требования к работе
Фрейм 1080 × 1920 px
Отдельный слой «Фон»
Не менее 8 объектов
Не менее 3 разных типов фигур
Минимум 2 группы
Несколько объектов перекрывают друг друга
Некоторые элементы можно частично вывести за границы фрейма
Понятные названия основных слоёв и групп
Цвета или градиенты
Clip content включён
Оставь верхнюю часть композиции достаточно свободной - на экране телефона там обычно находятся часы и другие элементы интерфейса.
Финальная проверка
ПРОВЕРЬ СВОЮ РАБОТУ
Отмечай пункты, когда проверишь их в Figma.
Отмечено: 0 из 7
Готово!
СОХРАНИ ОБОИ
Выдели сам фрейм «Обои». В правой панели найди раздел Export и выбери формат PNG.
Нажми Export «Обои».
В окне сохранения выбери флешку.
Назови файл своим именем и сохрани.
Сохранится весь видимый фрейм размером 1080 × 1920 px.