Санкт-Петербург 
Понятный макет
Экран с настоящим текстом, изображениями и логичным порядком блоков. Слои и контейнеры названы так, чтобы в них было легко разобраться.
БЕСПЛАТНО / ОТ ПЕРВОГО ФРЕЙМА ДО ПРОТОТИПАБесплатный курс
Бесплатный курс
Figma с нуля.
Научитесь собирать макеты сайтов и интерфейсов. Пройдите восемь текстовых уроков, выполните задания и подготовьте свой первый учебный проект.
8 уроков · 4 модуляПрофессия и примеры зарплат ↓УЧИТЕСЬ В СВОЁМ ТЕМПЕОдин проект.
Один проект.
Восемь понятных шагов.
Курс для новичков, предпринимателей и тех, кто хочет лучше понимать работу дизайнера. Опыт программирования не требуется. Для практики понадобятся компьютер, браузер и аккаунт Figma.
Все уроки открыты бесплатно и без регистрации на этом сайте. Основа курса — текст и самостоятельные задания. Персональная проверка, сертификат и трудоустройство не входят в программу. Возможности и ограничения самой Figma зависят от выбранного плана.
Условия бесплатного плана Figma ↗ПРАКТИЧЕСКИЙ РЕЗУЛЬТАТЧто вы соберёте
Что вы соберёте
во время обучения.
Работайте над одной страницей услуги или портфолио. В каждом уроке добавляйте новую часть и проверяйте результат.
Свои компоненты
Повторяемые кнопки и карточки, единые стили и отступы. Вы попробуете менять содержимое и проверять, как реагирует Auto Layout.
Версию для телефона
Отдельную мобильную композицию с читаемым текстом и понятным главным действием. С объяснением того, как должен вести себя будущий интерфейс.
Кликабельный прототип
Несколько связанных экранов, по которым можно пройти путь пользователя. В конце подготовите файл, ссылки и пояснения для передачи в работу.
ОТ ОСНОВ К ГОТОВОМУ МАКЕТУ
Программа курса Figma.
Читайте урок, выполняйте задание и проверяйте себя. К каждому шагу можно вернуться через программу.
МОДУЛЬ 01
Знакомство с редактором
Организуйте файл, разберитесь со слоями и соберите основу первого экрана.
МОДУЛЬ 02
Композиция и Auto Layout
Настройте текст, цвет и отступы, чтобы макет было удобно читать и изменять.
МОДУЛЬ 03
Компоненты и адаптация
Создайте повторяемые элементы и подготовьте версию для телефона.
МОДУЛЬ 04
Прототип и передача
Свяжите экраны, проверьте сценарий и подготовьте файл для дальнейшей работы.
НАВЫК ДЛЯ РАБОТЫ И СВОИХ ПРОЕКТОВ
Зачем изучать Figma.
Редактор помогает превращать идеи в наглядные решения. Профессия дизайнера требует также понимания людей, содержания и задач бизнеса.
Проектировать до разработки
Можно обсудить структуру и внешний вид заранее, попробовать разные варианты и исправить непонятный сценарий до сборки сайта.
Работать в команде
Макет помогает общаться с заказчиком, редактором и разработчиком. Понятные названия и пояснения упрощают обсуждение конкретных решений.
Собирать портфолио
Учебный проект можно оформить в кейс: показать задачу, свою роль, экраны и прототип. Отмечайте, какие работы учебные, а какие коммерческие.
Выбирать формат работы
В дизайне встречаются штатные и проектные роли, в том числе удалённые. Обязанности, график и уровень самостоятельности уточняйте в каждой вакансии.
Развивать свой бизнес
Можно подготовить макет страницы, обсудить идею с подрядчиком или оформить небольшую презентацию. Это полезно и без смены профессии.
Углубляться в UX/UI
После основ можно изучать пользовательские сценарии, доступность и дизайн-системы. Владение Figma — часть работы; каждое направление требует дополнительной практики.
ПРИМЕРЫ С HH.RU / ПРОВЕРЕНО 22.10.2026Какие зарплаты
Какие зарплаты
встречаются в дизайне.
Три предложения работодателей с разным набором задач. Это примеры отдельных вакансий, а не средняя зарплата и не результат, гарантированный курсом.
Дизайнер интерфейсов
ООО «АйТи Фо Ю». В объявлении допускаются кандидаты без опыта и указан удалённый формат. Полные требования проверяйте в описании.
Вакансия на hh.ru ↗Младший продуктовый дизайнер
Группа компаний «Триумф». Удалённая работа с интерфейсами и дизайн-системой. В требованиях — уверенное владение Figma и системное мышление.
Вакансия на hh.ru ↗Дизайнер команды маркетинга
THE FLEX. В роли объединены Figma, Tilda, веб-дизайн, полиграфия и видео. Нужен более широкий набор навыков, чем работа в одном редакторе.
Вакансия на hh.ru ↗Все суммы приведены за месяц на руки, как указано работодателями. Объявления могут измениться или закрыться. Начальный курс не заменяет опыт, портфолио и знания предметной области. На самостоятельных проектах отдельно согласуют стоимость работы; проектная выручка не равна ежемесячной зарплате.
Что делать после первого макета
Закончите учебную работу, оформите результат и выберите навыки для следующего проекта.
- Покажите компьютерную и мобильную версии, компоненты и прототип.
- Опишите задачу, свою роль и причины основных решений.
- Сравните портфолио с требованиями интересных вакансий.
- Практикуйтесь на небольших задачах и постепенно усложняйте проекты.
Перед началом.
Нужно ли покупать Figma?
Для базовых упражнений используются обычные инструменты Figma Design, доступные на бесплатном плане Starter. Лимиты совместной работы и дополнительные возможности проверяйте в справке сервиса.
Можно ли проходить курс с телефона?
Читать уроки можно на телефоне. Для выполнения заданий по сборке макета нужен компьютер с удобным экраном и мышью или трекпадом.
В курсе есть видео?
Сейчас основа программы — текстовые уроки и самостоятельная практика. Дополнительные видео и файлы, если они добавлены, находятся на странице соответствующего урока.
Получится ли сразу устроиться дизайнером?
Курс знакомит с основными инструментами. Для работы потребуются портфолио, практика и навыки под конкретную роль. Трудоустройство и определённый доход не гарантируются.
Figma делает готовый сайт?
В этом курсе вы работаете с макетами и прототипами в Figma Design. После этого интерфейс нужно реализовать и проверить. Для сборки страниц можно отдельно пройти бесплатный курс Tilda.
Перейти к курсу Tilda ↗Сначала макет.
Затем работающий сайт.
Figma помогает продумать интерфейс. В курсе Tilda можно продолжить практику: собрать страницу, адаптировать её и подготовить к публикации.