18 курсов обучения Figma с нуля [2022]: бесплатно + платно

Приветствую в своём блоге! 🙂 В этой подборке разберём лучшие бесплатные и платные курсы Figma.

1 место. Курс «Figma с нуля до PRO от Skillbox»

Цена: 27 329 ₽ или рассрочка на 12 месяцев — 2 277 ₽ / мес

Ссылка на сайт: https://skillbox.ru/course/figma-null-pro/

Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне. Научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

  • Длительность – 8 недель
  • Лайфхаки от профессиональных дизайнеров
  • Обучение на практике
  • Доступ к курсу навсегда.
Перейти на официальный сайт →

Figma — любимый инструмент веб- и UX-дизайнеров по всему миру. С его помощью можно быстро создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений. А ещё один макет в Figma могут одновременно редактировать несколько человек — это идеальный инструмент для командной работы.

Кому подойдёт этот курс:

  • Новичкам в веб-дизайне
    С нуля освоите Figma. Научитесь использовать горячие клавиши для быстрой работы. Добавите в резюме полезный навык, который оценят наниматели.
  • Веб-дизайнерам без опыта работы в Figma
    Научитесь создавать UI Kit, использовать плагины и компоненты. Повысите скорость своей работы и освободите время для креативных задач.

Чему вы научитесь:

  • Профессионально работать в Figma
    Разберётесь в интерфейсе и настройках программы. Научитесь работать с фигурами, слоями и внутренними редакторами.
  • Готовить адаптивные макеты
    Сможете создавать прототипы с разной степенью детализации и адаптировать их под любые устройства.
  • Добавлять интерактив в прототипы
    Освоите базовую анимацию. Сможете наглядно показать заказчику, как клиенты будут пользоваться продуктом.
  • Создавать компоненты и библиотеки стилей
    Научитесь объединять шрифты и цвета в отдельные группы, чтобы сохранять единый визуальный стиль в многостраничных макетах.
  • Работать над проектом в команде
    Освоите продвинутые инструменты, чтобы лучше планировать работу, быстро вносить правки и согласовывать макеты.
  • Передавать макет в разработку
    Научитесь наводить порядок в слоях и артбордах. Сможете грамотно показать разработчикам технические аспекты и коды компонентов.

Содержание курса:

Вас ждут онлайн-лекции и практические задания на основе реальных кейсов.
8 тематических модулей, 48 онлайн-уроков

  1. Знакомство с Figma
    Разберётесь в интерфейсе и базовых настройках программы. Научитесь использовать геометрические фигуры, слои и текстовые поля. Соберёте свой первый прототип.
  2. Иконки, иллюстрации и картинки
    Узнаете, как создавать собственные иконки и обрабатывать изображения, используя внутренние инструменты Figma. Сможете делать дизайн-макеты с нуля, не используя сторонние редакторы.
  3. Компоненты
    Узнаете, как создавать компоненты и пользоваться панелью настроек. Научитесь делать интерактивные прототипы и показывать заказчику, как люди будут пользоваться будущим сайтом.
  4. Библиотеки компонентов и общие стили
    Сможете создавать библиотеки стилей и UI Kit, чтобы стандартизировать элементы интерфейса. Научитесь верстать аккуратные макеты с помощью модульных сеток.
  5. Auto Layout и Variants
    Поймёте, как объединить макеты в единую систему с помощью функции Variants. Сможете создавать и адаптировать под разные устройства сложные элементы интерфейса.
  6. Сложные многостраничные документы
    Научитесь работать с базовыми экранами и создавать дерево страниц. Освоите бета-версию функции Branches. Поймёте, как организовать работу команды над разными версиями одного макета.
  7. Дополнительные возможности и сообщество авторов
    Узнаете, какие плагины помогут вам быстро создавать драфтовые проекты и работать с правками. Научитесь добавлять анимацию в прототипы.
  8. Подготовка макета для разработчиков
    Сможете показать разработчику технические аспекты проекта и код компонентов. Научитесь оптимизировать работу команды с помощью плагина Figma Jam.

Спикер – Юлия Соловьёва
Дизайнер, арт-директор веб-бюро «Синий Муравей»
Сотрудничала с L’Oréal, ЛСР, «Сколково» и другими крупными проектами.

Отзывы об обучении в Skillbox доступны на сайте.

Подробнее о курсе Figma →

2 место. Курс «Figma от irs.academy»

Цена: 26 700 руб.

Ссылка на сайт: https://irs.academy/kurs_po_figma

Научитесь разработке интерфейсов и прототипированию в Figma, и получите работу в области веб-дизайна.

  • Кол-во часов: 8 часов
  • Кол-во занятий: 6 уроков.
Перейти на официальный сайт →

Для кого будет полезно?

  • Новичкам
    Хотите попробовать себя в веб-дизайне? Онлайн-курс по Figma будет хорошим стартом!
  • Начинающим веб-дизайнерам
    Чувствуете нехватку знаний и хотите овладеть полезным инструментом профессионально? Онлайн-курс по Figma вам подойдет!
  • Веб-дизайнерам
    Нужен новый инструмент и профессиональные фишки? Поможем систематизировать имеющиеся знания и дополним их!
  • Фрилансерам
    Хотите получать крупные суммы, работая удалённо? Освойте Figma и берите выгодные заказы, пройдя наш онлайн-курс.
  • Всех, кого интересует Figma
    Хотите освоить программу для воплощения собственных идей или заработка? Онлайн-курс поможет приобрести необходимые навыки.

После окончания курса вы сможете:

  • Эффективно использовать инструменты Figma
  • Создать приложение, сайт и т.д.
  • Находить заказчиков и продуктивно взаимодействовать с ними
  • Зарабатывать фрилансом из любой точки мира
  • Получить интересную работу в престижной компании.

