Работать в Figma
Использовать фреймы, стили, фигуры и инструменты редактора.
Проектирование и создание дизайн-систем в Figma
Мини-курс ProductStar о работе в Figma и создании дизайн-систем: компоненты, прототипы, визуальные основы и передача макетов разработчикам. Школа заявляет проект и две практические работы.
Курс в деталях
- Школа
- ProductStar
- Формат
- Онлайн
- Длительность
- 2 месяцаПродолжительность мини-курса; доступ к материалам на год.
- Доступ к материалам
- 1 год
Кому подойдёт курс
| Кому подойдёт | Чем поможет курс |
|---|---|
| Дизайнерам интерфейсов | В программе — компоненты Figma, адаптивные экраны, цвет, типографика, библиотеки и дизайн-системы. Школа начинает с интерфейса редактора; необходимый опыт работы с ним уточняйте перед записью. Продолжительность — два месяца. |
| Продакт-менеджерам | Школа включает менеджеров продуктов в аудиторию курса. Материалы о компонентах, прототипах и ролях команды помогут разобраться, как организована работа с интерфейсами и их передачей разработчикам. Школа заявляет проект и практические работы. |
| Frontend-разработчикам | Программа рассматривает библиотеки компонентов, взаимодействие с фронтендом и handoff дизайн-системы команде разработки. Сверьте объём этих тем со своими задачами и ожидаемым уровнем глубины курса. Уроки охватывают работу в Figma. |
Чему вы научитесь
Создавать компоненты
Применять Constraints, Components и Auto Layout в макетах.
Собирать дизайн-систему
Организовывать библиотеки компонентов, стили и токены.
Создавать прототипы
Настраивать интерактивные переходы и анимацию в Figma.
Передавать макеты команде
Разбирать handoff и управление изменениями дизайн-системы.
Что входит в курс
Практические задания
Задания для применения изученного материала и отработки навыков.
Учебные проекты
Работа над проектами, в которых можно объединить знания и навыки из разных тем курса.
Программа курса
Темы и разделы, которые входят в программу обучения.
01Знакомство с Figma
Интерфейс и основные инструменты Figma, особенности работы в редакторе и первые действия при создании макета интерфейса.
02Работа с фигурами и инструментами
Настройка инструментов Figma и работа с фигурами, фотографиями, визуальными эффектами и кривыми при подготовке макетов. Рассматривается настройка инструментов.
03Создание дизайна интерфейса в Figma
Основы интерфейсного дизайна: позиционирование объектов внутри фрейма, применение стилей и подключение плагинов Figma. Изучается работа со стилями.
04Constraints, Components, Auto layout
Constraints, Components и Auto Layout: адаптивные экраны, родительские и дочерние компоненты, автоматические отступы. Также разбирается иерархия компонентов.
05Варианты и библиотеки
Варианты компонентов и их библиотеки: формирование элементов и использование дизайн-системы в работе над проектом. Обсуждаются варианты элементов.
06Прототипирование и анимация
Создание интерактивных прототипов и анимации в Figma для демонстрации пользовательского опыта и взаимодействий. Прототипы демонстрируют взаимодействия.
07Колористика
Теория цвета, цветовой круг и модели Pantone, CMYK, RGB и HEX. Цвета, оттенки и тональность в дизайн-системах и UI-kit. Урок включает работу с цветовым кругом.
08Типографика
Основы типографики, классификация шрифтов и её основные понятия. Школа рассматривает связь текста с пользовательским опытом.
09Композиция и модульные сетки
Элементы композиции, модульные сетки и выравнивание контента. Выбор сетки для композиции и работа с ней в Figma. Рассматривается модульная структура.
10Иконографика: из чего состоит иконка
История иконографики, составляющие иконки и поиск её образа. Урок знакомит с принципами создания визуальных обозначений.
11Иконографика: рисуем иконки в Figma
Работа с размерами иконок и их организацией в Figma. Школа показывает приёмы, которые помогают упростить работу над иконками.
12Библиотеки компонентов
Компоненты, стили и токены Figma, атомарный дизайн и библиотеки. В программе — взаимодействие библиотеки с фронтендом. Изучаются стили компонентов.
13Дизайн-система
Назначение и состав дизайн-системы, преимущества, ограничения и типичные ошибки. Роли специалистов в создании и поддержке.
14Верстка и дизайн-система
Передача дизайн-системы команде разработчиков: handoff, работа с изменениями и управление версиями элементов системы. Урок охватывает командную работу.
Практика и проекты
Практические работы курса — какие задачи вы будете решать, какие кейсы и примеры разбирать.
Макеты и компоненты
Уроки включают создание интерфейсов в Figma, адаптивные экраны, варианты компонентов и работу с библиотеками.
Прототипы и иконки
В программе указаны интерактивные прототипы, анимация, работа с размерами и организация иконок в Figma.
Проект и практические работы
В тарифе школа указывает один проект и две практические работы в портфолио. Их состав и проверку уточняйте у ProductStar.
Профессии, навыки и инструменты
Профессии
Профессии, с задачами которых знакомит программа курса.
Навыки
Навыки, на развитие которых направлена программа курса.
Программы и сервисы
Инструменты и методы по материалам школы; состав может зависеть от тарифа.
Эксперты программы
Состав экспертов и их участие в конкретной группе уточняйте у школы.
Стоимость и условия оплаты
- Стоимость обучения
- 19 900 ₽Сумма при оплате частями: 10 платежей по 1 990 ₽. Цена одним платежом уточняется. Данные от не указана.
- Ежемесячный платёж
- 1 990 ₽ / мес.Срок оплаты: 10 мес. Условия договора уточняйте в школе.
Частые вопросы
Кому подойдёт курс?
Школа адресует программу дизайнерам, продакт-менеджерам и Frontend-разработчикам. Требования к исходным навыкам уточняйте перед записью.
Какие инструменты указаны?
В списке школы указана Figma. В программе отдельно названы Constraints, Components, Auto Layout, цветовые модели и другие инструменты.
Какая практика предусмотрена?
Школа заявляет один проект и две практические работы для портфолио. Точные задания и порядок их проверки уточняйте у ProductStar. Уточните также формат обратной связи.
Есть ли обратная связь?
В проверенных блоках формат поддержки ментора и проверки работ не раскрыт. Если это важно, уточните условия сопровождения у школы.
Сколько длится обучение?
Школа указывает два месяца и год доступа к материалам; заниматься можно в удобное время. График и условия доступа уточняйте отдельно.
Выдают ли документ?
В проверенных блоках не указан вид документа об окончании. Уточните у ProductStar, предусмотрен ли он и какие требования действуют.
Сколько стоит курс?
На странице указаны десять платежей по 1 990 ₽ — всего 19 900 ₽ при оплате частями. Цену одним платежом и условия оплаты уточняйте у школы.
Какое оборудование потребуется?
Для решения задач школа рекомендует ноутбук или компьютер, а лекции можно смотреть с телефона. Технические требования к Figma уточняйте отдельно.
Записаться на курс
Перейдите на сайт ProductStar, чтобы узнать условия обучения на курсе «Проектирование и создание дизайн-систем в Figma».
На сайт школыПохожие курсы
Другие программы для той же профессии или со схожими навыками и инструментами.
ProductStarПрофессия: UX/UI-дизайнер
Онлайн-программа ProductStar по UX/UI-дизайну: работа в Figma, проектирование веб- и мобильных интерфейсов, дизайн-системы, исследования пользователей и итоговый проект.
67 651 ₽
Цена одним платежом
2 088 ₽ / мес. · 36 мес.
SkillboxFigma с нуля до PRO
Макеты и интерактивные прототипы в Figma, организация артбордов и библиотеки стилей. Инструментальная подготовка для цифрового дизайна.
39 334 ₽Цена без скидки: 71 517 ₽
Стоимость курса
6 556 ₽ / мес.
Яндекс ПрактикумДизайн мобильных и кросс-платформенных приложений
Курс Яндекс Практикума рассчитан на дизайнеров с опытом. Участники проектируют мобильные интерфейсы и работают с дизайн-системами.
43 600 ₽
Стоимость курса
от 1 779 ₽ / мес. на 36 мес.
Что важно знать о курсе «Проектирование и создание дизайн-систем в Figma»
Курс адресован дизайнерам, продактам и Frontend-разработчикам и охватывает 14 уроков: от инструментов Figma до компонентов, визуальных основ и передачи дизайн-системы разработчикам. Сопоставьте программу со своими задачами и уточните необходимый начальный уровень, особенно если ранее не работали с редактором. Содержание включает цвет, типографику и работу с модульной сеткой.
В тарифе указаны один проект и две практические работы для портфолио, но их содержание в изученных блоках не раскрыто. В программе есть прототипирование, анимация, библиотеки компонентов и handoff. Если для вас важны наставник и проверка работ, заранее спросите школу об их формате и сроках обратной связи. Школа также указывает, что заниматься можно в удобное время.
ProductStar указывает два месяца и год доступа к материалам. Видимая стоимость — десять платежей по 1 990 ₽, или 19 900 ₽ при оплате частями; цену одним платежом уточняйте у школы. Тип документа об окончании в проверенных блоках не указан. Перед записью проверьте актуальные условия оплаты и доступа. Для решения задач школа рекомендует ноутбук или компьютер.
Что посмотреть дальше
ProductStar
Познакомьтесь со школой ProductStar, её программами и условиями обучения.
ОткрытьКурсы ProductStar
Сравните курсы ProductStar по программе, практике и условиям обучения, чтобы выбрать подходящий вариант.
ОткрытьВсе курсы
Сравните онлайн-курсы по программе, школе, стоимости и длительности. Найдите обучение для первых шагов или развития навыков и изучите условия перед записью.
Открыть