FIGMA: SOFT & THINKING

Онлайн-курс о том, чему не научат в туториалах
Сережа Семенов
12 лет в дизайне

BASIS

Figma — не просто графический редактор. Figma — это инструмент, который может улучшить дизайн-процессы, ускорить запуск новых проектов и в точности сохранить твой концепт при верстке.

На курсе мы научимся не только работать в Figma, создавать фреймы и прототипы, но и думать критически, а не слепо следовать инструкциям из туториала.
За 11 занятий ты освоишь каждый клик в Figma, научишься проектировать интерфейсы, работать с сетками, стилями и компонентами. В рамках курса создашь кликабельный прототип приложения с анимацией и интерактивными кнопками. Каждое занятие — новая продуктовая задача, новый вызов, практика и фидбек.
24 АВГУСТА  —  28 СЕНТЯБРЯ UTC+3
6
недель
11
занятий
45+
часов практики
Teacher

СЕРЕЖА СЕМЕНОВ

senior продакт-дизайнер в BEAT

  • BEAT — главный конкурент Uber в Южной Америке
  • перевел на Figma всю компанию — и дизайнеров, и разработчиков, и менеджеров
  • начинал свой путь с 3D-визуализации, рендерил интерьеры по ночам
  • делал редизайн приложения и дизайн десктопа «Рокетбанка»
  • верит, что human-centered дизайн создает ценность продукта
  • живет и работает в Амстердаме
  • в свободное (от создания топовых продуктов) время играет на пианино

 

ПРИГЛАШЕННЫЕ ЛЕКТОРЫ

Алексей Секачев

Продуктовый дизайнер в WeTransfer, 10 лет в дизайне мобильных приложений

Костя Аверьянов

Руководил продуктовыми направлениями в Тинькофф, Рокетбанке, Кухне на районе, 7 лет в продуктовом дизайне

PROGRAM

01
Вторник

24/08
20:15
Функционал Figma. Вступление
  • Интерфейс
  • Новый проект vs FigJam
  • Фреймы и слои
  • Группы и выравнивание
  • Фигуры и цвета
  • Работа с изображениями

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

02
Четверг

26/00
20:15
Функционал Figma. Кульминация
  • Работа с текстом и шрифтами
  • Pen tool и векторные сети
  • Иконки
  • Эффекты, маски и объединение

Домашнее задание:: сделать три кнопки с разными иконками и эффектами: с тенью, эффектом матового стекла и вдавленную в поверхность.

03
Вторник

31/08
20:15
Функционал Figma. Развязка
  • Режим презентации. Mirror App
  • Какие файлы можно открывать в Figma
  • Контроль версий
  • Плагины
  • Комьюнити

Домашнее задание: выбрать один из трех интерфейсов, предложенных лектором, и повторить его, используя знания о функционале Figma.

04
Четверг

02/09
20:15
Модульные сетки
  • Разные виды сеток и их применение
  • Горизонтальный ритм в макете
  • Вложенные сетки
  • Адаптивный дизайн: создаем систему сеток для браузера, планшета и телефона
  • Привязка контента к сетке

Домашнее задание: настроить сетки под предоставленные макеты.

05
Вторник

07/09
20:15
Auto Layout, или Как я жил раньше
  • Что такое Auto Layout
  • Создание и настройки Auto Layout. Кнопка
  • Вложенные Auto Layout. Форма авторизации
  • Адаптивная страница с модульной сеткой и Auto Layout

Домашнее задание: создать список контактов из представленных элементов, используя функцию Auto Layout.

06
Четверг

09/09
20:15
Стили и компоненты
  • Как стили помогают в работе дизайнера
  • Стили для цвета, текста, эффектов и сеток
  • Группировка и шеринг стилей
  • Компоненты и их переменные. Свопы
  • Как с помощью компонентов ускорить работу

Домашнее задание: создать компоненты, применяя стили и разные переменные (тексты, иконки).

07
Вторник

14/09
20:15
Динамические компоненты
  • Объединение компонентов в группы
  • Варианты
  • Вложенные компоненты
  • Командные библиотеки и дизайн системы

Домашнее задание: сделать вариативный компонент с несколькими параметрами.

08
Четверг

16/09
20:15
Создание кликабельного прототипа
  • Скролл в прототипах
  • Фиксированные элементы
  • Триггеры, действия и анимация
  • Оверлеи и поп-апы
  • Просмотр и шеринг

Домашнее задание: создать кликабельный прототип мобильного приложения из нескольких экранов с боковым меню.

09
Вторник

21/09
20:15
Анимация и интерактивные компоненты
  • Гифы в прототипе
  • Интерактивные компоненты
  • Смарт-анимация переходов между экранами

Домашнее задание: сделать переход между двумя экранами интерфейса с нестандартной анимацией, используя интерактивные кнопки.

10
Четверг

23/09
20:15
Структура Figma
  • Команды
  • Проекты
  • Файлы
  • Обложки для файлов
  • Виды доступа
11
Вторник

28/09
20:15
Переговорка

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

 

ПOСЛЕ
KУРCA

Инструмент
Владеешь функционалом Figma. Можешь создавать и наполнять фреймы и прототипы, работать с эффектами, стилями, текстом, применять модульные сетки и Auto Layout, делать вариативные компоненты и анимацию.
Мышление
Учишься по продуктовой методологии. Мыслишь критически — знаешь, не только «как», но и «зачем». Автоматизируешь дизайн-процесс, не тратишь время на сотню правок при верстке.
Практика
Закрепляешь теорию на практике, выполняешь 9 домашек: от базового вайрфрейма — до кликабельного прототипа и анимации. Получаешь развернутый фидбек: что хорошо, а над чем нужно еще поработать.

РАБОТЫ ЛЕКТОРА

 
 
Student Work
Flex
Student Work
Rocket
Student Work
Rocket
Student Work
Buddy
Student Work
Remoteteam
Student Work
Remoteteam
Student Work
Temper
Student Work
Схема навигации Рокетбанка

АУДИТОРИЯ

 
Практикующие дизайнеры, которые хотят перейти от Sketch, Photoshop и других программ к более функциональному сервису Figma, разобраться, как проектировать интерфейсы и ускорить свой дизайн-процесс.
 
Junior-дизайнеры, которые начинают свой профессиональный путь и хотят качественно освоить Figma, попрактиковаться, получить новый скил и фидбек. Впоследствии — перейти на новую позицию и делать более сложные проекты.
 
 
Оставь заявку здесь

Мы свяжемся и уточним все детали, а также цену курса.

 
Регистрируясь и нажимая кнопку “Оставить заявку”, вы соглашаетесь с условиями договора-оферты и политикой конфиденциальности