Приветствую в своём блоге! 🙂 В этой подборке разберём лучшие бесплатные и платные курсы 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 онлайн-уроков
- Знакомство с Figma
Разберётесь в интерфейсе и базовых настройках программы. Научитесь использовать геометрические фигуры, слои и текстовые поля. Соберёте свой первый прототип. - Иконки, иллюстрации и картинки
Узнаете, как создавать собственные иконки и обрабатывать изображения, используя внутренние инструменты Figma. Сможете делать дизайн-макеты с нуля, не используя сторонние редакторы. - Компоненты
Узнаете, как создавать компоненты и пользоваться панелью настроек. Научитесь делать интерактивные прототипы и показывать заказчику, как люди будут пользоваться будущим сайтом. - Библиотеки компонентов и общие стили
Сможете создавать библиотеки стилей и UI Kit, чтобы стандартизировать элементы интерфейса. Научитесь верстать аккуратные макеты с помощью модульных сеток. - Auto Layout и Variants
Поймёте, как объединить макеты в единую систему с помощью функции Variants. Сможете создавать и адаптировать под разные устройства сложные элементы интерфейса. - Сложные многостраничные документы
Научитесь работать с базовыми экранами и создавать дерево страниц. Освоите бета-версию функции Branches. Поймёте, как организовать работу команды над разными версиями одного макета. - Дополнительные возможности и сообщество авторов
Узнаете, какие плагины помогут вам быстро создавать драфтовые проекты и работать с правками. Научитесь добавлять анимацию в прототипы. - Подготовка макета для разработчиков
Сможете показать разработчику технические аспекты проекта и код компонентов. Научитесь оптимизировать работу команды с помощью плагина Figma Jam.
Спикер – Юлия Соловьёва
Дизайнер, арт-директор веб-бюро «Синий Муравей»
Сотрудничала с L’Oréal, ЛСР, «Сколково» и другими крупными проектами.
Отзывы об обучении в Skillbox доступны на сайте.
2 место. Курс «Figma от irs.academy»
Цена: 26 700 руб.
Ссылка на сайт: https://irs.academy/kurs_po_figma
Научитесь разработке интерфейсов и прототипированию в Figma, и получите работу в области веб-дизайна.
- Кол-во часов: 8 часов
- Кол-во занятий: 6 уроков.
Для кого будет полезно?
- Новичкам
Хотите попробовать себя в веб-дизайне? Онлайн-курс по Figma будет хорошим стартом! - Начинающим веб-дизайнерам
Чувствуете нехватку знаний и хотите овладеть полезным инструментом профессионально? Онлайн-курс по Figma вам подойдет! - Веб-дизайнерам
Нужен новый инструмент и профессиональные фишки? Поможем систематизировать имеющиеся знания и дополним их! - Фрилансерам
Хотите получать крупные суммы, работая удалённо? Освойте Figma и берите выгодные заказы, пройдя наш онлайн-курс. - Всех, кого интересует Figma
Хотите освоить программу для воплощения собственных идей или заработка? Онлайн-курс поможет приобрести необходимые навыки.
После окончания курса вы сможете:
- Эффективно использовать инструменты Figma
- Создать приложение, сайт и т.д.
- Находить заказчиков и продуктивно взаимодействовать с ними
- Зарабатывать фрилансом из любой точки мира
- Получить интересную работу в престижной компании.
Программа курса:
- Знакомство с Figma
Фигма как современный инструмент разработки интерфейсов. Основы работы в данной программе, ее преимущество для дизайнера. - Возможности Figma. Инструментарий программы
Изучение всех особенностей и свойств инструментов Figma. - Компоненты и прототипирование
Познаем все нюансы и скрытые фишки программы, а также рассмотрим возможности крутого прототипирования интерфейса. - Бог Фи
Тайные знания применяем в практике, создаем интерфейс приложения в Фигме. - Дизайн сайта
На пятом уроке мы поговорим об этапах создания сайта и их взаимосвязи. - Закрепляющий урок. Создаем дизайн своего приложения
На шестом уроке — практика по созданию веб-приложения при помощи Figma.
Преподаватель – Александр Михайлов
«Я более 10 лет занимаюсь Web, Ui-, UX-дизайном. Являюсь действующим дизайнером компании LUNA App, IRS, Hedu.
Постоянное обучение и совершенствование знаний в области UI и UX позволяет мне использовать в работе современные тренды.
Я готов поделиться с вами своими знаниями, которые накопились за годы кропотливой работы. Многие ученики, закончившие обучение, уже работают в сфере дизайна и хорошо зарабатывают. Присоединяйтесь к их числу! Научу вас реализовывать всё задуманное в программе” 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. Начальный уровень от GeekBrains»
Цена: 20 500 руб.
Ссылка на сайт: https://gb.ru/courses/1210
- Видеокурс
- Длительность — 1 месяц, 5 уроков.
Этот курс оригинален и полностью повторяет материал наших платных программ обучения. Вы получаете тот же материал, что и наши студенты, включая домашнее задание в некоторых видеоуроках. Мы рекомендуем использовать его для саморефлексии и проверки знаний тогда, когда вам это удобно. Проверка выполненного задания преподавателем не предусматривается.
Программа курса:
- Onboarding: вводный урок. UI Components: Swatch Library
Что такое Figma: цели, возможности Примеры макетов. How-to, паттерны взаимодействия с данным функционалом. Инструменты: пипетка, подбор цветов, цветовая палитра, градиенты, использование Swatch lib для примитивов. - UI Components: Text styles
Как создавать текстовый слой; как создать свои текстовые стили, которые будут повторяться в интерфейсе; как разделить их на группы, иерархию - UI Components: Buttons
Навык работы с примитивами, соединение слоев в группы и фреймы, архитектура хранения компонентов - UI Components: Constrains
Адаптивность элементов под разные размеры экрана. - UI Components: Навигация
Создание элементов навигации.
Отзывы:
Анастасия Бурская
«Интересно посмотреть кусочек работы глазами дизайнера, спасибо за курс! Побольше бы таких вводных с разных сторон (аналитика, ПМ, дизайн UX и отдельно UI, тестировщик) + вводные неглубокие уроки по основным приложениям для вышеперечисленных специализаций».
Анатолий Стамбуло
«Отличный курс для быстрого старта! Лишь самая необходимая информация. Всё просто, понятно и по делу. Рекомендую данный курс не только дизайнерам. Как Андроид разработчик, рекомендую коллегам пройти этот курс. И другим мобильным разработчикам. Курс не перегружен сложным материалом, а содержит простые и конкретные приемы работы.»
Курс «Профессиональный дизайн сайтов в Figma от Pentaschool»
Цена: 19 000 ₽
Ссылка на сайт: https://pentaschool.ru/program/figma
Освойте редактор на продвинутом уровне, соберите портфолио и найдите первых клиентов.
- Доступ к урокам останется навсегда после успешного прохождения курса.
- Профессиональное комьюнити и обратная связь от экспертов.
Figma — популярный онлайн-сервис для разработки дизайна сайтов и интерфейсов. Это многопользовательская программа, которая позволяет нескольким дизайнерам одновременно редактировать файл.
Для работы в Figma не нужно разбираться в программировании или владеть специальными навыками — сервис подходит даже для тех, кто только начинает своё знакомство с веб-дизайном.
По итогам этого курса вы научитесь:
- Работать со всеми основными инструментами Figma
- Подготавливать мудборды для клиентов
- Разрабатывать с нуля дизайн лендингов, многостраничных сайтов и мобильных приложений
- Создавать простую анимацию интерфейсов
- Подготавливать техническое задание для разработчиков
- Разрабатывать кликабельные прототипы сайтов и мобильных приложений.
Программа:
- Основы Figma
Вы познакомитесь с инструментами Figma, научитесь работать со слоями, изображениями, текстом и модульной сеткой. Вы узнаете, как настраивать компоненты, изучите принципы создания мудбордов, а также попробуете работать с эффектами. - Дизайн сайтов в Figma
Вы перейдете к созданию многостраничных сайтов, научитесь делать разные типы меню, познакомитесь с горизонтальной, вертикальной и нестандартной навигацией. Вы узнаете, как наполнять сайт контентом, изучите принципы юзабилити, познакомитесь с возможностями плагинов и подготовите проект для портфолио. - Дизайн мобильных приложений в 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 от Наука Дизайна»
Бесплатно
Ссылка на сайт: https://www.youtube.com/playlist?list=PLaIuVNKRYUyEoKnY0UwapHPk8fEaREHPA
Видеоуроки:
- Интерфейс.
- Манипуляция с объектами.
- Frame & Slice tool.
- Векторные объекты.
- Работа с кривыми и пером.
- Слои и маски.
- Текст.
- Цвет.
- Сетки и направляющие.
- Стили.
- Constraints
- Компоненты.
- Выравнивание и умное выделение.
- Прототипирование.
- Интеграция и экспорт.
Курс «Figma от Tilda Publishing»
Бесплатно
Ссылка на сайт: https://tilda.school/figma-free-course-0
Содержание:
- Начало работы
- Фреймы
- Сетка
- Объекты
- Изображения
- Кривые
- Текст
- Выравнивание
- Хоткеи
- Стили
- Share
- Плагины
- Tilda
Курс «Figma для веб-дизайнера от beONmax»
Цена: от $7.8
Ссылка на сайт: https://beonmax.com/courses/figma/
Онлайн курс по Figma для детального изучения всех инструментов программы. В курсе узнаете основы дизайна, сформируете свою библиотеку компонентов на основе принципов атомарного дизайна. Создадите интерактивные макеты мобильного приложения в своё портфолио.
- 52 видеоурока, ~ 8 часов.
Чему Вы научитесь?
- Внутренний и внешний интерфейс программы
- Инструменты Figma
- Frame — очень важная часть. Фрейм — это основа программы.
- Компоненты
- Contsraints (Ограничения/привязки)
- Система сеток и направляющих в Figma
- Плагины
- Прототипирование
- Стили
- Атомарный дизайн
- Основы своей библиотеки компонентов.
На практике создадите макеты мобильных приложений с применением полученных знаний, используя свою библиотеку компонентов. Также мы сделаем кликабельные прототипы этих приложений.
Программа:
- Введение, о курсе
- Основы Figma
- Инструменты Figma
- Профессиональные инструменты Figma
- Создание своей библиотеки компонентов
- Практика работы в Figma. Создаём макет приложения
- Прототипирование в Figma
- Практика работы в Figma — 2. Создаём макет приложения
- Завершение курса – получение сертификата.
Отзывы:
Evgenii Fedorenko
«Курс дает общее представление, но достаточно подробно и доходчиво. Отлично.»
Николай Ефимов
«Интересный курс! Ведущий ясно и понятно объясняет, теперь надо практикой подкрепить пройденное. Спасибо.»
Ольга Дерюшева
«Курс очень понравился. Всё доходчиво и понятно. Спасибо автору.»
Курс «Figma от Infogra»
Бесплатно
Ссылка на сайт: https://infogra.ru/lessons/36-urokov-dlya-novichkov-po-figma
Подборка полезных уроков для тех, кто хочет освоить Фигму или перейти на нее с других редакторов. В подборке есть как уроки по освоению интерфейса самой программы, так и по созданию дизайна цифрового продукта.
Содержание:
- Интерфейс
- Манипуляция с объектами
- Frame & Slice tool
- Векторные объекты
- Работа с кривыми и пером
- Слои и маски
- Текст
- Цвет
- Сетки и направляющие
- Стили
- Constraints
- Компоненты
- Выравнивание и умное выделение
- Прототипирование
- Интеграция и экспорт
- Обзор интерфейса: аккаунт, история версий, мультипросмотр макета
- Обзор меню и предпочтений
- Инструменты и калькулятор
- Панель слоев и массовое
- Модульная сетка в Фигме
- Привязки (constraints) в Figma
- Компоненты в Фигме #1 — Простые примеры. Когда использовать?
- Компоненты в Фигме #2 — Сложные примеры. Ломаем, костылим 🙂
- Компоненты в Фигме #3 — Рокировка
- Компоненты в Фигме #4 — Иконки и адаптив
- Компоненты в Фигме #5 — Адаптив через дубликат макета
- Выравнивания (align) в Figma, Tidy Up, упаковка и дистрибьты
- Текст в Figma
- Цвет, градиенты, изображения в Figma
- Обводка и эффекты: тени, блюры, бордеры в Figma
- Командная библиотека компонентов в Figma
- Прототипы в Figma и умные анимации (smart animate)
- Панель кода и экспорт
- Ссылка на проект в Фигме (share Figma)
- Как установить, включить плагины в Figma | ? Plugins
- Auto Layout в Figma ? (стеки в Фигме).
Курс «Основы Figma от Нетология»
Бесплатно
Ссылка на сайт: https://netology.ru/programs/osnovy-figma
Поможем на практике освоить базовые инструменты популярного графического редактора — бесплатно.
- Когда: В любое время
- Формат: Видеолекции
- Уровень: Для начинающих.
Во время обучения вы выполните 10 заданий и получите необходимую базу для работы в Figma. Макеты сайта, рекламные изображения для соцсетей — всё это может стать частью вашего портфолио.
Научитесь работать с ключевыми инструментами Figma:
- Шейпами
- Сетками и направляющими
- Текстом
- Масками
- Компонентами
- Стилями
- Инструментами прототипирования
- Эффектами
- Интеграцией растровых изображений
- Цветом и градиентами.
Программа курса:
- Введение в Figma
Разберём интерфейс графического редактора и необходимые настройки перед началом работы - Рекламный баннер
Изучим шейпы, научимся строить сетку и работать с текстом и пространством на примере баннера - Работа с интерфейсом
Поговорим об основах UI/UX-дизайна, узнаем, как и с чем работает дизайнер интерфейсов - Лендинг
Узнаете, какие задачи решает дизайнер при разработке сайта, и создадите макет лендинга - Адаптивный дизайн
Разберётесь, как подготовить макет к жизни, и узнаете про состояния элементов и работу с адаптивностью.
Преподаватели:
— Иван Крестов
Арт-директор в Mish.design
— Андрей Кретинин
Дизайнер в Mish.design.
Курс «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 на профессиональном уровне.
Программа курса:
- Введение в курс
Познакомитесь с основателем Айтилогии и автором курса Ольгой Черновой, а также узнаете больше о том, как будет проходить обучение на курсе. - Знакомство с Figma: обзор интерфейса и возможностей
Познакомитесь с возможностями Figma. Установите программу и настроите её под себя. Разберетесь с рабочими областями и особенностью организации рабочего пространства. Узнаете о командах и комьюнити, о том, как делать экспортировать и шарить проекты коллегам, команде и заказчикам. Выполните контрольное задание по модулю. - Инструменты в Figma. Работа с графикой
Познакомитесь и научитесь работать правильно со всеми инструментами, которые есть в программе. Будете уметь использовать их как отдельно, так и в комплексе друг с другом. Узнаете о 20+ удобных фишек для работы в Figma, которые ускорят работу и сделают её удобнее. Научитесь создавать в Figma иконки и создадите ваш собственный набор иконок. Создадите 2 дизайн-концепта в Figma с применением изученных инструментов и эффектов. - Профессиональные средства для работы в Figma
Узнаете, как работать с системой сеток и направляющих. Научитесь создавать и настраивать компоненты, работать с вариантами, правильно работать с ограничениями и привязками, ускорять и делать удобной работу с помощью функций контейнера, стилей и других профессиональных инструментов в Figma. Научитесь пользоваться комьюнити и плагинами в Figma и узнаете, как создавать дизайн за 1 час. - Дизайн-система и библиотека компонентов в Figma
Научитесь создавать дизайн-систему и вашу собственную библиотеку компонентов в Figma. Узнаете, как правильно организовать рабочее пространство с ними. Создадите дизайн-систему и библиотеку компонентов для вашего собственного проекта. Узнаете, как корректно организовать это для работы с разработчиками. - Кликабельный прототип в Figma. Анимация
Научитесь создавать прототипы и дизайн-макеты в Figma, профессионально работать с панелью Prototype. Научитесь применять профессиональные инструменты Figma в комплексе друг с другом, что позволит вам работать чётче и быстрее, а также быстро редактировать проект и вносить изменения и дополнения. Узнаете, как правильно, быстро и удобно работать с режимом просмотра прототипов. Научитесь применять вашу дизайн-систему и библиотеку компонентов в проекте и редактировать их. Будете уметь правильно демонстрировать прототипы заказчикам и коллегам. Научитесь создавать кликабельные прототипы с настройками различных эффектов и переходов с помощью Prototype. Освоите Figma Animate и научитесь создавать анимацию дизайна. - Быстрый адаптивный дизайн в Figma
Научитесь быстро адаптировать ваш дизайн под устройства с любым разрешением. Создадите адаптивные макеты для вашего проекта. Познакомитесь с Figma Mirror. - Smart Animate
Вы изучите Smart Animate в Figma и научитесь анимировать ваши дизайн-макеты. - Подведём итоги
Подытожим всё, чему вы научились в Figma за этот курс! И скажем, какие вы молодцы 🙂
Что вы будете уметь после обучения на курсе:
- Разберем по косточкам функционал и возможности Figma
- Узнаете о фишках, которые ускорят вашу работу
- Научитесь работать с инструментами в комплексе друг с другом
- Научитесь создавать уникальные иконки для проектов
- Будете создавать дизайн-системы, применять стили в проектах
- Научитесь создавать собственные библиотеки компонентов
- Научитесь быстро адаптировать дизайн под разные устройства (десктоп, планшет, смартфон)
- Научитесь использовать полезные плагины Figma
- Научитесь организовывать работу с маленькими и большими проектами в Figma
- Узнаете, как безопасно презентовать макеты заказчику и передавать разработчику
- Будете создавать кликабельные прототипы макетов, настраивать hover‑эффекты и поп-апы.
Преподаватель – Ольга Чернова
Сооснователь Айтилогии
UX/UI дизайнер, Product дизайнер
Автор и наставник обучающего курса «Мир веб-дизайна» и «Figma для дизайнеров»
Под руководством Ольги наши начинающие веб-дизайнеры создали более 1500 дизайн-макетов!
Отзывы о курсе доступны на сайте.
Курс «Дизайн на Figma от Contented»
Бесплатно
Ссылка на сайт: https://live.contented.ru/figma-free-course
- Подробные уроки от эксперта
- Первый кейс в твоё дизайнерское портфолио
- Полезные подарки.
Figma – графический онлайн-редактор для создания баннеров, прототипов сайтов и интерфейсов приложений. С него начинается путь в графический, UX/UI и веб-дизайн.
На курсе ты:
- Познакомишься с основами Figma
- Прокачаешь дизайнерские навыки
- Создашь иконку и баннер
- Узнаешь больше о работе дизайнера
- Получишь бесплатную карьерную консультацию
- Начнешь прямой путь в дизайн.
Курс будет полезен, если ты:
- Планируешь освоить графический, веб или UX/UI-дизайн и не знаешь, с чего начать.
- Хочешь добавить новый скилл в резюме;
- Задумываешься о профессии дизайнера;
Что говорят о курсе:
– «Всё понравилось. Понятное донесение информации, всё разложили по полочкам, рассказали простым языком.»
– «Замечательный лектор. Так как я новичок в этом деле, боялась, что будет сложно. Но оказалось намного проще чем я ожидала.»
Курс «Figma: Быстрый старт от Uprock»
Бесплатно
Ссылка на сайт: https://www.school.uprock.ru/figma
Стань профессионалом в Figma — самом популярном и удобном сервисе для веб‑дизайнеров.
Figma ― онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
Программа обучения:
- Введение
О графическом редакторе Figma, его преимуществах и возможностях. - Регистрация и установка
Как зарегистрироваться в Figma, установка редактора и необходимых расширений для работы в редакторе. - Платная и бесплатная версии
Чем отличается платная версия от бесплатной, достаточно ли бесплатной версии для полноценной работы дизайнера и какие есть преимущества у платной версии. - Интерфейс программы
В этом уроке вы познакомитесь с панелью навигации и менеджером файлов Figma, узнаете, как начать работу в Figma и как создать проект для совместной работы с командой. - Графический редактор
В этом уроке вы изучите рабочую область Figma и детально разберете основные панели редактора: панель инструментов, панель слоев и панель параметров. - Основные инструменты и их параметры
На примере отрисовки макета вы подробно рассмотрите такие инструменты, как: Frame, Shapes, Image, Line, Text и их параметры, необходимые в работе дизайнера интерфейсов. Освоив их, вы сможете спроектировать макет для любого сайта. - Направляющие и сетка
Вы научитесь работать с такими важными инструментами, как Layout Grid, направляющие и линейки. Узнаете, как выставить основные направляющие, настроить сетку, каких типов она бывает и как помогает дизайнеру в его работе. - Маски и кадрирование фото
Узнаете, для чего дизайнеры используют такой инструмент, как Маска. А также познакомитесь с широкими возможностями кадрирования для максимально удобной работы с изображениями в Figma. - Стили (Styles)
В этом уроке вы изучите очень полезный инструмент Figma – Стили. Вы разберете Стили для текста, для цвета и эффектов. Узнаете, для чего они нужны, как их настраивать и как с ними работать. - Компоненты (Components)
Изучите инструмент Components, узнаете для чего он нужен и в чем его польза, научитесь создавать компоненты и работать с ними в своих проектах. - Авто лейауты (Auto layouts)
В этом уроке вы узнаете, как работать с инструментов Auto layout, где его применять и как правильно настраивать. - Варианты (Variants)
Погрузитесь дальше в функциональные возможности Figma и научитесь работать с инструментом Variants, правильно его настраивать и узнаете, где его удобно применять - Адаптивность и инструмент Constraints
В этом уроке вы научитесь работать с инструментом Constraints и настраивать компоненты в своих макетах так, чтобы их легко можно было адаптировать под любое разрешение. - Рисуем тестовый макет
Нарисуем вместе тестовый макет и закрепим все, что разобрали выше на практике. Сначала мы отрисуем прототип — это ч/б вариант макета без картинок и стилизованных элементов, затем добавим фотографии и цвет. - Типовые размеры элементов
В этом уроке вы узнаете об оптимальных размерах шрифта, отступов, изображений, кнопок, иконок и других основных элементов интерфейса. Это будет вашим ориентиром на пути к гармоничному и качественному дизайну. - Правила оформления макета
Вы узнаете ряд ценных правил по оформлению макета и работе со слоями, которых необходимо придерживаться. - Типовые размеры элементов
В этом уроке вы узнаете об оптимальных размерах шрифта, отступов, изображений, кнопок, иконок и других основных элементов интерфейса. Это будет вашим ориентиром на пути к гармоничному и качественному дизайну. - Рекомендации по работе с макетами
Вы получите несколько полезных рекомендаций по оптимизации вашего проекта в Figma, чтобы файл не подвисал во время работы, автоматически сохранялся и ваша работа была максимально комфортной и быстрой. - Быстрые клавиши – must have список
Научитесь работать горячими клавишами, как настоящие профессионалы! 🙂 Горячие клавиши существенно ускоряют процесс. - Передача макетов разработчику
Несколько полезных правил для дизайнера о том, как подготовить свой проект для передачи в разработку. Разработчик скажет вам большое спасибо, а вы избавите себя от лишних вопросов во время разработки и сэкономите для себя кучу времени - Плагины Figma
Список полезных и удобных в работе плагинов Figma. Рекомендуем к установке! п.с.: Список периодически обновляется.
Сертификат
Все созданные вами проекты проходят нашу внутреннюю систему оценки, аналогичную той, которую мы используем в нашей студии в работе с реальными проектами.
В зависимости от результатов мы присваиваем проекту статус «золотого» или стандартного.
Автор курса – Евгений Кузьмин
Обладатель более 50 международных наград в сфере дизайна, в том числе в номинации «Лучший сайт года». В качестве арт‑директора и продюсера реализовал более 500 интернет‑проектов. Является евангелистом стиля минимализм. Делал проекты для таких брендов как AXE, Beeline, Coca‑cola, Lipton, Yota, СДЭК.
Курс «Figma от Алексей Бычков»
Бесплатно
Ссылка на сайт: https://pofig.me/videos/figma-course/
«Это подробный, понятный, интересный и бесплатный курс по Фигме 🙂 Без монотонного скучного бубнежа себе под нос. Без воды и по делу на обычном языке и на рабочих макетах веб-дизайнера фрилансера!»
Содержание:
- Аккаунт, история версий, хоткеи
- Гамбургер меню, предпочтения
- Инструменты и калькулятор
- Слои, маски и массовое переименование
- Сетки. Bootstrap. 8 px grid
- Привязки
- Компоненты
- Компоненты и адаптив
- Выравнивания, Tidy Up
- Текст
- Цвет, градиенты, изображения
- Обводка
- Эффекты: блюры, тени
- Библиотека команды
- Варианты
- Прототипы в Фигме (часть 1)
- Панель кода и экспорт
- Ссылка на проект
- Плагины
- Auto Layout в Фигме
- FigJam.
Курс «Figma от Высшая школа «Среда обучения»»
Цена: 10 000 руб.
Ссылка на сайт: https://design.sredaobuchenia.ru/course/figma
Освойте основы Figma. Научитесь проектировать экраны приложений и сайтов со своими компонентами и дизайн-системой, создавать прототипы и использовать программы для командной работы.
- Онлайн–формат
- 9 вебинаров
- Продолжительность занятия — 1 час 20 минут.
Вы будете посещать занятия вместе со студентами Факультета дизайна, а выполненные задания проверит преподаватель — практикующий дизайнер, который поставит оценку, укажет на ошибки и даст профессиональный совет.
Программа:
- Регистрация в Figma. Файлы, проект, верхний тулбар и темная панель
- Клиенты и дополнения Figma
- Настройка окружения
- Файлы
- Верхний тулбар
- Темная панель
- Практическое задание
- Рабочая область, панель слоев и страницы, панель свойств, фреймы и шейпы
- Рабочая область и масштаб
- Фон
- Линейки и направляющие
- Слои и страницы
- Фреймы и панель свойств
- Фреймы, работа с сеткой и плагины
- Создание сетки
- Повтор шейпов
- Инструмент «Перо»
- Практическое задание
- Текст, библиотека стилей и привязка к сетке
- Создание библиотеки стилей текстов
- Типографика
- Название текстовых стилей
- Как вписывать стили в сетку
- Практическое задание
- Цвет, заливка и градиенты. Библиотека цветов
- Типы заливки
- Создание библиотеки цветов файла
- Системность в названиях цветов
- Адаптивность и ограничители. Auto Layout
- Разбор автолейаутов
- Адаптивность на примере создания шапки
- Создание компонента, мультикомпоненты и библиотеки
- Создание кнопки с иконкой и состояниями компонента
- Практическое задание
- Прототипирование
- Состояния и действия в прототипе на примере подготовленных экранов
- Практическое задание
- Дизайн-ревью
- Разбор практических заданий
- Ответы на вопросы.
Преподаватель – Анастасия Залесова
Дизайнер
Главный дизайнер в «Сбербанке». Выпускница Школы Дизайна НИУ ВШЭ.
Участница хакатонов. Проектировала интерфейсы мобильных приложений, в том числе призовой кейс от компании «Росбанк».
Курс «Проектирование портфолио в Figma и Tilda от Открытое образование»
Цена: нет информации
Ссылка на сайт: https://openedu.ru/course/spbu/FIGMA_TILDA/
- Длительность курса — 8 недель, от 4 до 5 часов в неделю.
Практико-ориентированный курс посвящен базовой методологии создания сайта-портфолио. Курс разделен на тематические модули, которые позволят последовательно изучить необходимый материал, начиная от разбора основополагающих принципов дизайна и заканчивая выбором шрифта для конкретного проекта.
В процессе работы будет разобрано множество примеров для наглядной демонстрации современных тенденций в веб-дизайне.
Также курс предполагает работу в графическом редакторе Figma и конструкторе сайтов Tilda. Прежде всего будет рассмотрен функционал каждой программы. Далее будет сделан макет веб-версии портфолио за счет адаптации и последовательного переноса полиграфической версии. После на основе созданного макета будет сконструирован лендинг в Tilda.
Программа курса:
- Портфолио в вебе
- Композиция и пропорции в вебе
- Знакомство с программой Figma
- Построение композиции в Figma
- Прототипирование и анимирование в Figma
- Знакомство с конструктором Tilda
- Конструирование лендинга в Tilda
- Работа в Tilda Zero Block.
В результате освоения материалов курса слушатели:
- научатся направлять внимание пользователя
- узнают особенности работы пользователя на странице
- познакомятся с ключевыми особенностями веб-формата
- поймут основы типографики в вебе и научиться самостоятельно создавать шрифтовые пары
- узнают базовые принципы композиции и научиться видеть их на примерах работ дизайнеров
- научатся работать с инструментами Figma
- познакомятся с блочным конструктором Tilda
- научатся работать с базовыми блоками и Zero Block.
Курс «Гид по Фигме для начинающих веб-дизайнеров от Tilda Education»
Бесплатно
Ссылка на сайт: https://tilda.education/articles-figma
Figma (Фигма) — это графический онлайн-редактор для совместной работы. В нём можно создать прототип сайта, интерфейс приложения и обсудить правки с коллегами в реальном времени.
В этой статье рассмотрим инструменты и возможности Фигмы, популярные плагины и расскажем, где научиться работать с сервисом бесплатно.
Содержание:
- Для чего нужна Фигма
- Какие проекты можно создавать в Фигме
- Что ещё можно делать в Фигме
- Совместная работа в Фигме
- Начало работы в Фигме
- Как установить Фигму
- Интерфейс Фигмы
- Как устроен редактор файлов Фигмы
- Инструменты и возможности Фигмы
- Дополнительные возможности.
Курс «Веб-дизайн и создание сайтов в Figma и Tilda от Айтигенио»
Цена: разная стоимость
Ссылка на сайт: https://itgen.io/figma_tilda_education
Ваш ребенок научится создавать продающие и функциональные сайты, блоги, интернет-магазины без навыков программирования.
Благодаря обучению, ребенок освоит самый популярный и простой графический редактор, который помогает создавать интерфейсы, дизайн сайтов и иллюстрации. Научится создавать и делать красивые и функциональные сайты.
Кроме полезных навыков, у ребят будет неограниченное пространство для фантазии и творчества. Можно будет создавать любые сайты и интерфейсы, на какие только хватит воображения.
Проходя обучение, ребята учатся самостоятельно принимать решения, делать выбор и добиваться поставленных целей.
Процесс обучения:
Курс разделен на 2 большие части
- Figma
Ученик приобретает навыки пользования базовыми инструментами и разовьёт чувство стиля, симметрии, гармонии и красоты.
Выпускной проект: дизайн интернет-магазина.
- Основы и интерфейс, 25 – 30 ч.
- Макетирование и прототипирование, 15 – 20 ч.
- Продвинутые инструменты, 10 – 12 ч.
- Tilda
Это онлайн-конструктор. Создатели платформы придумали новый способ сделать сайт: его можно собирать из блоков. Можно не иметь навыков программиста и дизайнера, ошибиться сложно. Сайт получается красивым и с первых дней приносит пользу.
На курсе изучаются простейшие шаблоны сайтов, сайты-одностраничники, блоги, интернет-магазины. Дополнительно работаем с платежными системами и СЕО продвижением.
Ученик научится не только работать по заданию, но и приобретет навыки общения с заказчиком и составления технического задания.
Выпускной проект: продающий сайт, блог или интернет-магазин.
- Основы создания сайтов, 18 – 20 ч.
- Веб-анимация, 8 – 10 ч.
- Анализ и продвижение, 4 – 6 ч.