Программа курса:

  1. Знакомство с Figma
    Фигма как современный инструмент разработки интерфейсов. Основы работы в данной программе, ее преимущество для дизайнера.
  2. Возможности Figma. Инструментарий программы
    Изучение всех особенностей и свойств инструментов Figma.
  3. Компоненты и прототипирование
    Познаем все нюансы и скрытые фишки программы, а также рассмотрим возможности крутого прототипирования интерфейса.
  4. Бог Фи
    Тайные знания применяем в практике, создаем интерфейс приложения в Фигме.
  5. Дизайн сайта
    На пятом уроке мы поговорим об этапах создания сайта и их взаимосвязи.
  6. Закрепляющий урок. Создаем дизайн своего приложения
    На шестом уроке — практика по созданию веб-приложения при помощи Figma.

Преподаватель – Александр Михайлов
«Я более 10 лет занимаюсь Web, Ui-, UX-дизайном. Являюсь действующим дизайнером компании LUNA App, IRS, Hedu.
Постоянное обучение и совершенствование знаний в области UI и UX позволяет мне использовать в работе современные тренды.
Я готов поделиться с вами своими знаниями, которые накопились за годы кропотливой работы. Многие ученики, закончившие обучение, уже работают в сфере дизайна и хорошо зарабатывают. Присоединяйтесь к их числу! Научу вас реализовывать всё задуманное в программе” Figma”. Изучив её досконально, вы забудете о проблеме пиксельности, будете делать качественные приложения и сайты, а также кликабельные прототипы.
Многие приложения и сервисы, созданные мной в “Figma”, работают как часы и приносят доход.»

По окончанию обучения вы получите сертификат.

Отзывы:

Ксения Лисицина
«Спасибо большое за понятные уроки! Уже вполне могу работать в фигме. Очень довольна курсом!»

Арман Степанян
«Похвально, единственное место, где обучаюсь дистанционно.»

Подробнее о курсе Figma →

3 место. Курс «Figma для UI/UX дизайнера от Центр компьютерного обучения «Специалист» при МГТУ им.Н.Э.Баумана»

Цена: 21 950 ₽ — 48 000 ₽

Ссылка на сайт: https://www.specialist.ru/course/figma

Курс включает все этапы разработки проекта сайта в приложении-сервисе Figma.

  • Длительность: 24 ак. ч.
Перейти на официальный сайт →

Figma — это графический редактор с возможностью совместной работы. В нем создают интерфейсы и прототипы сайтов, приложений. Это один из необходимых инструментов для дизайнеров: по данным hh.ru, работодатели требуют знание Figma в 60% вакансий на позицию дизайнера интерфейсов.

Вы освоите интерфейс графического редактора и его функции уже на первом занятии и сразу приступите к прототипированию макетов. На курсе Вы научитесь создавать дизайн сайта в десктопной версии и адаптировать его для показа на мобильных устройствах.

Программа курса насыщена практикой: с самого начала занятий вы будете выполнять сквозной кейс по созданию прототипа сайта и дизайна его интерфейса. По окончании курса вы будете понимать, как пошагово спроектировать красивый и удобный для пользователя продукт.

Преподаватели курса — практики с богатым опытом работы и реализации успешных проектов, которые поделятся с вами своими знаниями и помогут не «набить шишек» в вашем профессиональном пути. На занятиях вы всегда можете задать вопрос преподавателю по любой пройденной теме и получить обратную связь по поводу усвоения материала.

Вы научитесь:

  • выстраивать работу по циклу web-разработки;
  • создавать дизайн сайта для десктопа;
  • планировать адаптивный макет сайта для различных устройств;
  • работать с инструментом Ограничители в Figma;
  • экспортировать макет из Figma, представлять информацию для верстальщиков и программистов;
  • использовать плагины, компоненты, стили и общие библиотеки;
  • создавать интерактивные макеты с помощью приложений Axure;
  • основам командной работы в Figma.

Программа курса:

Модуль 1. Figma основы работы (4 ак. ч.)

  • Цикл web-разработки.
  • Роль дизайнера, место Figma на всех этапах разработки.
  • Преимущества Figma.
  • Установка Figma.
  • Интерфейс
  • Манипуляция с объектами
  • Frame и slice tool
  • Векторные примитивы
  • Работа с вектором и пером
  • Слои и маски
  • Текст
  • Цвет, градиенты, изображения
  • Сетки и направляющие
  • Стили
  • Простое прототипирование макета
  • Лабораторная работа: Создание элементов страниц
  • Домашняя работа

Модуль 2. Создаем дизайна сайта для десктопа (8 ак. ч.)

  • Сетки дизайна для многоколоночной верстки, типовые схемы дизайна
  • Размещение графической и текстовой информации
  • Поддержка файлов, типы файлов
  • Работа с графическими элементами
  • Форматирование текста, создание и использование шаблонов
  • Лабораторная работа: Создание шаблонов страниц
  • Домашняя работа

Модуль 3. Создаем дизайн сайта для планшетов и смартфонов (8 ак. ч.)

  • Constraints и адаптивность
  • Принцип Mobile First
  • Планирование адаптируемого макета для разных устройств
  • Адаптивность и ограничители
  • Лабораторная работа: Создание шаблонов страниц
  • Домашняя работа

Модуль 4. Интеграция и экспорт, дополнительные возможности (4 ак. ч.)

  • Создание UI-kit
  • Форматы экспорта, настройка элементов для экспорта
  • Представление информации для верстальщиков и программистов
  • Возможности командной работы в Figma
  • Плагины, компоненты, стили и общие библиотеки
  • Использование приложений Axure для создания интерактивных макетов.
Подробнее о курсе Figma →

Курс «Figma. Начальный уровень от GeekBrains»

