Создай трекер сам. Быстро и просто с Figma

Создай планер, подходящий именно тебе. Или закажи дизайн у автора.

В этой статье ты узнаешь:

Где создают трекеры и чек-листы, если ты новичок.
Где искать картинки, иконки и идеи.
Как создать простой трекер привычек на месяц.

Какое приложение выбрать, если ты новичок.

Можно составить чек-лист онлайн в Canva. Создаешь учетную запись, выбираешь шаблон из библиотеки, добавляешь собственные изображения или выбираешь подходящие картинки из библиотеки Canva. Настрой изображения, добавь фотофильтры и отформатируй текст. Сохрани дизайн.

Второй вариант, это Adobe Experience Design — программа для разработки интерфейсов от Adobe Systems. Поддерживает векторную графику и веб-верстку и создает небольшие активные прототипы. Есть много обучающих бесплатных видео на YuoTube, как работать в этой программе.

Более подробно мы поговорим о Figma. Это онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. У нее очень простой интерфейс, удобные инструменты. Регистрируйся и приступим!

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

Искать вдохновение, вырабатывать насмотренность и брать идеи ты можешь на Pinterest, Dribbble, Behance.
Искать картинки, фотографии для своих работ можно на Unsplash - это веб-сайт, посвященный обмену фотографиями по лицензии Unsplash. На веб-сайте утверждается более 110 000 фотографов, которые создают фотографии и генерируют более 11 миллиардов фотографий в месяц в своей растущей библиотеке из 1,5 миллиона фотографий.
Иллюстрации для своей работы можно найти на unDraw. Там можно использовать генерацию цветных изображений, чтобы все иконки были в одном стиле.
Ещё один сервис бесплатных стоковых фото и видео от талантливых авторов - https://www.pexels.com/ru-ru/
Бесплатная библиотека иллюстраций на сайте https://lukaszadam.com/illustrations. Здесь вы найдете лицензионные изображения MIT SVG в различных формах и стилях.
Огромное количество бесплатных плагинов, шаблонов, иконок и остальной полезной информации для дизайнеров, в телеграмм канале - ЛЕБЕДЕВ ПЛАЧЕТ. Подписывайтесь! Чтобы не потерять.

Перейти на канал

Создаём простой трекер привычек на месяц

Скачать архив с материалами к уроку

Шаг 1.

Открываем Figma. Начинаем с создания нового документа - справа находим Drafts и нажимаем +. Выбираем Frame, панель справа paper A4. Либо в ручную ставим размер 595 х 842 пикселей — это размер будущего трекера.

Шаг 2.

Размещаем на рабочем полотне фото акварельных красок. Все материалы находятся в архиве. Не забудь установить шрифты.

Комбинация клавиш Ctrl+Shift+K. Картинку красок уменьшаем потянув за угол картинки и зажав Shift.

Должно получиться примерно так. Прозрачность картинки 50%. Справа - Fill - image 50%

Шаг 3.

С помощью Text (T) рисуем узкий прямоугольник в верхней части полотна. Пишем название "Трекер привычек". Зажимаем Alt и дублируем текст. Пишем описание "Впишите нужные вам привычки и каждый день отмечайте, удалось ли вам сделать необходимое действие."

Настройки для текста "Трекер привычек".

Настройки для описания.

Пример того, что должно получиться.

Шаг 4.

Добавляем иконку сердце на монтажную область. Иконку уменьшаем потянув за угол картинки и зажав Shift. Размер 39 х 39.

Делаем компонент как показана на рисунке.

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