Кто такой дизайнер 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: подробный обзор
- Длительность 8 недель
- Лайфхаки от профессиональных дизайнеров
- Обучение на практике
- Доступ к курсу навсегда.
Figma — любимый инструмент веб- и UX-дизайнеров по всему миру. С его помощью можно быстро создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений. А ещё один макет в Figma могут одновременно редактировать несколько человек — это идеальный инструмент для командной работы.
Кому подойдёт этот курс:
- Новичкам в веб-дизайне
С нуля освоите Figma. Научитесь использовать горячие клавиши для быстрой работы. Добавите в резюме полезный навык, который оценят наниматели. - Веб-дизайнерам без опыта работы в Figma
Научитесь создавать UI Kit, использовать плагины и компоненты. Повысите скорость своей работы и освободите время для креативных задач.
Чему вы научитесь:
- Профессионально работать в Figma
Разберётесь в интерфейсе и настройках программы. Научитесь работать с фигурами, слоями и внутренними редакторами. - Готовить адаптивные макеты
Сможете создавать прототипы с разной степенью детализации и адаптировать их под любые устройства. - Добавлять интерактив в прототипы
Освоите базовую анимацию. Сможете наглядно показать заказчику, как клиенты будут пользоваться продуктом. - Создавать компоненты и библиотеки стилей
Научитесь объединять шрифты и цвета в отдельные группы, чтобы сохранять единый визуальный стиль в многостраничных макетах. - Работать над проектом в команде
Освоите продвинутые инструменты, чтобы лучше планировать работу, быстро вносить правки и согласовывать макеты. - Передавать макет в разработку
Научитесь наводить порядок в слоях и артбордах. Сможете грамотно показать разработчикам технические аспекты и коды компонентов.
Программа
Вас ждут онлайн-лекции и практические задания на основе реальных кейсов.
8 тематических модулей, 48 онлайн-уроков
- Знакомство с Figma
Разберётесь в интерфейсе и базовых настройках программы. Научитесь использовать геометрические фигуры, слои и текстовые поля. Соберёте свой первый прототип. - Иконки, иллюстрации и картинки
Узнаете, как создавать собственные иконки и обрабатывать изображения, используя внутренние инструменты Figma. Сможете делать дизайн-макеты с нуля, не используя сторонние редакторы. - Компоненты
Узнаете, как создавать компоненты и пользоваться панелью настроек. Научитесь делать интерактивные прототипы и показывать заказчику, как люди будут пользоваться будущим сайтом. - Библиотеки компонентов и общие стили
Сможете создавать библиотеки стилей и UI Kit, чтобы стандартизировать элементы интерфейса. Научитесь верстать аккуратные макеты с помощью модульных сеток. - Auto Layout и Variants
Поймёте, как объединить макеты в единую систему с помощью функции Variants. Сможете создавать и адаптировать под разные устройства сложные элементы интерфейса. - Сложные многостраничные документы
Научитесь работать с базовыми экранами и создавать дерево страниц. Освоите бета-версию функции Branches. Поймёте, как организовать работу команды над разными версиями одного макета. - Дополнительные возможности и сообщество авторов
Узнаете, какие плагины помогут вам быстро создавать драфтовые проекты и работать с правками. Научитесь добавлять анимацию в прототипы. - Подготовка макета для разработчиков
Сможете показать разработчику технические аспекты проекта и код компонентов. Научитесь оптимизировать работу команды с помощью плагина Figma Jam.
После окончания курса вы сможете:
- Эффективно использовать инструменты Figma
- Создать приложение, сайт и т.д.
- Находить заказчиков и продуктивно взаимодействовать с ними
- Зарабатывать фрилансом из любой точки мира
- Получить интересную работу в престижной компании.
Программа курса по Figma:
Урок № 1 — Знакомство с Figma
Фигма как современный инструмент разработки интерфейсов. Основы работы в данной программе, ее преимущество для дизайнера.
Урок № 2 — Возможности Figma. Инструментарий программы
Изучение всех особенностей и свойств инструментов Figma.
Урок № 3 — Компоненты и прототипирование
Познаем все нюансы и скрытые фишки программы, а также рассмотрим возможности крутого прототипирования интерфейса.
Урок № 4 — Бог Фи
Тайные знания применяем в практике, создаем интерфейс приложения в Фигме.
Урок № 5 — Дизайн сайта
На пятом уроке мы поговорим об этапах создания сайта и их взаимосвязи.
Урок № 6 — Закрепляющий урок. Создаем дизайн своего приложения
На шестом уроке — практика по созданию веб-приложения при помощи Figma.
По окончанию обучения вы получите сертификат, подтверждающий, что вы прослушали 6 уроков онлайн-курса по Figma.
Чему вы научитесь:
- Уверенно работать с любым инструментом
Освоите все инструменты и возможности 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
- Подготавливать мудборды для клиентов
- Разрабатывать с нуля дизайн лендингов, многостраничных сайтов и мобильных приложений
- Создавать простую анимацию интерфейсов
- Подготавливать техническое задание для разработчиков
- Разрабатывать кликабельные прототипы сайтов и мобильных приложений.
Программа:
- Figma с нуля. Базовый уровень. Основы дизайна интерфейсов
Вы познакомитесь с инструментами Figma, научитесь работать со слоями, изображениями, текстом и модульной сеткой. Вы узнаете, как настраивать компоненты, изучите принципы создания мудбордов, а также попробуете работать с эффектами. - Уровень 2. Дизайн веб-интерфейсов
Вы перейдёте к созданию многостраничных сайтов, научитесь делать разные типы меню, познакомитесь с горизонтальной, вертикальной и нестандартной навигацией. Вы узнаете, как наполнять сайт контентом, изучите принципы юзабилити, познакомитесь с возможностями плагинов и подготовите проект для портфолио. - Figma Mobile. Дизайн мобильных приложений
Вы узнаете, как пользоваться гайдами iOS и Android, научитесь собирать основные экраны мобильных приложений в Figma, попробуете свои силы в редизайне уже существующих приложений.
По итогам обучения вы получите официальные документы о вашей подготовке.
Вы научитесь:
- выстраивать работу по циклу 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, а затем возьметесь за дизайн настоящих проектов многоэкранных систем, таких как: сайты, мобильные и веб-приложения. Вас ждет практика по основам веб-дизайна, а также практика дизайна интерфейсов (UI-дизайн) приложений на основе UX-исследований. За время курса вы выполните серию проектов по дизайну сайтов и приложений, освоите систему дизайна, станете смелее в экспериментах и воплощении собственных идей!
Чему научитесь:
- Уверенно работать в Figma с фигурами, цветом, шрифтами, изображениями и модульной сеткой
- Выстраивать рабочий процесс и организовывать работу по дизайну сайтов и приложений в Figma
- Создавать прототипы для устройств с разным разрешением
- Реализовывать интерфейсы для разных платформ и вытачивать эстетику
- Создавать компоненты, работать с эффектами
- Настраивать анимацию с помощью Smart Animate
- Применять результаты UX-исследований для создания дизайна.
Программа:
- Проект 1. Веб-сайт студии интерьера с характером — организация работы и дебют
10 уроков - Проект 2. Приложение для смарт-часов по аренде электроскутеров — от UX-исследований к продукту
7 уроков - Проект 3. Мобильное приложение для ухода за домашними джунглями — редизайн и бренд-концепция на основе аналитики и данных
14 уроков - Проект 4. Сервис по доставке впечатлений на дом – создание веб-интерфейса в фирменном стиле на компонентах Google Material Design
11 уроков - Дополнительный проект. Коммуникационный дизайн: фирстиль и айдентика для digital-бренда по шагам от исследований до реализации.
Figma — графический онлайн-редактор для создания баннеров, прототипов сайтов и интерфейсов приложений. С него начинается путь в графический, UX/UI и веб-дизайн.
На курсе ты:
- Познакомитесь с основами Figma
- Прокачаешь дизайнерские навыки
- Создашь иконку и баннер
- Получишь обратную связь по домашнему заданию
- Узнаешь о работе дизайнера на вебинаре
- Начнешь прямой путь в дизайн.
Программа курса:
Шаг 1: Обучение
- Разберешься в интерфейсе Figma;
- Научишься работать с фреймом и сеткой;
- Освоишь принципы работы с текстом;
- Создашь геометричные баннеры и иконки.
Шаг 2: Итоговый вебинар
Расскажем:
- Как войти в профессию и успешно в ней развиваться.
- Как обстоят дела с вакансиями и сколько получают эти специалисты
- Как проходит рабочий день дизайнера
- Проверим домашние задания и дадим обратную связь в прямом эфире.
- Наградим автора лучшей работы секретным призом; Каждого пришедшего на вебинар — подарками на сумму 24 000 рублей.
Начните с трех шагов:
Легко начать разработку и сотрудничество с образовательным планом Figma.
- Зарегистрируйтесь на Figma
Создайте свою учетную запись Figma, используя свой адрес электронной почты. Домен электронной почты вашего учреждения предпочтителен, но не обязателен. - Пройдите проверку для получения образования
Подтвердите свой статус образования по адресу figma.com/education/apply. - Создайте свою команду
Создайте команду с образовательным планом, чтобы бесплатно получить все преимущества нашего профессионального плана.
За 13 кратких и простых уроков вы разберетесь с основными моментами работы в Фигме и переносом дизайна в Тильду.
Уроки:
- Интерфейс.
- Манипуляция с объектами
- Frame & Slice tool
- Векторные объекты
- Работа с кривыми и пером.
- Слои и маски.
- Текст.
- Цвет.
- Сетки и направляющие.
- Стили.
- Constraits
- Компоненты.
- Выравнивание и умное выделение.
- Прототипирование.
- Интеграция и экспорт.
Структура курса и доступные уроки:
- Где скачать и как установить программу Figma на компьютер?
- Как пользоваться Figma? Обзор программы за 20 минут.
- Frame — подробный разбор инструмента.
Этот курс оригинален и полностью повторяет материал наших платных программ обучения. Вы получаете тот же материал, что и наши студенты, включая домашнее задание в некоторых видеоуроках. Мы рекомендуем использовать его для саморефлексии и проверки знаний тогда, когда вам это удобно. Проверка выполненного задания преподавателем не предусматривается.
Программа:
Урок 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: Навигация
Создание элементов навигации.
Собрали в одной подборке множество полезных уроков для тех, кто хочет освоить Фигму или перейти на нее с других редакторов. В подборке есть как уроки по освоению интерфейса самой программы, так и по созданию дизайна цифрового продукта.
- Интерфейс
- Манипуляция с объектами
- 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 ? (стеки в Фигме).
Во время обучения вы выполните 10 заданий и получите необходимую базу для работы в Figma. Макеты сайта, рекламные изображения для соцсетей — всё это может стать частью вашего портфолио.
Научитесь работать с ключевыми инструментами Figma:
- Шейпами
- Сетками и направляющими
- Текстом
- Масками
- Компонентами
- Стилями
- Инструментами прототипирования
- Эффектами
- Интеграцией растровых изображений
- Цветом и градиентами.
Программа курса:
5,5 часов теории, 8 часов практики
- Введение в Figma
Разберём интерфейс графического редактора и необходимые настройки перед началом работы - Рекламный баннер
Изучим шейпы, научимся строить сетку и работать с текстом и пространством на примере баннера - Работа с интерфейсом
Поговорим об основах UI/UX-дизайна, узнаем, как и с чем работает дизайнер интерфейсов - Лендинг
Узнаете, какие задачи решает дизайнер при разработке сайта, и создадите макет лендинга - Адаптивный дизайн
Разберётесь, как подготовить макет к жизни, и узнаете про состояния элементов и работу с адаптивностью.
