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


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

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

Разметка

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

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

Добавление разметки - Spacers
Добавление разметки — Spacers
Плагины Figma - это просто

 

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

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


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

Настройка Spacers
Настройка Spacers

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

Добавленные фреймы Spacers
Добавленные фреймы Spacers

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

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

Размещение разметки
Размещение разметки

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

Размещение линеек
Размещение линеек

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

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

Размещение линеек
Размещение линеек
Размещение линеек
Размещение линеек

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

Скрыть фреймы Spacers
Скрыть фреймы 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-кита:

Цвет заливки экрана Android
Цвет заливки экрана Android

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

Вкладка Assets
Вкладка Assets

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

Добавление экземпляра
Добавление экземпляра

Создадим остальные числа, дублируя (Cmnd + D / Ctrl + D) этот элемент со смещением на его ширину:

  1. Выделяем элемент
  2. Жмем (Cmnd + D или Ctrl + D)
  3. Сдвигаем до появления подсказки
  4. Снова жмем (Cmnd + D или Ctrl + D), сдвиг Фигма подставит автоматически
Дублирование
Дублирование

 

Дублирование
Дублирование

Выделим наши элементы и объединим в группу (Cmnd + G):

Объединение в группу
Объединение в группу

Переименуем получившуюся группу в «Ряд». 

Группа
Группа

 

Название группы
Название группы

Продублируем эту группу со сдвигом в высоту числа:

Дублирование группы
Дублирование группы

Откроем последнюю группу и удалим лишние элементы:

Удаление лишних элементов
Удаление лишних элементов

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

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

 

Измененный текст компонентов
Измененный текст компонентов

Для удобства объединим все строки в одну группу и назовем ее «Календарь»

Группа с группами
Группа с группами
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки