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

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

Задача: разработать UI-кит и макеты экранов для дневника походов в туалет. Поехали!

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

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

Организация

Первым делом кликаем дважды на «Untitled» вверху и переименовываем наш проект, чтобы легко искать его в списке, а также чтобы было красивенько.

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

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

На странице UI-кит я создам фрейм (F), в который буду добавлять компоненты: выбираем инструмент Frame, растягиваем его по экрану.

В правой части в параметрах меняем значения длины W (Width) и H (Height) на нужные нам.

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

Что здесь будет

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

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

Так как мы целимся в Android, нам надо создать экран для подходящего устройства. В этом нам поможет инструмент Frame (F): выбираем его и в правой части находим нужный нам вариант.