Урок 9. Фреймы. Сетки. Направляющие. Компоненты

В третьей части по основам Figma научимся работать с фреймами, страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности скрывает в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и компонентами.

Вы станете на один шаг ближе к работе с большими и серьезными проектами.

• Фреймы. Сравнение с группами
• Создание фрейма. Изменяем размер и заливку
• Как разместить объекты внутри фрейма
• Простая маска – обрезаем содержимое фрейма
• Добавление сетки
• Добавление колонок и рядов
• Направляющие и линейка
• Примеры использования фреймов
• Поведение содержимого фрейма при изменении размера
• Первое знакомство с компонентами
• Виды ограничителей (Constraints)
• Как подогнать размер фрейма под содержимое
• Страницы и файлы
• Организация страниц
• Иерархия проекта
• Домашнее задание
• Выводы

Фрейми. Сравнение с группами

Фрейми в других программах называются артбордами (artboard). Но в Figma пошли своим путем и придумали уникальное название. И это вполне разумно, потому что фреймы имеют большие возможности и гибкость, чем артборды, например в Sketch невозможно поместить один артборд внутрь другого.

Frame с английского переводится как рамка, каркас, скелет. Если упростить, то фреймы можно сравнить с полотном художника или рабочей областью. Обычно фрейм (артборд) содержит дизайн одной страницы в определенном размере. Например, дизайнер может разместить рядом несколько фреймов с одной страницей для экрана ноутбука, планшета и смартфона.

На предыдущих уроках, рисуя целые страницы, мы из-за незнания использовали группы вместо фреймов. Давайте исправим этот недостаток. Теперь, работая с дизайном страницы/экрана, будем размещать все элементы внутри фрейма.

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

• Фрейм имеет размер и может иметь заливку цветом. В группах размер определяется автоматически, на основе размера всех объектов, которые находятся внутри. Это отличие позволяет экспортировать изображения с отступами с обеих сторон, что полезно при сохранении иконок. В настройках фрейма можно найти большой список шаблонов размеров от всевозможных экранов устройств (популярных смартфонов, умных часов и планшетов) и даже до истории Instagram или поста Facebook;
• Каждый фрейм имеет свою систему координат. Координаты объектов внутри будут отсчитываться относительно верхнего левого края границы фрейма;
• Фрейм может обрезать свой контент, который выходит за его пределы его рамок. То есть все, что находится вне фрейма, будет скрываться, если опция Clip content включена. Такая возможность называется маской;
• Фрейм может отображать разметку макета, а именно сетку, вертикальные и горизонтальные колонки, а также включать в себя направляющие. Эти инструменты предназначены для точного расположения и выравнивания объектов макета;
• При изменении размеров фрейма можно указать, как будут себя вести объекты. Например, кнопка может прилипнуть к верхней части экрана и растягиваться по ширине. Эта возможность называется ограничителями (constraints).

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

Создание фрейма. Изменяем размер и заливку

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

Далее самое интересное. В правой панели, подобно прямоугольнику, уже будет задан цвет заливки фона (раздел Fill). Вы можете изменять размер кадра старыми способами, потянув за край или установив точный размер в полях W (Width) и H (Height). Но теперь у нас есть новое выпадающее меню с шаблонами размеров в левом верхнем углу панели свойств – Frame. Просмотрите, какие шаблоны там есть, и попробуйте применить хотя бы несколько из них.

Как разместить объекты внутри фрейма

Есть несколько простых способов:

• Выделить и перетащить все объекты внутрь рамки;
• Выделить, вырезать нужные объекты (Command + X на macOs или Ctrl + X на Windows) и вставить (Command + V на macOs или Ctrl + V на Windows) после того, как выделили рамку.

После этих манипуляций объекты будут внутри фрейма, что будет видно по панели слоев, ведь вставленные объекты будут отображаться со смещением (как и в группах). Попробуйте выделить объект внутри фрейма, обратите внимание на значения координат X и Y – они изменились, ведь теперь верхний левый угол кадра – это новое начало координат.

Простая маска – обрезаем содержимое фрейма

Используя опцию Clip content на панели свойств, можно обрезать содержимое фрейма по его прямоугольной границе, которая зависит от ширины (параметр W – Width) и высоты кадра (параметр H – height). Такой прием называется маской. Таким образом, можно скрыть часть объектов, используя форму другого объекта, в нашем случае это фрейм и прямоугольная форма. Вот вам аналогия: вырезав квадратное отверстие в бумаге и наложив ее на фотографию, вы получите пример использования маски в реальном мире.