Цена: 20 500 руб.

Ссылка на сайт: https://gb.ru/courses/1210

  • Видеокурс
  • Длительность — 1 месяц, 5 уроков.
Перейти на официальный сайт →

Этот курс оригинален и полностью повторяет материал наших платных программ обучения. Вы получаете тот же материал, что и наши студенты, включая домашнее задание в некоторых видеоуроках. Мы рекомендуем использовать его для саморефлексии и проверки знаний тогда, когда вам это удобно. Проверка выполненного задания преподавателем не предусматривается.

Программа курса:

  1. Onboarding: вводный урок. UI Components: Swatch Library
    Что такое Figma: цели, возможности Примеры макетов. How-to, паттерны взаимодействия с данным функционалом. Инструменты: пипетка, подбор цветов, цветовая палитра, градиенты, использование Swatch lib для примитивов.
  2. UI Components: Text styles
    Как создавать текстовый слой; как создать свои текстовые стили, которые будут повторяться в интерфейсе; как разделить их на группы, иерархию
  3. UI Components: Buttons
    Навык работы с примитивами, соединение слоев в группы и фреймы, архитектура хранения компонентов
  4. UI Components: Constrains
    Адаптивность элементов под разные размеры экрана.
  5. UI Components: Навигация
    Создание элементов навигации.

Отзывы:

Анастасия Бурская
«Интересно посмотреть кусочек работы глазами дизайнера, спасибо за курс! Побольше бы таких вводных с разных сторон (аналитика, ПМ, дизайн UX и отдельно UI, тестировщик) + вводные неглубокие уроки по основным приложениям для вышеперечисленных специализаций».

Анатолий Стамбуло
«Отличный курс для быстрого старта! Лишь самая необходимая информация. Всё просто, понятно и по делу. Рекомендую данный курс не только дизайнерам. Как Андроид разработчик, рекомендую коллегам пройти этот курс. И другим мобильным разработчикам. Курс не перегружен сложным материалом, а содержит простые и конкретные приемы работы.»

Подробнее о курсе Figma →

Курс «Профессиональный дизайн сайтов в Figma от Pentaschool»

Цена: 19 000 ₽

Ссылка на сайт: https://pentaschool.ru/program/figma

Освойте редактор на продвинутом уровне, соберите портфолио и найдите первых клиентов.

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

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

По итогам этого курса вы научитесь:

  • Работать со всеми основными инструментами Figma
  • Подготавливать мудборды для клиентов
  • Разрабатывать с нуля дизайн лендингов, многостраничных сайтов и мобильных приложений
  • Создавать простую анимацию интерфейсов
  • Подготавливать техническое задание для разработчиков
  • Разрабатывать кликабельные прототипы сайтов и мобильных приложений.

Программа:

  1. Основы Figma
    Вы познакомитесь с инструментами Figma, научитесь работать со слоями, изображениями, текстом и модульной сеткой. Вы узнаете, как настраивать компоненты, изучите принципы создания мудбордов, а также попробуете работать с эффектами.
  2. Дизайн сайтов в Figma
    Вы перейдете к созданию многостраничных сайтов, научитесь делать разные типы меню, познакомитесь с горизонтальной, вертикальной и нестандартной навигацией. Вы узнаете, как наполнять сайт контентом, изучите принципы юзабилити, познакомитесь с возможностями плагинов и подготовите проект для портфолио.
  3. Дизайн мобильных приложений в Figma
    Вы узнаете, как пользоваться гайдами iOS и Android, научитесь собирать основные экраны мобильных приложений в Figma, попробуете свои силы в редизайне уже существующих приложений.

Преподаватели курса:

Мария Николава
Руководитель отдела дизайна в Peter Partner
Опыт работы в сфере дизайна — 11 лет
Ведет ключевые UI/UX проекты компании, развивает дизайн-системы. Разрабатывает брендинг и корпоративный сайт компании, проектирует дизайн веб и мобильных приложений.

Сергей Непримеров
Product designer в Reliz ltd
Опыт в сфере дизайна 7 лет.
Вместе с командой Reliz работает над проектами международного уровня в различных отраслях, таких как: фитнес, ментальное здоровье, автомобили. Занимается разработкой пользовательских интерфейсов и их анимацией.

Павел Ярец
Продюсер Digital Media OKTÅEDER
Опыт в дизайне 15 лет
Ранее был ведущим дизайнером в корпорации «Юнитекс». В компании HUADA TOYS Imp&Exp Trading Co. в КНР был дизайнером упаковки.

Отзывы студентов:

Мехельсон Анна
Менеджер, Москва,
«Учиться не всегда было просто из-за моей жизненной ситуации, так как у меня очень плотный график на работе, но с поддержкой команды академии мне удалось совместить учебу и работу. Хочу поблагодарить нашего ментора за классное сопровождение. Она много помогала с организацией учебного процесса, с закрытием хвостов, и решением вопросов, связанных с защитой диплома.»

Ачиткин Олег
Руководитель проектов, Санкт-Петербург
«Хочу отметить, что процесс организован хорошо, все знания по программам даются структурированно, было много практики и общения. Несмотря на дистанционный формат, все организованно так, чтобы студент не оставался один на один с домашним заданием. Есть закрытые чаты в Телеграм с преподавателями, где можно задавать любые вопросы и читать разборы домашних работ. Коммуникации в Pentaschool я ставлю пять с плюсом. Также мне понравились закрытые воркшопы, на которых разбирали кейсы преподавателей, получая реальную информацию и проходя практику.»

Подробнее о курсе Figma →

Курс «Figma от Наука Дизайна»

Бесплатно

Ссылка на сайт: https://www.youtube.com/playlist?list=PLaIuVNKRYUyEoKnY0UwapHPk8fEaREHPA

