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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Highlight and drag all objects inside the frame boundaries;
• Highlight, cut the needed objects (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. Повторите комбинацию клавиш, чтобы показать их снова.

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

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

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

Vertical columns are often used in web page design. Their configuration is a bit more complicated than the grid:

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 можна побачити точну відстань у пікселях, підвівши курсор до іншого об'єкта. Так от цей же прийом працює і для направляючих, що буває дуже доречним. Давайте подивимося, як це виглядає на практиці (приклеювання об'єктів до направляючих та підказки про відстань до них):

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

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

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

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

Если объект находится внутри фрейма, вы можете указать, как ему вести себя при изменении размеров фрейма. Эта возможность называется 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, но по мере роста появляются страницы с такими названиями:

• User flow name – название пользовательского потока/сценария. То есть, каждый отдельный сценарий размещается на отдельной странице. В некоторых случаях можно разместить несколько сценариев на одной странице, если они схожи (например, сценарии регистрации, сброса пароля, входа на сайт);
• References/Moodboards – референсы от клиента и созданные на их основе мудборды. Также здесь может быть информация по проекту;
• Thumbnail – страница с обложкой проекта, которая отображается на превью в разделе Drafts/Recent. Чтобы ее применить, нужно создать фрейм размером 1920x960 пикселей, нарисовать саму обложку и в выпадающем меню с правого клика на кадре выбрать Use as Thumbnail;
• Components – страница с компонентами, которые вы используете. Часто приходится импортировать целые библиотеки компонентов, в таком случае пишется название библиотеки и ее версия. Например, 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 – будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.

Пройти тест

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

Пройти тест

Продолжить обучение