Добавление сетки

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

1. Выделяем фрейм;
2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится сетка со стандартными настройками красного цвета с шагом 10 пикселей;
3. Нажимаем на иконку слева от надписи Grid (10px), чтобы настроить сетку. В выпадающем окне можем задать шаг сетки (Size), цвет линий (Color) и прозрачность;
4. Сетку можно временно скрыть или удалить, нажав иконку глаза или минус соответственно справа;
5. Можно добавить несколько сеток разных цветов внутри одного фрейма при необходимости.
6. Чтобы временно скрыть сетки на всех кадрах, нажмите Ctrl + G. Повторите комбинацию клавиш, чтобы показать их снова.

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

В целом сетки используются довольно редко. А вот колонки, о которых пойдет речь далее – постоянно.

Добавление колонок и рядов

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

1. Выделяем фрейм;
2. Кликаем по плюсику + напротив раздела Layout Grid – отобразится такая же стандартная сетка;
3. Нажимаем на иконку слева от надписи Grid (10px). В окне, которое появится, нажимаем на Grid в левом верхнем углу;

4. В меню, которое появится, выбираем Columns. Сразу после этого кроме цвета и прозрачности появится ряд новых параметров:

   • Count – количество колонок;
   • Type – тип построения колонок. Можно выбрать одну из опций: Left – колонки размещаются по левому краю, Right – справа, Center – выравниваются по центру, Stretch – растягиваются на всю ширину кадра;
   • Width – ширина колонки в пикселях. Этот параметр рассчитывается автоматически, если тип колонок выставлен в Stretch;
   • Offset – отступ слева если тип колонок выставлен в Left. Для типа колонок Right это отступ справа. Для типа Stretch это отступ с обоих сторон. Этот параметр автоматически рассчитывается для типа колонок Center;
   • Gutter – расстояние между колонками.

Давайте настроим одну популярную сетку из фреймворка Bootstrap, которую часто используют разработчики при верстке веб-страниц. Для этого нам понадобится фрейм шириной в 1440 пикселей и высотой в 900 пикселей, что соответствует размерам экрана типичного ноутбука. Сама сетка шириной составляет 1140 пикселей и состоит из 12 колонок. Ширина каждой колонки – 65 пикселей, а расстояние между ними – 30 пикселей.

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

Кроме колонок есть возможность задавать ряды. Для этого достаточно выбрать Rows в меню, которое выпадает. Все параметры идентичны колонкам, лишь Width (ширина) заменено на Height (высота). Мне не доводилось использовать этот вид сетки, но, возможно, в отдельных случаях он может быть полезным.

Направляющие и линейка

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

1. Выделяем фрейм, если вам нужна линия именно внутри фрейма;
2. Включаем линейку с помощью комбинации клавиш Shift + R. Она появляется сверху и слева по краям рабочей области и показывает границы выделенных объектов в пикселях. Запомните, что направляющие отображаются только с включенной линейкой;
3. Кликаем и удерживаем левую кнопку мыши внутри верхней или левой линейки, чтобы создать горизонтальную или вертикальную направляющую соответственно;
4. Тянем курсор к центру экрана. Как только вы выйдете за пределы линейки на рабочей области, появится направляющая. Тяните её в нужную вам точку;
5. Отпускаем левую кнопку мыши, чтобы зафиксировать позицию направляющей;

Чтобы изменить положение направляющей, перетащите её на новую позицию.

Чтобы удалить направляющую, нужно её выделить, кликнув по ней. Выделенная линия окрасится в синий цвет. Далее нажимаем кнопку Delete на клавиатуре. Также можно просто перетащить направляющую область линейки, и она тоже будет удалена.

Чтобы временно скрыть все направляющие, скройте линейку с помощью клавиш Shift + R.

А теперь важный момент. Как вы помните из предыдущего урока, предварительно выделив любой объект и зажав кнопку Option у MacOs или Alt у Windows можно увидеть точное расстояние в пикселях, подведя курсор к другому объекту. Так вот этот же прием работает и для направляющих, что бывает очень уместно. Давайте посмотрим, как это выглядит на практике (приклеивание объектов к направляющим и подсказки о расстоянии до них):

Примеры использования фреймов

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

• Дизайну веб-страниц различных устройств (настольный ПК, ноутбук, смартфон);
• Дизайну экранов мобильных приложений для планшетов, смартфонов, умных часов;
• Набора базовых цветов;
• Набора компонентов интерфейса (кнопки, переключатели, иконки, слайдеры, карточки, шапка, подвал сайта и т.д.);
• Набора шрифтов (разные начертания и размеры);
• Материалов социальных сетей (истории, посты, баннеры, иллюстрации, инфографика).

Поведение содержимого фрейма при изменении размера

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

• Позволяет закрепить позицию объекта по вертикальной или горизонтальной стороне фрейма. В таком случае при растягивании фрейма он сохранит свой размер;
• Или растянет объект по ширине и/или высоте фрейма.

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

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

Первое знакомство с компонентами

Компоненты – это специальный вид объектов, которые создаются на основе фреймов для построения элементов интерфейса, что часто используются. Звучит сложно, но на самом деле с помощью компонентов создают шаблоны кнопок, выпадающих меню, навигации и другого. Чтобы впоследствии не рисовать каждый раз, например, кнопку, вы копируете компонент кнопки, выставляете нужный размер и цвет, изменяете текст – и всё готово! Наборы таких компонентов в терминологии Figma называются библиотекой компонентов. А у дизайнеров они называются UI Kit (читается юай кіт).

Зачем же так все усложнять? На самом деле компоненты способны сэкономить десятки часов работы. Представьте себе ситуацию: у вас есть 50 экранов веб-приложения. На каждом есть кнопки. Вдруг вам приходит правка "закруглить все кнопки". Если дизайн создавался с помощью компонентов, то вам достаточно изменить только родительский компонент (шаблон кнопки), а остальные изменения произойдут автоматически. Если все делалось без компонентов, то вам придется вручную изменить каждую кнопку.

В этом и заключается вся сила компонентов. А ограничители (Constraints) играют здесь одну из ключевых ролей.

Компонентам у нас будет посвящен отдельный материал, не стоит пугаться их сложности. Более того, у компонентов есть и другие особенности, которые мы постепенно будем затрагивать. В настоящее время мы только готовим фундамент для дальнейшей работы. А пока что, чтобы понять пользу компонентов, посмотрите на пример ниже. Сверху находится родительский компонент (шаблон), а внизу три дочерних компонента, которые наследуют его свойства. В самом низу находится кнопка, сделанная на основе обычного фрейма. Изменяя родительский компонент, мы автоматически изменяем всех дочерних.

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

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

Виды ограничителей (Constraints)

Давайте создадим несколько кнопок внутри фреймов с разными настройками ограничителей. Рассмотрим самые простые из них:

• Вертикальные ограничители:

  • Top – объект прилипает к верхнему краю фрейма;
  • Center – объект центрируется по высоте фрейма;
  • Bottom – объект прилипает к нижнему краю фрейма.

• Горизонтальные ограничители:

  • Left – объект прилипает к левому краю фрейма;
  • Center – объект центрируется по ширине фрейма;
  • Right – объект прилипает к правому краю фрейма.

Я создала 9 фреймов (кнопок) со всеми возможными комбинациями вышеописанных ограничителей. Посмотрите, как ведут себя объекты внутри фреймов во время масштабирования.

Существует еще несколько видов ограничителей:

• Left & Right – вид горизонтального ограничителя. Принуждает левый край объекта прилипнуть к левой стороне фрейма, а правый край – к правой стороне фрейма. Позволяет растягивать объект по ширине с фиксированными отступами слева и справа;
• Top & Bottom – вид вертикального ограничителя. Принуждает верхнюю грань объекта прилипнуть к верхней стороне фрейма, а нижнюю грань – к нижней стороне фрейма. Позволяет растягивать объект по высоте с фиксированными отступами сверху и снизу;
• Scale – объект растягивается пропорционально фрейму по ширине и/или высоте. В этом случае отступы до фрейма не фиксируются, а изменяются пропорционально его размеру.

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

Как подогнать размер фрейма под содержимое

Если нужно обрезать фрейм ровно за границами его объектов, достаточно нажать соответствующую кнопку в панели свойств:

Страницы и файлы

Кроме фреймов в Figma существуют структурные единицы высшего порядка:

• Страницы – содержат фреймы внутри себя;
• Файлы – состоят из страниц;