Перейти на официальный сайт →

Видеоуроки:

  1. Интерфейс.
  2. Манипуляция с объектами.
  3. Frame & Slice tool.
  4. Векторные объекты.
  5. Работа с кривыми и пером.
  6. Слои и маски.
  7. Текст.
  8. Цвет.
  9. Сетки и направляющие.
  10. Стили.
  11. Constraints
  12. Компоненты.
  13. Выравнивание и умное выделение.
  14. Прототипирование.
  15. Интеграция и экспорт.
Подробнее о курсе Figma →

Курс «Figma от Tilda Publishing»

Бесплатно

Ссылка на сайт: https://tilda.school/figma-free-course-0

Перейти на официальный сайт →

Содержание:

  • Начало работы
  • Фреймы
  • Сетка
  • Объекты
  • Изображения
  • Кривые
  • Текст
  • Выравнивание
  • Хоткеи
  • Стили
  • Share
  • Плагины
  • Tilda
Подробнее о курсе Figma →

Курс «Figma для веб-дизайнера от beONmax»

Цена: от $7.8

Ссылка на сайт: https://beonmax.com/courses/figma/

Онлайн курс по Figma для детального изучения всех инструментов программы. В курсе узнаете основы дизайна, сформируете свою библиотеку компонентов на основе принципов атомарного дизайна. Создадите интерактивные макеты мобильного приложения в своё портфолио.

  • 52 видеоурока, ~ 8 часов.
Перейти на официальный сайт →

Чему Вы научитесь?

  • Внутренний и внешний интерфейс программы
  • Инструменты Figma
  • Frame — очень важная часть. Фрейм — это основа программы.
  • Компоненты
  • Contsraints (Ограничения/привязки)
  • Система сеток и направляющих в Figma
  • Плагины
  • Прототипирование
  • Стили
  • Атомарный дизайн
  • Основы своей библиотеки компонентов.

На практике создадите макеты мобильных приложений с применением полученных знаний, используя свою библиотеку компонентов. Также мы сделаем кликабельные прототипы этих приложений.

Программа:

  1. Введение, о курсе
  2. Основы Figma
  3. Инструменты Figma
  4. Профессиональные инструменты Figma
  5. Создание своей библиотеки компонентов
  6. Практика работы в Figma. Создаём макет приложения
  7. Прототипирование в Figma
  8. Практика работы в Figma — 2. Создаём макет приложения
  9. Завершение курса – получение сертификата.

Отзывы:

Evgenii Fedorenko
«Курс дает общее представление, но достаточно подробно и доходчиво. Отлично.»

Николай Ефимов
«Интересный курс! Ведущий ясно и понятно объясняет, теперь надо практикой подкрепить пройденное. Спасибо.»

Ольга Дерюшева
«Курс очень понравился. Всё доходчиво и понятно. Спасибо автору.»

Подробнее о курсе Figma →

Курс «Figma от Infogra»

Бесплатно

Ссылка на сайт: https://infogra.ru/lessons/36-urokov-dlya-novichkov-po-figma

Подборка полезных уроков для тех, кто хочет освоить Фигму или перейти на нее с других редакторов. В подборке есть как уроки по освоению интерфейса самой программы, так и по созданию дизайна цифрового продукта.

Перейти на официальный сайт →

Содержание:

  1. Интерфейс
  2. Манипуляция с объектами
  3. Frame & Slice tool
  4. Векторные объекты
  5. Работа с кривыми и пером
  6. Слои и маски
  7. Текст
  8. Цвет
  9. Сетки и направляющие
  10. Стили
  11. Constraints
  12. Компоненты
  13. Выравнивание и умное выделение
  14. Прототипирование
  15. Интеграция и экспорт
  16. Обзор интерфейса: аккаунт, история версий, мультипросмотр макета
  17. Обзор меню и предпочтений
  18. Инструменты и калькулятор
  19. Панель слоев и массовое
  20. Модульная сетка в Фигме
  21. Привязки (constraints) в Figma
  22. Компоненты в Фигме #1 — Простые примеры. Когда использовать?
  23. Компоненты в Фигме #2 — Сложные примеры. Ломаем, костылим 🙂
  24. Компоненты в Фигме #3 — Рокировка
  25. Компоненты в Фигме #4 — Иконки и адаптив
  26. Компоненты в Фигме #5 — Адаптив через дубликат макета
  27. Выравнивания (align) в Figma, Tidy Up, упаковка и дистрибьты
  28. Текст в Figma
  29. Цвет, градиенты, изображения в Figma
  30. Обводка и эффекты: тени, блюры, бордеры в Figma
  31. Командная библиотека компонентов в Figma
  32. Прототипы в Figma и умные анимации (smart animate)
  33. Панель кода и экспорт
  34. Ссылка на проект в Фигме (share Figma)
  35. Как установить, включить плагины в Figma | ? Plugins
  36. Auto Layout в Figma ? (стеки в Фигме).
Подробнее о курсе Figma →

Курс «Основы Figma от Нетология»

Бесплатно

Ссылка на сайт: https://netology.ru/programs/osnovy-figma

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

  • Когда: В любое время
  • Формат: Видеолекции
  • Уровень: Для начинающих.
Перейти на официальный сайт →

Во время обучения вы выполните 10 заданий и получите необходимую базу для работы в Figma. Макеты сайта, рекламные изображения для соцсетей — всё это может стать частью вашего портфолио.

Научитесь работать с ключевыми инструментами Figma:

  • Шейпами
  • Сетками и направляющими
  • Текстом
  • Масками
  • Компонентами
  • Стилями
  • Инструментами прототипирования
  • Эффектами
  • Интеграцией растровых изображений
  • Цветом и градиентами.

