Начиная с этого урока мы приступаем к разработке дизайн проекта в программе Figma. За урок мы научимся создавать фреймы, добавлять Grid систему, расставлять объекты и рисовать объекты самостоятельно.
Разработка дизайна
В ходе курса мы будем разрабатывать дизайн мобильного приложения. Если вас интересует реализация дизайна на практике, то предлагаем вам соотвествующий курс по созданию Андроид приложения.
Основные моменты
Фигма предоставляет несколько основных инструментов для работы над дизайном. Они находятся в верхней панели. Ниже небольшое описание каждого из них:
- Инструмент Мышь – позволяет выбирать объекты, передвигать их, вращать и менять размеры;
- Инструмент Фрейм – позволяет создать фрейм для разработки дизайна на его основе;
- Инструмент Объекты – позволяет создавать объекты разной формы. Можно создать квадрат, круг, линию, полигон и прочие объекты. Каждый объект можно трансформировать по необходимости;
- Инструмент Ручка – позволяет рисовать объекты с нуля. Рисунок получается за счет проставления точек;
- Инструмент Текст – служит для создания текстовых надписей;
- Инструмент Рука – служит для передвижения по дизайн проекту;
- Инструмент Комментарий – позволяет оставлять комментарии в проекте.
После создания объектов вы можете добавлять к ним свойства, менять их названия и делать из них любые новые формы.
Материалы для курса figma-simple-design.svg
Задание к уроку
Простые формы
Разработайте дизайн как на фото ниже:
Вам потребуется создать две полусферы, линию между ними, а также подобие кляксы.
Точно повторять объекты не требуется, но главное воссоздать схожий дизайн.
Вы можете скачать весь проект по этой ссылке. Позже вы сможеье импортировать его в Figma.
Большое задание по курсу
Задание рассчитано на весь видеокурс. Его необходимо выполнять по мере прохождения курса или по его окончанию.
В ходе большой работы вам предстоит разработать дизайн для основной страницы мобильного приложения. Дизайн не столь сложный, но при его выполнении постарайтесь максимально не использовать готовые иконки, а воссоздавать все самостоятельно.
Ниже вы можете посмотреть на пример дизайна, что вам необходимо реализовать:
