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

Кто такой дизайнер Figma?

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

Что делают дизайнеры Figma и чем занимаются?

Обязанности на примере одной из вакансий:

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

Что должен знать и уметь дизайнер Figma

Требования к дизайнерам Figma:

• Профессионально работать в Figma
• Готовить адаптивные макеты
• Добавлять интерактив в прототипы
• Создавать компоненты и библиотеки стилей
• Работать над проектом в команде
• Передавать макет в разработку

Востребованность и зарплаты дизайнеров Figma

На сайте поиска работы в данный момент открыто 2 283 вакансии, с каждым месяцем спрос на дизайнеров Figma растет.

Количество вакансий с указанной зарплатой дизайнера Figma по всей России:

• от 80 000 руб. – 541
• от 145 000 руб. – 267
• от 210 000 руб. – 112
• от 275 000 руб. – 55
• от 345 000 руб. – 27

Вакансий с указанным уровнем дохода по Москве:

• от 85 000 руб. – 258
• от 155 000 руб. – 116
• от 225 000 руб. – 50
• от 295 000 руб. – 24
• от 365 000 руб. – 8

Вакансий с указанным уровнем дохода по Санкт-Петербургу:

• от 80 000 руб. – 95
• от 135 000 руб. – 51
• от 190 000 руб. – 29
• от 240 000 руб. – 13
• от 295 000 руб. – 7

Как стать дизайнером Figma и где учиться?

Варианты обучения для дизайнера Figma с нуля:

• Самостоятельное обучение – всевозможные видео на YouTube, книги, форумы, самоучители и т.д. Плюсы – дешево или очень недорого. Минусы – нет системности, самостоятельное обучение может оказаться неэффективным, полученные навыки могут оказаться невостребованными у работодателя;
• Онлайн-обучение. Пройти курс можно на одной из образовательных платформ. Такие курсы рассчитаны на людей без особой подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику – это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.

Ниже сделали обзор 15+ лучших онлайн-курсов.

15+ лучших курсов для обучения дизайнера Figma: подробный обзор

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

https://skillbox.ru/course/figma-null-pro/

Стоимость: Рассрочка на 6 месяцев — 4 796 ₽ / мес

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

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

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

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

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

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

Программа

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

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

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

https://irs.academy/kurs_po_figma

Стоимость: 19 700 ₽

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

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

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

Урок № 1 — Знакомство с Figma
Фигма как современный инструмент разработки интерфейсов. Основы работы в данной программе, ее преимущество для дизайнера.

Урок № 2 — Возможности Figma. Инструментарий программы
Изучение всех особенностей и свойств инструментов Figma.

Урок № 3 — Компоненты и прототипирование
Познаем все нюансы и скрытые фишки программы, а также рассмотрим возможности крутого прототипирования интерфейса.

Урок № 4 — Бог Фи
Тайные знания применяем в практике, создаем интерфейс приложения в Фигме.

Урок № 5 — Дизайн сайта
На пятом уроке мы поговорим об этапах создания сайта и их взаимосвязи.

Урок № 6 — Закрепляющий урок. Создаем дизайн своего приложения
На шестом уроке — практика по созданию веб-приложения при помощи Figma.

По окончанию обучения вы получите сертификат, подтверждающий, что вы прослушали 6 уроков онлайн-курса по Figma.

3 место.Курс «Figma» — SKVOT

https://skvot.io/ru/course/figma-soft-thinking

Стоимость: нет информации

За 11 занятий ты освоишь каждый клик в Figma, научишься проектировать интерфейсы, работать с сетками, стилями и компонентами. В рамках курса создашь кликабельный прототип приложения с анимацией и интерактивными кнопками. Каждое занятие — новая продуктовая задача, новый вызов, практика и фидбек.

Программа:

1. ФУНКЦИОНАЛ FIGMA. ВСТУПЛЕНИЕ

• Интерфейс
• Новый проект vs FigJam
• Фреймы и слои
• Группы и выравнивание
• Фигуры и цвета
• Работа с изображениями

2. ФУНКЦИОНАЛ FIGMA. КУЛЬМИНАЦИЯ

• Работа с текстом и шрифтами
• Pen tool и векторные сети
• Иконки
• Эффекты, маски и объединение

3. ФУНКЦИОНАЛ FIGMA. РАЗВЯЗКА

• Режим презентации. Mirror App
• Какие файлы можно открывать в Figma
• Контроль версий
• Плагины
• Комьюнити

4. МОДУЛЬНЫЕ СЕТКИ

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

5. AUTO LAYOUT, ИЛИ КАК Я ЖИЛ РАНЬШЕ

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

6. СТИЛИ И КОМПОНЕНТЫ

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

7. ДИНАМИЧЕСКИЕ КОМПОНЕНТЫ