Программа курса:

  1. Введение в Figma
    Разберём интерфейс графического редактора и необходимые настройки перед началом работы
  2. Рекламный баннер
    Изучим шейпы, научимся строить сетку и работать с текстом и пространством на примере баннера
  3. Работа с интерфейсом
    Поговорим об основах UI/UX-дизайна, узнаем, как и с чем работает дизайнер интерфейсов
  4. Лендинг
    Узнаете, какие задачи решает дизайнер при разработке сайта, и создадите макет лендинга
  5. Адаптивный дизайн
    Разберётесь, как подготовить макет к жизни, и узнаете про состояния элементов и работу с адаптивностью.

Преподаватели:

— Иван Крестов
Арт-директор в Mish.design

— Андрей Кретинин
Дизайнер в Mish.design.

Подробнее о курсе Figma →

Курс «Figma для дизайнеров от Айтилогия»

Цена: нет информации

Ссылка на сайт: https://itlogia.ru/figma

Научитесь правильно использовать все инструменты и возможности Figma.
Будете уметь создавать дизайн-системы и библиотеки компонентов. Научитесь быстро адаптировать дизайн под разные устройства.
Научитесь создавать кликабельные прототипы и работать с Figma Animate.
Получите все необходимые знания и навыки по работе в Figma, которые требуют как для работы в компаниях, так и пригодятся вам на фрилансе.

  • Онлайн, по записанным видео урокам, с проверкой домашек и постоянной поддержкой наставников
  • 2,5 месяца (11 недель).
Перейти на официальный сайт →

В Figma вы сможете создавать прототипы и дизайн-макеты сайтов и приложений (и не только), рисовать уникальные иконки и иллюстрации, создавать кликабельные прототипы и анимацию, работать с командой в режиме онлайн и безопасно презентовать проекты заказчику.

Чему вы научитесь:

  • Уверенно работать с любым инструментом
    Освоите все инструменты и возможности Figma, шорткаты, работу со слоями. Сможете создавать уникальную графику и иконки любой сложности в FIgma.
  • Выстраивать удобнее рабочий процесс
    Узнаете, как организовать и автоматизировать работу в Figma, чтобы сократить время на внесение изменений, правок и на рутинные действия. А также о вспомогательных фишках и инструментах.
  • Создавать прототипы, быстро адаптировать макеты
    Научитесь настраивать артборды и быстро создавать адаптивные макеты. Сможете проектировать интерфейсы любой сложности и объёма.
  • Создавать собственные дизайн-системы и библиотеки
    Научитесь создавать собственные библиотеки компонентов и дизайн-системы, применять это в ваших проектах и тем самым ускорять работу
  • Создавать кликабельные прототипы
    Научитесь создавать кликабельные прототипы, окна pop-up, горизонтальную и вертикальную прокрутку блоков за пределы экрана, настраивать hover-эффекты. Познакомитесь с Figma Animate и Smart Animate.
  • Работать в 2-3 раза быстрее и эффективнее
    Благодаря полученным знаниям и навыкам работы в Figma, вы сможете брать больше проектов, потому что научитесь выполнять их в 2-3 раза быстрее и так же быстро вносить изменения.

Курс подойдёт вам, если вы…

— Обучались на курсе «Мир веб‑дизайна»
— Хотите ускорить работу в 2-3 раза
— Хотите стать более ценным и опытным специалистом
— Хотите владеть Figma на профессиональном уровне.

Программа курса:

  1. Введение в курс
    Познакомитесь с основателем Айтилогии и автором курса Ольгой Черновой, а также узнаете больше о том, как будет проходить обучение на курсе.
  2. Знакомство с Figma: обзор интерфейса и возможностей
    Познакомитесь с возможностями Figma. Установите программу и настроите её под себя. Разберетесь с рабочими областями и особенностью организации рабочего пространства. Узнаете о командах и комьюнити, о том, как делать экспортировать и шарить проекты коллегам, команде и заказчикам. Выполните контрольное задание по модулю.
  3. Инструменты в Figma. Работа с графикой
    Познакомитесь и научитесь работать правильно со всеми инструментами, которые есть в программе. Будете уметь использовать их как отдельно, так и в комплексе друг с другом. Узнаете о 20+ удобных фишек для работы в Figma, которые ускорят работу и сделают её удобнее. Научитесь создавать в Figma иконки и создадите ваш собственный набор иконок. Создадите 2 дизайн-концепта в Figma с применением изученных инструментов и эффектов.
  4. Профессиональные средства для работы в Figma
    Узнаете, как работать с системой сеток и направляющих. Научитесь создавать и настраивать компоненты, работать с вариантами, правильно работать с ограничениями и привязками, ускорять и делать удобной работу с помощью функций контейнера, стилей и других профессиональных инструментов в Figma. Научитесь пользоваться комьюнити и плагинами в Figma и узнаете, как создавать дизайн за 1 час.
  5. Дизайн-система и библиотека компонентов в Figma
    Научитесь создавать дизайн-систему и вашу собственную библиотеку компонентов в Figma. Узнаете, как правильно организовать рабочее пространство с ними. Создадите дизайн-систему и библиотеку компонентов для вашего собственного проекта. Узнаете, как корректно организовать это для работы с разработчиками.
  6. Кликабельный прототип в Figma. Анимация
    Научитесь создавать прототипы и дизайн-макеты в Figma, профессионально работать с панелью Prototype. Научитесь применять профессиональные инструменты Figma в комплексе друг с другом, что позволит вам работать чётче и быстрее, а также быстро редактировать проект и вносить изменения и дополнения. Узнаете, как правильно, быстро и удобно работать с режимом просмотра прототипов. Научитесь применять вашу дизайн-систему и библиотеку компонентов в проекте и редактировать их. Будете уметь правильно демонстрировать прототипы заказчикам и коллегам. Научитесь создавать кликабельные прототипы с настройками различных эффектов и переходов с помощью Prototype. Освоите Figma Animate и научитесь создавать анимацию дизайна.
  7. Быстрый адаптивный дизайн в Figma
    Научитесь быстро адаптировать ваш дизайн под устройства с любым разрешением. Создадите адаптивные макеты для вашего проекта. Познакомитесь с Figma Mirror.
  8. Smart Animate
    Вы изучите Smart Animate в Figma и научитесь анимировать ваши дизайн-макеты.
  9. Подведём итоги
    Подытожим всё, чему вы научились в Figma за этот курс! И скажем, какие вы молодцы 🙂

