Прототипирование и анимация макетов в Figma
Освоите популярный графический редактор для работы с прототипами и дизайн-макетами, познакомитесь с UI/UX, отработаете знания на практике
Курс для тех, кто хочет познакомиться с UI/UX и дизайном; кто хочет разобраться в Figma в теории и на практике. Для старта не нужны специальные знания. После курса сможете создавать прототипы и анимацию макетов сайтов в Figma, будете знать основы UI/UX.
Практический курс
Программа курса: 16 уроков
с теорией и кучей практики
с теорией и кучей практики
Кому подойдёт курс
Можно зарабатывать больше, если знать Figma: создавать прототипы сайтов для клиентов и быстрее работать с чужими макетами.
Курс построен так, чтобы разобраться в Figma и UI/UX за короткий срок, отрабатывая каждый урок на практическом задании.
Модуль 1: Теория UI/UX
По окончанию модуля вы познакомитесь с теоретической базой необходимой для понимания UI и UX дизайна.
Урок 1: Введение в UI/UX
В данном уроке вы узнаете чем отличается UI и UX дизайн в теории и на практике:
- Разница между UI и UX
- Особенности в работе
Урок 2: Виды интерфейсов. Общие правила и принципы дизайна интерфейсов. Гайдлайны iOS и Android
Данный урок дает объяснение о различных видах интерфейсов, познакомимся с принципами дизайна интерфейсов для различных экранов, которыми нужно руководствоваться при работе:
- Виды интерфейсов: mobile, tablet, desktop, digital
- Принципы дизайна интерфейсов для desktop: адаптивный дизайн, модульные сетки, F и Z паттерны, цвет элементов, контрастность, группировка элементов, воздух между элементами, wireframe, золотое сечение, шрифты и тексты
- Принципы дизайна интерфейсов для mobile: guideline, управление не только кнопками, сетки для mobile, навигация, метод раскрытия, разбивать задачи, шрифты
Урок 3: Модульные сетки
В данном уроке вы познакомитесь с модульными сетками, поймете из чего они состоят и почему ими так удобно пользоваться.
- Что такое модульная сетка
- Какие виды бывают
- Как работать с сеткой
- Использование сетки для mobile
Урок 4: Словарь
Познакомимся с основными терминами, которых должно хватить для старта
Модуль 2: Знакомство и работа в Figma
В данном модуле мы начинаем работать с Figma. В первом уроке закончим с теорией и затем начнём практику
Урок 5: Теория по Figma
В этом уроке мы начинаем знакомство с Figma, узнаем о её возможностях и преимуществах по сравнению с другими программами.
- Что такое Figma и почему именно Figma
- Возможности Figma
- Недостатки Figma
- Аналоги Figma
Урок 6: Знакомство с Figma
Начинаем работать с интерфейсом Figma и изучаем основные возможности.
- Создаем аккаунт в Figma
- Разбираемся с основными настройками программы
- Разбираемся работу с вкладками
- Как создать новый файл и начинаем работать с интерфейсом
Урок 7: Функции основной панели в Figma
После данного урока вы сможете разобраться какими основными настройками рабочего пространства обладает Figma, как основные инструменты имеются в наличии и как их использовать.
- Возможности основных разделов (Edit, View, Object и т.д.)
- Разбираемся с основными инструментами
Урок 8: Панель слоёв
Вы узнаете из чего состоит панель слоёв и как с ней работать. Урок короткий, но очень полезный.
- Разбор панели слоёв
- Что такое page, frame и group
- Изучим инструменты flatten и mask
- Как создать компонент
Урок 9: Панель свойства
На уроке разберем самую большую панель - панель свойств, немного затронем объекты и настроим сетку.
- Разбор панели свойств объекта
- Работа с изображениями в figma
- Работа с frame и элементами внутри него
- Настройки сетки
Урок 10: Шрифты
Рассмотрим на уроке,где можно брать шрифты и как их подключать, поработаем с текстовыми элементами и поговорим о теории, которую нужно знать.
- Откуда figma берёт шрифты
- Как создавать текстовый элемент и какие его настройки есть
- Теория по шрифтам: иерархия в тексте, интерлиньяж, трекинг, кернинг.
- Настройки сетки
Урок 11: Изображения и какие они бывают
В уроке мы разберемся в растровых и векторных изображениях, как с ними работать в figma
- Разница между растровыми и векторными изображения и когда их использовать
- Редактирование векторных изображений
- Работа с растровыми изображениями
Урок 12: Компоненты
Разберемся что такое компонент, для чего они нужны и как их использовать. Практиковаться будем на создании карточки товара.
- Что такое компоненты и как с ними работать
- Попрактикуемся с auto layout
- Создание различных состояний для кнопки
- Работа с растровыми изображениями
Урок 13: Экспорт и импорт
Заключительный урок модуля. В уроке разберемся с UI-Kit, где их искать, как их импортировать и как с ними работать.
- Где искать шаблоны UI для figma
- Как импортировать файлы с расширением .fig
- Поработаем с готовым шаблоном
- Как работать с gif файлами
Модуль 3: Прототипирование и анимация интерфейсов
Финальный модуль курса, в котором мы научимся создавать прототипы и анимации для макетов
Урок 14: Дочерние фреймы
Разберем интересную тему — дочерние фреймы, повторим что такое clip content и создадим прокручивающуюся галерею.
- Для чего нужны дочерние фреймы и clip content для прототипирования
- Поработаем с вкладкой prototype
Урок 15: Прототипирование и анимация
Урок посвящён полностью прототипированию и различной анимации элементов.
- Настроим взаиомдействие элементов
- Узнаем какие типы переходов бывают
- Функция "умная анимация"
- Разберем временные функции для анимаци
Урок 16 (Бонусный урок): Лайфхак по работе с векторной графикой
В данном бонусном уроке мы научимся использовать опцию "boolean groups"
Как проходит обучение
Смотрите видеоуроки
В каждом уроке коротко и содержательно раскрывается одна тема и дается нужная информация для закрепления материала. Уроки без воды – только суть. Всё показывается на экране как пошаговая инструкция.
Выполняете
домашнее задание
домашнее задание
Задания помогают усвоить материал и закрепить знания. Есть легкие домашние задания и усложненные. Легкие можно выполнить в течение 1 часа. На сложные потребуется больше времени.
Если есть вопросы
Напишите нам в ВК или в телеграм, если есть вопросы по курсу. Либо оставьте заявку на консультацию по телефону. Вам позвонит куратор, ответит на вопросы и подскажет, как записаться.
Написать в ВК
Написать в Телеграм
Написать в ВК
Написать в Телеграм
?
ИП Исламов Артем Данисович ОГРНИП: 318028000152678
ИНН 026408036102
ИНН 026408036102
Glo Academy