Всё это время мы работали внутри единственной страницы одного файла. Чтобы создать новую страницу:

• Кликаем на название текущей страницы Page 1 в верхнем правом углу левой панели, чтобы показать список всех страниц;
• Кликаем на плюс +, чтобы создать новую страницу;
• Вводим название новой страницы;
• Нажимаем Enter, чтобы сохранить название.

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

• Copy Link to Page – скопировать ссылку на страницу в буфер обмена, чтобы поделиться;
• Duplicate Page – сделать копию;
• Delete Page – удалить. Эта команда доступна только если у вас есть хотя бы две страницы;
• Rename Page – переименовать страницу. Как и с слоями, работает двойной клик.

Посмотрим, как выглядит работа со страницами на практике:

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

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

Организация страниц

Давайте посмотрим, из чего состоит типичный проект. Сначала это единая Page 1, но по мере роста появляются страницы с такими названиями:

• Имя пользовательского потока – название пользовательского потока/сценария. То есть, каждый отдельный сценарий размещается на отдельной странице. В некоторых случаях можно разместить несколько сценариев на одной странице, если они схожи (например, сценарии регистрации, сброса пароля, входа на сайт);
• Ссылки/Мудборды – референсы от клиента и созданные на их основе мудборды. Также здесь может быть информация по проекту;
• Эскиз – страница с обложкой проекта, которая отображается на превью в разделе Drafts/Recent. Чтобы ее применить, нужно создать фрейм размером 1920х960 пикселей, нарисовать саму обложку и в выпадающем меню с правого клика на кадре выбрать Использовать как Эскиз;
• Компоненты – страница с компонентами, которые вы используете. Часто приходится импортировать целые библиотеки компонентов, в таком случае пишется название библиотеки и ее версия. Например, Ant Design UI Kit (1.2) (ant.design v4 update) (Light Theme);

У каждого дизайнера свои правила и привычки именования и структурирования страниц, строгих догм тут нет. Я лишь показала, как это выглядит в некоторых случаях у меня. Другой пример: создают страницу UI с кучей экранов (фреймов) финального дизайна и UX – для всех вайрфреймов.

Иерархия проекта

Обычно хватает одного файла, но на больших проектах иногда отдельные файлы распределяют дизайн по платформам. Например: Web, Mobile, Desktop. Иногда в отдельный файл выносят библиотеку компонентов, но учтите, что вам понадобится платная подписка.

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

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

1. Выберите сайт на свой вкус и нарисуйте его шапку (хедер), подвал (футер) или любую другую его часть с использованием ограничителей (Constraints). Ваша задача настроить содержимое фрейма таким образом, чтобы часть элементов прилипала к левой стороне, а другая часть к правой. Например, логотип может использовать ограничители Top и Left. Правильно выполненное задание должно содержать фрейм для каждой части сайта (отдельный фрейм для хедера, отдельный фрейм для футера и так далее). А уже все эти фреймы должны находиться внутри еще одного фрейма (дизайна сайта);
2. Создайте 9 кнопок и настройте ограничители таким образом, чтобы они повторяли поведение, как на первом видео в разделе Виды ограничителей (Constraints) этого урока. Чтобы проверить, выделите все 9 фреймов и изменяйте размер, как на видео. Используйте комбинации ограничителей включая top, center, bottom, left, right. Каждая кнопка должна представлять собой отдельный фрейм и содержать как минимум заливку и текст;
3. Нарисуйте форму обратной связи. Там должны быть поля «Имя», «Email», «Сообщение» и кнопка «Отправить». Поля должны тянуться вместе с формой, когда мы изменяем ее ширину. Подсказка: понадобятся ограничители Left и right. Форма обратной связи должна находиться в отдельном фрейме.

Чтобы проверить это домашнее задание, мне понадобится доступ к файлу Figma с возможностью вносить правки, чтобы посмотреть на структуру фреймов и выставленные ограничители. Для этого убедитесь, что вы выбрали опцию can edit напротив Anyone with the link. Далее нажимаем на Copy link и отправляем мне в директ. Пожалуйста, впредь все домашние задания отправляйте с такими настройками. Если забыли, как поделиться файлом писала в этом уроке.

Выводы

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

Материал очень сложный, особенно по поводу компонентов и ограничителей. Перечитайте через несколько дней, потренируйтесь. Это не усваивается на 100% с первого раза. Следующие уроки будут короче, но я постараюсь писать их чаще.

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