• Объединение компонентов в группы
• Варианты
• Вложенные компоненты
• Командные библиотеки и дизайн системы

8. СОЗДАНИЕ КЛИКАБЕЛЬНОГО ПРОТОТИПА

• Скролл в прототипах
• Фиксированные элементы
• Триггеры, действия и анимация
• Оверлеи и поп-апы
• Просмотр и шеринг

9. АНИМАЦИЯ И ИНТЕРАКТИВНЫЕ КОМПОНЕНТЫ

• Гифы в прототипе
• Интерактивные компоненты
• Смарт-анимация переходов между экранами
• Оверлеи и поп-апы

10. СТРУКТУРА FIGMA

• Команды
• Проекты
• Файлы
• Обложки для файлов
• Виды доступа

11. ПЕРЕГОВОРКА

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

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

https://itlogia.ru/figma

Стоимость: 22 100 ₽

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

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

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

МОДУЛЬ 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» — Pentaschool

https://pentaschool.ru/program/figma

Стоимость: 19 000 ₽

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

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

Программа:

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

По итогам обучения вы получите официальные документы о вашей подготовке.

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

https://www.specialist.ru/course/figma

Стоимость: 16 150 ₽ — 19 990 ₽

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

• выстраивать работу по циклу 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» — УрГЭУ Multimedia

https://arena.usue.ru/kursy/novinki/figma/

Стоимость: 9 900 ₽

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

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

1. Вводная часть. Основные понятия веб-дизайна:
   Зачем нужен сайт? Виды сайтов и цель. Концепция сайта. Работа с позиционированием. Роль веб-дизайнера в бизнесе.
2. Принципы веб-дизайна. Макет сайта. Пользовательский опыт:
   Работа с цветом при разном позиционировании сайта. Айдентика. Основные элементы сайта. Визуал элементов в разных стилях. Определение UI/UX. Как сделать сайт интуитивно понятным.
3. Интерфейс и знакомство с программой:
   Основы работы в Figma Возможности и инструментарий графического редактора. Подготовка собственного проекта по ТЗ.
4. Композиция макета сайта. Работа с фигурами и изображениями:
   Обзор инструментов для создания форм. Изображения. Как подбирать? Где искать? Импорт файлов. Вспомогательные элементы. Фреймы, гриды, сетка. Прототипирование страницы.
5. Основы типографики:
   Работа с текстом и смарт гайдами. Виды шрифтов, правила верстки текста, юзабилити и типографика. Выбор релевантных шрифтов для проекта, верстка текста сайта.
6. Создание адаптивных версий и завершение работы с макетом:
   Работа с экспортом. Права доступа к макетам. Figma Mirror для мобильных устройств. Адаптивный дизайн.
7. Сдача проектов:
   Презентация проектов. «Разбор полетов». Комментарии к работам.

Курс «Веб-дизайн и дизайн интерфейсов в Figma» — Breezzly

https://breezzly.ru/catalog/design-interfeisov-v-figma

Стоимость: 2 000 ₽

Что узнаете на курсе:

Сначала вы освоитесь в Figma, а затем возьметесь за дизайн настоящих проектов многоэкранных систем, таких как: сайты, мобильные и веб-приложения. Вас ждет практика по основам веб-дизайна, а также практика дизайна интерфейсов (UI-дизайн) приложений на основе UX-исследований. За время курса вы выполните серию проектов по дизайну сайтов и приложений, освоите систему дизайна, станете смелее в экспериментах и воплощении собственных идей!

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

1. Уверенно работать в Figma с фигурами, цветом, шрифтами, изображениями и модульной сеткой
2. Выстраивать рабочий процесс и организовывать работу по дизайну сайтов и приложений в Figma
3. Создавать прототипы для устройств с разным разрешением
4. Реализовывать интерфейсы для разных платформ и вытачивать эстетику
5. Создавать компоненты, работать с эффектами
6. Настраивать анимацию с помощью Smart Animate
7. Применять результаты UX-исследований для создания дизайна.

Программа:

• Проект 1. Веб-сайт студии интерьера с характером — организация работы и дебют
  10 уроков
• Проект 2. Приложение для смарт-часов по аренде электроскутеров — от UX-исследований к продукту
  7 уроков
• Проект 3. Мобильное приложение для ухода за домашними джунглями — редизайн и бренд-концепция на основе аналитики и данных
  14 уроков
• Проект 4. Сервис по доставке впечатлений на дом – создание веб-интерфейса в фирменном стиле на компонентах Google Material Design
  11 уроков
• Дополнительный проект. Коммуникационный дизайн: фирстиль и айдентика для digital-бренда по шагам от исследований до реализации.

Курс «Основы Figma» — Contented

https://live.contented.ru/figma-free-course

Стоимость: бесплатно

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

На курсе ты:

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

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

Шаг 1: Обучение