Что вы будете уметь после обучения на курсе:

  • Разберем по косточкам функционал и возможности Figma
  • Узнаете о фишках, которые ускорят вашу работу
  • Научитесь работать с инструментами в комплексе друг с другом
  • Научитесь создавать уникальные иконки для проектов
  • Будете создавать дизайн-системы, применять стили в проектах
  • Научитесь создавать собственные библиотеки компонентов
  • Научитесь быстро адаптировать дизайн под разные устройства (десктоп, планшет, смартфон)
  • Научитесь использовать полезные плагины Figma
  • Научитесь организовывать работу с маленькими и большими проектами в Figma
  • Узнаете, как безопасно презентовать макеты заказчику и передавать разработчику
  • Будете создавать кликабельные прототипы макетов, настраивать hover‑эффекты и поп-апы.

Преподаватель – Ольга Чернова
Сооснователь Айтилогии
UX/UI дизайнер, Product дизайнер
Автор и наставник обучающего курса «Мир веб-дизайна» и «Figma для дизайнеров»
Под руководством Ольги наши начинающие веб-дизайнеры создали более 1500 дизайн-макетов!

Отзывы о курсе доступны на сайте.

Подробнее о курсе Figma →

Курс «Дизайн на Figma от Contented»

Бесплатно

Ссылка на сайт: https://live.contented.ru/figma-free-course

  • Подробные уроки от эксперта
  • Первый кейс в твоё дизайнерское портфолио
  • Полезные подарки.
Перейти на официальный сайт →

Figma графический онлайн-редактор для создания баннеров, прототипов сайтов и интерфейсов приложений. С него начинается путь в графический, UX/UI и веб-дизайн.

На курсе ты:

  • Познакомишься с основами Figma
  • Прокачаешь дизайнерские навыки
  • Создашь иконку и баннер
  • Узнаешь больше о работе дизайнера
  • Получишь бесплатную карьерную консультацию
  • Начнешь прямой путь в дизайн.

Курс будет полезен, если ты:

  • Планируешь освоить графический, веб или UX/UI-дизайн и не знаешь, с чего начать.
  • Хочешь добавить новый скилл в резюме;
  • Задумываешься о профессии дизайнера;

Что говорят о курсе:

– «Всё понравилось. Понятное донесение информации, всё разложили по полочкам, рассказали простым языком.»

– «Замечательный лектор. Так как я новичок в этом деле, боялась, что будет сложно. Но оказалось намного проще чем я ожидала.»

Подробнее о курсе Figma →

Курс «Figma: Быстрый старт от Uprock»

Бесплатно

Ссылка на сайт: https://www.school.uprock.ru/figma

Стань профессионалом в Figma — самом популярном и удобном сервисе для веб‑дизайнеров.

Перейти на официальный сайт →

Figma ― онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.

Программа обучения:

  1. Введение
    О графическом редакторе Figma, его преимуществах и возможностях.
  2. Регистрация и установка
    Как зарегистрироваться в Figma, установка редактора и необходимых расширений для работы в редакторе.
  3. Платная и бесплатная версии
    Чем отличается платная версия от бесплатной, достаточно ли бесплатной версии для полноценной работы дизайнера и какие есть преимущества у платной версии.
  4. Интерфейс программы
    В этом уроке вы познакомитесь с панелью навигации и менеджером файлов Figma, узнаете, как начать работу в Figma и как создать проект для совместной работы с командой.
  5. Графический редактор
    В этом уроке вы изучите рабочую область Figma и детально разберете основные панели редактора: панель инструментов, панель слоев и панель параметров.
  6. Основные инструменты и их параметры
    На примере отрисовки макета вы подробно рассмотрите такие инструменты, как: Frame, Shapes, Image, Line, Text и их параметры, необходимые в работе дизайнера интерфейсов. Освоив их, вы сможете спроектировать макет для любого сайта.
  7. Направляющие и сетка
    Вы научитесь работать с такими важными инструментами, как Layout Grid, направляющие и линейки. Узнаете, как выставить основные направляющие, настроить сетку, каких типов она бывает и как помогает дизайнеру в его работе.
  8. Маски и кадрирование фото
    Узнаете, для чего дизайнеры используют такой инструмент, как Маска. А также познакомитесь с широкими возможностями кадрирования для максимально удобной работы с изображениями в Figma.
  9. Стили (Styles)
    В этом уроке вы изучите очень полезный инструмент Figma – Стили. Вы разберете Стили для текста, для цвета и эффектов. Узнаете, для чего они нужны, как их настраивать и как с ними работать.
  10. Компоненты (Components)
    Изучите инструмент Components, узнаете для чего он нужен и в чем его польза, научитесь создавать компоненты и работать с ними в своих проектах.
  11. Авто лейауты (Auto layouts)
    В этом уроке вы узнаете, как работать с инструментов Auto layout, где его применять и как правильно настраивать.
  12. Варианты (Variants)
    Погрузитесь дальше в функциональные возможности Figma и научитесь работать с инструментом Variants, правильно его настраивать и узнаете, где его удобно применять
  13. Адаптивность и инструмент Constraints
    В этом уроке вы научитесь работать с инструментом Constraints и настраивать компоненты в своих макетах так, чтобы их легко можно было адаптировать под любое разрешение.
  14. Рисуем тестовый макет
    Нарисуем вместе тестовый макет и закрепим все, что разобрали выше на практике. Сначала мы отрисуем прототип — это ч/б вариант макета без картинок и стилизованных элементов, затем добавим фотографии и цвет.
  15. Типовые размеры элементов
    В этом уроке вы узнаете об оптимальных размерах шрифта, отступов, изображений, кнопок, иконок и других основных элементов интерфейса. Это будет вашим ориентиром на пути к гармоничному и качественному дизайну.
  16. Правила оформления макета
    Вы узнаете ряд ценных правил по оформлению макета и работе со слоями, которых необходимо придерживаться.
  17. Типовые размеры элементов
    В этом уроке вы узнаете об оптимальных размерах шрифта, отступов, изображений, кнопок, иконок и других основных элементов интерфейса. Это будет вашим ориентиром на пути к гармоничному и качественному дизайну.
  18. Рекомендации по работе с макетами
    Вы получите несколько полезных рекомендаций по оптимизации вашего проекта в Figma, чтобы файл не подвисал во время работы, автоматически сохранялся и ваша работа была максимально комфортной и быстрой.
  19. Быстрые клавиши – must have список
    Научитесь работать горячими клавишами, как настоящие профессионалы! 🙂 Горячие клавиши существенно ускоряют процесс.
  20. Передача макетов разработчику
    Несколько полезных правил для дизайнера о том, как подготовить свой проект для передачи в разработку. Разработчик скажет вам большое спасибо, а вы избавите себя от лишних вопросов во время разработки и сэкономите для себя кучу времени
  21. Плагины Figma
    Список полезных и удобных в работе плагинов Figma. Рекомендуем к установке! п.с.: Список периодически обновляется.

Сертификат
Все созданные вами проекты проходят нашу внутреннюю систему оценки, аналогичную той, которую мы используем в нашей студии в работе с реальными проектами.
В зависимости от результатов мы присваиваем проекту статус «золотого» или стандартного.

Автор курса – Евгений Кузьмин
Обладатель более 50 международных наград в сфере дизайна, в том числе в номинации «Лучший сайт года». В качестве арт‑директора и продюсера реализовал более 500 интернет‑проектов. Является евангелистом стиля минимализм. Делал проекты для таких брендов как AXE, Beeline, Coca‑cola, Lipton, Yota, СДЭК.

Подробнее о курсе Figma →

Курс «Figma от Алексей Бычков»

Бесплатно

Ссылка на сайт: https://pofig.me/videos/figma-course/

«Это подробный, понятный, интересный и бесплатный курс по Фигме 🙂 Без монотонного скучного бубнежа себе под нос. Без воды и по делу на обычном языке и на рабочих макетах веб-дизайнера фрилансера!»

Перейти на официальный сайт →

Содержание:

  1. Аккаунт, история версий, хоткеи
  2. Гамбургер меню, предпочтения
  3. Инструменты и калькулятор
  4. Слои, маски и массовое переименование
  5. Сетки. Bootstrap. 8 px grid
  6. Привязки
  7. Компоненты
  8. Компоненты и адаптив
  9. Выравнивания, Tidy Up
  10. Текст
  11. Цвет, градиенты, изображения
  12. Обводка
  13. Эффекты: блюры, тени
  14. Библиотека команды
  15. Варианты
  16. Прототипы в Фигме (часть 1)
  17. Панель кода и экспорт
  18. Ссылка на проект
  19. Плагины
  20. Auto Layout в Фигме
  21. FigJam.
Подробнее о курсе Figma →

Курс «Figma от Высшая школа «Среда обучения»»

Цена: 10 000 руб.

Ссылка на сайт: https://design.sredaobuchenia.ru/course/figma

Освойте основы Figma. Научитесь проектировать экраны приложений и сайтов со своими компонентами и дизайн-системой, создавать прототипы и использовать программы для командной работы.

  • Онлайн–формат
  • 9 вебинаров
  • Продолжительность занятия — 1 час 20 минут.
Перейти на официальный сайт →

Вы будете посещать занятия вместе со студентами Факультета дизайна, а выполненные задания проверит преподаватель — практикующий дизайнер, который поставит оценку, укажет на ошибки и даст профессиональный совет.

Программа:

  1. Регистрация в Figma. Файлы, проект, верхний тулбар и темная панель
  • Клиенты и дополнения Figma
  • Настройка окружения
  • Файлы
  • Верхний тулбар
  • Темная панель
  • Практическое задание
  1. Рабочая область, панель слоев и страницы, панель свойств, фреймы и шейпы
  • Рабочая область и масштаб
  • Фон
  • Линейки и направляющие
  • Слои и страницы
  • Фреймы и панель свойств
  1. Фреймы, работа с сеткой и плагины
  • Создание сетки
  • Повтор шейпов
  • Инструмент «Перо»
  • Практическое задание
  1. Текст, библиотека стилей и привязка к сетке
  • Создание библиотеки стилей текстов
  • Типографика
  • Название текстовых стилей
  • Как вписывать стили в сетку
  • Практическое задание
  1. Цвет, заливка и градиенты. Библиотека цветов
  • Типы заливки
  • Создание библиотеки цветов файла
  • Системность в названиях цветов
  1. Адаптивность и ограничители. Auto Layout
  • Разбор автолейаутов
  • Адаптивность на примере создания шапки
  1. Создание компонента, мультикомпоненты и библиотеки
  • Создание кнопки с иконкой и состояниями компонента
  • Практическое задание
  1. Прототипирование
  • Состояния и действия в прототипе на примере подготовленных экранов
  • Практическое задание
  1. Дизайн-ревью
  • Разбор практических заданий
  • Ответы на вопросы.

