Разработка дизайна приложения (2)

В предыдущей (первой) части мы создали страницы и фреймы для нашего стартового экрана и UI-кита. Сейчас мы займемся разметкой стартового экрана и созданием компонентов на странице с UI.

Ссылки на остальные части:

Часть первая — организационная
Часть третья — создаем дополнительные компоненты

Разметка

Переходим на страниц «Экран приветствия».

Для разметки в Figma используются линейки, но помимо линейки мы воспользуемся плагином Spacers, который поможет нам легко и быстро отмерить равные расстояния.

Добавление разметки - Spacers — Добавление разметки — Spacers

Плагины Figma - это просто

Если вы еще не знакомы с миром дополнений Фигмы, вам стоит это немедленно исправить. Установка плагинов в Фигму осуществляется до смешного просто: в карточке плагина надо только нажать кнопку «Install», после чего вы сразу же можете начать им пользоваться. Почти все плагины бесплатные, при этом некоторые из них просто незаменимы.

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

Вызываем Spacers и жмем на иконку «Config», чтобы задать собственные значения отступов. Я установил 20 и 25, но в дальнейшем мы скорее всего расширим этот ряд.

Выделяем наш фрейм и кликаем на квадраты с числами в окне плагина.

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

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

Теперь, когда мы подготовили все под основную разметку, мы включаем линейки (Shift + R), если они не включены. Понять это можно по наличию или отсутствию шкал вокруг рабочей области.

И перетаскиваем наши направляющие из шкал линеек на фрейм drug’n’drop’ом: кликаем на шкалу линейки, зажимаем и тащим на нужное нам место.

Делаем те же манипуляции с другой стороны:

На этом этапе Spacers нам пока не нужен, переключаем его в невидимый режим с помощью тумблера и закрываем окно плагина:

Зачем нам вообще разметка

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

Создаем календарь

Переходим на страницу «UI-кит».

Что мы хотим сделать

Календарь будет состоять из таких частей:

Число
График обильности
Применение лекарств
Обозначение самочувствия

Так как на календаре будет до 31 числа, мы создадим компонент для одного числа в нескольких состояниях и из этих компонентов соберем календарь (создав 31 экземпляр такого компонента на экране «Android»)

Так как я решил, что фон не будет белым, я сразу выберу цвет заливки для нашего фрейма с UI. Опускаем то, как именно я пришел к такому цвету, и сразу кликаем на фрейм и в параметрах справа меняем значение Fill:

Создадим квадрат, совпадающий по цвету с нашим фоном.

Зачем?

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

Выбираем инструмент Rectangle (R) и с зажатым Shift (чтобы получить именно квадрат, а не прямоугольник) растягиваем фигуру до размеров 45 на 45. Вы должны получить такой результат:

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

Почему 45 на 45

Мы создали экран Android шириной 360 пикселей и сделали отступы по 20 пикселей с каждой стороны. Мы хотим, чтобы календарь показывал 7 чисел в строке, поэтому ширина одного числа будет равна (360-20-20)/7, что примерно равно 45.

Теперь создадим круг с диаметром 40 пикселей и разместим его на нашем квадрате.

Выбираем инструмент Ellipse (O) (находится в выпадающем списке с инструментом «квадрат») и размещаем его поверх квадрата. В параметрах ставим ему стороны 40 и 40 пикселей.

Перетаскиваем его на квадрат так, чтобы подсказка показала нам совпадение и по высоте, и по ширине.

Выделяем сначала квадрат, а затем эллипс, и нажимаем сверху кнопку Substract Selection:

В итоге получаем квадрат с отверстием, как и планировали.

Добавим число

Выбираем инструмент Text (T) и растягиваем его примерно на наш квадрат, вводим текст:

После этого кликаем на свободное место и видим контур нашего текстового поля:

За направляющие растягиваем его ровно до размеров квадрата:

Теперь нам надо расположить наше число ровно в середине. Для этого мы выделяем текстовое поле и меняем настройки выравнивания в его параметрах: устанавливаем его высоту фиксированной, а расположение по высоте и ширине — по центру.

Переименовываем квадрат: в древе слоев дважды кликаем по названию квадрата «Substract» и переименовываем его в «Фон».

Добавим заполнение

Теперь мы добавим еще один прямоугольник и расположим его за нашим фоном:

Выбираем инструмент Rectangle (R) и растягиваем фигуру до размеров 45 на 25. Вы должны получить такой результат:

В древе слоев перетаскиваем его ниже слоя «Фон»:

Переименуем этот слой в «Заполнение»:

Исправим цвета

Теперь структурно у нас все готово, поэтому можно перекрасить слои так, чтобы хорошо смотрелось. Слой «Фон» я сделаю цвета фона фрейма:

Обратите внимание, что Figma подсказывает цвета, которые уже используются в проекте.

А слой «Заполнение» я сделаю другим цветом:

Число я сделаю белым:

Также я поменяю шрифт числа на «Montserrat». Для этого потребуется начать вводить название шрифта в поле Font в параметрах текстового слоя.

На этом этапе мы закончили с «рисованием» одной даты.

Создание компонента

Что такое компонент

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

Так как число у нас готово, мы выделяем три составляющие его слоя и нажимаем «Create Component» (Option + Command + K). Фигма сама объединит все выбранные слои в наш новый компонент.

Сразу переименуем его:

Новый компонент - число — Новый компонент — число

Добавим числа на экран приветствия

Переходим на страницу «Экран приветствия».

Теперь мы создадим числа календаря уже на экране «Android», но перед этим сделаем его заливку такого же цвета, как фон UI-кита:

Чтобы добавить компонент на экран, надо перейти во вкладку Assets, в которой содержатся все наши компоненты:

Добавить компонент можно перетащив его из Assets на нужное нам место. Первое число мы расположим на произвольной высоте, прижатым к нашей разметке слева: