Тема 4. Вайрфрейминг

Четвёртая тема курса направлена на изучение базовых инструментов приложения Figma и принципов создания варфреймов

Лекция: Что такое и зачем нужны вайрфреймы?

Воркшоп: Знакомство с программой Figma

Задание: Разработать вайрфрейм-страницы приложения

План лекции

1. Понятие «вайрфрейм»: отличительные особенности
2. Функции вайрфрейминга
3. Этапы разработки вайрфреймов
4. Основные правила в разработке вайрфреймов

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

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

Работа над ва

План воркшопа

1. Начало работы: создание проекта, страниц
2. Создание фреймов, секций, слоев и групп
3. Работа с сетками
4. Создание, копирование и изменение объектов: шейпы и кривые
5. Форматирование текста
6. Использование изображений и маски
7. Расположение объектов: отступы и выравнивание
8. Экспортируем проект

При открытии приложения нас встречает страница с черновиками. Чтобы создать файл проекта, воспользуемся кнопкой «+Design file».

Двойным нажатием на название проекта мы входим в режим редактирования и изменяем название файла.

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

Страницы — удобная функция для организации различных элементов своего проекта. Они становятся доступны при открытии их вкладки в верхней части левого блока. В этом месте мы можем создавать, редактировать и удалять страницы, а также перемещать их между собой.

Рабочее пространство — центральная часть вашего проекта. В ней вы можете создавать различные элементы, экраны, взаимодействовать с ними и размещать так, как вам удобно.

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

Чтобы переименовать фрейм, достаточно два раза нажать на его название в рабочем пространстве, а чтобы удалить — выделить и нажать клавишу «Delete».

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

Секция — поле, которое позволяет разделять ваши фреймы и элементы по смысловым группам. В Figma секции позволяют автоматически выделить фреймы, готовые к разработке. В таком случае страница и секция подсвечиваются иконкой режима разработки.

Правила удаление и переименования фреймов одинаково работают и для секций.

Также во вкладке создания областей можно выбрать инструмент для формирования слайсов. К ним мы вернёмся позже, когда будем разбирать экспортирование.

Вернёмся к блокам по бокам от рабочего пространства. Под вкладкой создания страниц расположена зона слоёв.

Слои — части вашего фрейма. Это могут быть векторные объекты, текст, изображения, видео. Кроме того, слои могут объединяться в группы. Для того, чтобы собрать несколько элементов в группу, выделите их, нажмите на правую кнопку мыши и выберите «Group selection». Вы также можете создать из объектов фрейм. Нажав на правую кнопку мыши ещё раз, выберите «Frame selection».

В этом блоке вы также можете переименовывать слои — как уже привычные фреймы и секции, так и любые другие элементы.

Создание приложения невозможно без работы с сетками. В Figma есть два способа их создать — с помощью макетов сеток или с помощью направляющих.

Направляющие — наиболее привычный формат для тех, кто работал с сетками в Photoshop. Для начала включим линейки с помощью Shift + R или через View > Rulers.

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

Чтобы удалить направляющую — выделите ее левой кнопкой мыши и нажмите «Delete».

Вариант создания сеток с помощью макетов более удобен для тех, кто создает приложения и веб-сайты.

Для этого выделите фрейм, на котором вы собираетесь создать сетку и в правом блоке нажмите «+» в разделе «Layout grid».

Автоматически создастся сетка размером 10 на 10 пикселей, напоминающая миллиметровую бумагу. Для нее доступно только два вида настроек — изменение размера клетки и цвета направляющих линий. Такая сетка хорошо подойдет для создания модульных изображений.

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

Здесь, помимо цвета, находится большее количество настроек: Count — количество колонок и рядов Type — выравнивание колонов и рядов Width — ширина колонок и рядов Margin — отступы от краёв фреймов Gutter — отступы между колонками и рядами

Figma — программа, направленная на веб-разработку, поэтому все элементы, которые создаются с помощью ее инструментов — векторные, то есть легко масштабируются без потери качества.

В качестве основных векторных фигур (шейпов) в Figma представлены — прямоугольник, линия, стрелка, эллипс, полигон (треугольник) и звезда.

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

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

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

Созданные фигуры возможно объединять и вычитать друг из друга. Для этого необходимо выделить два шейпа и выбрать инструмент «Selection» в верхней панели.

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

Перо — еще один важный инструмент в Figma. С его помощью можно создавать объекты произвольных размеров. В дополнение к нему доступен инструмент карандаш, позволяющие отрисовать векторную линию.

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

Задача Разработать вайрфрейм-страницы приложения

Условия

1. Создать проект в Figma
2. На основе User Flow создать фреймы для каждой страницы приложения
3. Разработать вайрфрейм для каждого экрана

Результат Вайрфреймы для каждой страницы из схемы приложения