Преподаватель – Анастасия Залесова
Дизайнер
Главный дизайнер в «Сбербанке». Выпускница Школы Дизайна НИУ ВШЭ.
Участница хакатонов. Проектировала интерфейсы мобильных приложений, в том числе призовой кейс от компании «Росбанк».

Подробнее о курсе Figma →

Курс «Проектирование портфолио в Figma и Tilda от Открытое образование»

Цена: нет информации

Ссылка на сайт: https://openedu.ru/course/spbu/FIGMA_TILDA/

  • Длительность курса — 8 недель, от 4 до 5 часов в неделю.
Перейти на официальный сайт →

Практико-ориентированный курс посвящен базовой методологии создания сайта-портфолио. Курс разделен на тематические модули, которые позволят последовательно изучить необходимый материал, начиная от разбора основополагающих принципов дизайна и заканчивая выбором шрифта для конкретного проекта.

В процессе работы будет разобрано множество примеров для наглядной демонстрации современных тенденций в веб-дизайне.
Также курс предполагает работу в графическом редакторе Figma и конструкторе сайтов Tilda. Прежде всего будет рассмотрен функционал каждой программы. Далее будет сделан макет веб-версии портфолио за счет адаптации и последовательного переноса полиграфической версии. После на основе созданного макета будет сконструирован лендинг в Tilda.

Программа курса:

  1. Портфолио в вебе
  2. Композиция и пропорции в вебе
  3. Знакомство с программой Figma
  4. Построение композиции в Figma
  5. Прототипирование и анимирование в Figma
  6. Знакомство с конструктором Tilda
  7. Конструирование лендинга в Tilda
  8. Работа в Tilda Zero Block.

В результате освоения материалов курса слушатели:

  • научатся направлять внимание пользователя
  • узнают особенности работы пользователя на странице
  • познакомятся с ключевыми особенностями веб-формата
  • поймут основы типографики в вебе и научиться самостоятельно создавать шрифтовые пары
  • узнают базовые принципы композиции и научиться видеть их на примерах работ дизайнеров
  • научатся работать с инструментами Figma
  • познакомятся с блочным конструктором Tilda
  • научатся работать с базовыми блоками и Zero Block.
Подробнее о курсе Figma →

Курс «Гид по Фигме для начинающих веб-дизайнеров от Tilda Education»

Бесплатно

Ссылка на сайт: https://tilda.education/articles-figma

Перейти на официальный сайт →

Figma (Фигма) — это графический онлайн-редактор для совместной работы. В нём можно создать прототип сайта, интерфейс приложения и обсудить правки с коллегами в реальном времени.
В этой статье рассмотрим инструменты и возможности Фигмы, популярные плагины и расскажем, где научиться работать с сервисом бесплатно.

Содержание:

  1. Для чего нужна Фигма
  2. Какие проекты можно создавать в Фигме
  3. Что ещё можно делать в Фигме
  4. Совместная работа в Фигме
  5. Начало работы в Фигме
  6. Как установить Фигму
  7. Интерфейс Фигмы
  8. Как устроен редактор файлов Фигмы
  9. Инструменты и возможности Фигмы
  10. Дополнительные возможности.
Подробнее о курсе Figma →

Курс «Веб-дизайн и создание сайтов в Figma и Tilda от Айтигенио»

Цена: разная стоимость

Ссылка на сайт: https://itgen.io/figma_tilda_education

Ваш ребенок научится создавать продающие и функциональные сайты, блоги, интернет-магазины без навыков программирования.

Перейти на официальный сайт →

Благодаря обучению, ребенок освоит самый популярный и простой графический редактор, который помогает создавать интерфейсы, дизайн сайтов и иллюстрации. Научится создавать и делать красивые и функциональные сайты.

Кроме полезных навыков, у ребят будет неограниченное пространство для фантазии и творчества. Можно будет создавать любые сайты и интерфейсы, на какие только хватит воображения.

Проходя обучение, ребята учатся самостоятельно принимать решения, делать выбор и добиваться поставленных целей.

Процесс обучения:

Курс разделен на 2 большие части

  1. Figma
    Ученик приобретает навыки пользования базовыми инструментами и разовьёт чувство стиля, симметрии, гармонии и красоты.
    Выпускной проект: дизайн интернет-магазина.
  • Основы и интерфейс, 25 – 30 ч.
  • Макетирование и прототипирование, 15 – 20 ч.
  • Продвинутые инструменты, 10 – 12 ч.
  1. Tilda
    Это онлайн-конструктор. Создатели платформы придумали новый способ сделать сайт: его можно собирать из блоков. Можно не иметь навыков программиста и дизайнера, ошибиться сложно. Сайт получается красивым и с первых дней приносит пользу.
    На курсе изучаются простейшие шаблоны сайтов, сайты-одностраничники, блоги, интернет-магазины. Дополнительно работаем с платежными системами и СЕО продвижением.
    Ученик научится не только работать по заданию, но и приобретет навыки общения с заказчиком и составления технического задания.
    Выпускной проект: продающий сайт, блог или интернет-магазин.
  • Основы создания сайтов, 18 – 20 ч.
  • Веб-анимация, 8 – 10 ч.
  • Анализ и продвижение, 4 – 6 ч.
Подробнее о курсе Figma →
Сергей Савин

Высшее образование в сфере «Образование и педагогика», работал учителем математики с 2006 по 2014 год. Эксперт по выбору профессии и курсов с 2018 года. Изучаю отзывы о курсах, онлайн-школах, колледжах и институтах, составляю ТОП-рейтинги.

Оцените автора
Савин.Инфо