• Разберешься в интерфейсе Figma;
• Научишься работать с фреймом и сеткой;
• Освоишь принципы работы с текстом;
• Создашь геометричные баннеры и иконки.

Шаг 2: Итоговый вебинар

Расскажем:

• Как войти в профессию и успешно в ней развиваться.
• Как обстоят дела с вакансиями и сколько получают эти специалисты
• Как проходит рабочий день дизайнера
• Проверим домашние задания и дадим обратную связь в прямом эфире.
• Наградим автора лучшей работы секретным призом; Каждого пришедшего на вебинар — подарками на сумму 24 000 рублей.

Курс «Figma» — Figma info

https://figma.info/blog/lessons/

Стоимость: бесплатно

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

1. Дизайн в Figma главной страницы строительной компании
   Разработка адаптивной версии дизайна главной страницы
2. Дизайн и верстка первого экрана из figma в html
   Дизайн и верстка первого экрана с нуля (Изучите Gulp, html, css, js)
3. Сетка в фигме, направляющие и линейки в Figma
   Работа с сеткой, линейками и направляющими в Figma.
4. Ре-брендинг компании от логотипа до дизайна сайта
   Полный курс по ре-брендингу компании от логотипа до сайта
5. Ошибки веб-дизайнеров
   Основные ошибки, которые допускают веб-дизайнеры в своем развитии
6. Обзор программы Figma (Фигма)
   Обзор основных инструмент в программе Figma
7. Дизайн многостраничного сайта компании
   Сделаем ре-дизайн сайта компании, занимающейся бытовым ремонтом.
8. Дизайна главной страницы интернет-магазина. Урок №2.
   Во втором уроке я отрисую макет главной страницы интернет-магазина.
9. Дизайна главной страницы интернет-магазина. Урок №1.
   В данном уроке мы разработаем прототип будущего дизайна интернет-магазина.

Курс «Figma» — Figma education

https://www.figma.com/education/

Стоимость: бесплатно

Начните с трех шагов:

Легко начать разработку и сотрудничество с образовательным планом Figma.

1. Зарегистрируйтесь на Figma
   Создайте свою учетную запись Figma, используя свой адрес электронной почты. Домен электронной почты вашего учреждения предпочтителен, но не обязателен.
2. Пройдите проверку для получения образования
   Подтвердите свой статус образования по адресу figma.com/education/apply.
3. Создайте свою команду
   Создайте команду с образовательным планом, чтобы бесплатно получить все преимущества нашего профессионального плана.

Курс «Figma» — Tilda school

https://tilda.school/figma-free-course

Стоимость: бесплатно

За 13 кратких и простых уроков вы разберетесь с основными моментами работы в Фигме и переносом дизайна в Тильду.

Курс «Figma» — Академия IT

https://academiait.ru/course/kurs-figma/

Стоимость: бесплатно

Уроки:

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

Курс «Figma. Уроки для начинающих с нуля на русском» — figma.center

https://figma.center/kurs-po-figma-uroki-dlya-nachinayushhih-s-nulya-na-russkom/

Стоимость: бесплатно

 Структура курса и доступные уроки:

1. Где скачать и как установить программу Figma на компьютер?
2. Как пользоваться Figma? Обзор программы за 20 минут.
3. Frame — подробный разбор инструмента.

Курс «Figma для Веб дизайнера — с нуля до профессионала» — beONmax

https://beonmax.com/courses/figma/

Стоимость: бесплатно

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

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

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

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

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

• ВВЕДЕНИЕ — О КУРСЕ FIGMA ДЛЯ ВЕБ ДИЗАЙНЕРА — С НУЛЯ ДО ПРОФЕССИОНАЛА
• ОСНОВЫ FIGMA
• ИНСТРУМЕНТЫ FIGMA
• ПРОФЕССИОНАЛЬНЫЕ ИНСТРУМЕНТЫ FIGMA
• СОЗДАНИЕ СВОЕЙ БИБЛИОТЕКИ КОМПОНЕНТОВ
• ПРАКТИКА РАБОТЫ В FIGMA. СОЗДАЁМ МАКЕТ ПРИЛОЖЕНИЯ
• ПРОТОТИПИРОВАНИЕ В FIGMA
• ПРАКТИКА РАБОТЫ В FIGMA — 2. СОЗДАЁМ МАКЕТ ПРИЛОЖЕНИЯ
• ЗАВЕРШЕНИЕ КУРСА — ПОЛУЧЕНИЕ СЕРТИФИКАТА.

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

https://gb.ru/courses/1210

Стоимость: бесплатно

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

Программа:

Урок 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: Навигация
Создание элементов навигации.

Курс «36 уроков для новичков по 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» — Нетология

https://netology.ru/programs/osnovy-figma

Стоимость: бесплатно

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

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

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

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

5,5 часов теории, 8 часов практики

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