Что вы должны уметь после изучения
Ориентируйтесь не на количество уроков, а на действия, которые сможете выполнить самостоятельно.
План изучения по этапам
Каждый этап заканчивается практической работой — так прогресс можно увидеть и показать.
Освоить интерфейс
Фреймы, слои, стили, ограничения и базовые операции.
Практика: Повторите два простых экрана существующего сервиса.Настроить систему
Auto Layout, компоненты, варианты и библиотека стилей.
Практика: Соберите набор кнопок, полей и карточек.Продумать сценарий
Путь пользователя, состояния, ошибки и адаптивные версии.
Практика: Спроектируйте один законченный пользовательский поток.Оформить кейс
Проблема, ограничения, варианты, решение и проверка прототипа.
Практика: Покажите не только финальные экраны, но и логику.Практика Figma: карточка, которая выдержит новый текст
Вместо набора несвязанных экранов соберите карточку статуса учебной заявки. Это вымышленное задание ProfiQadam, не действующий сервис, не результат тестирования Figma или прохождения курса.
Исходные данные
Заголовок: «Заявка принята». Описание: «Ответ появится в личном кабинете». Подпись действия: «Посмотреть статус».
Замена для проверки: «Заявка на консультацию по учебному проекту принята» и «Ответ и список необходимых материалов появятся в личном кабинете после проверки заявки».
Карточка содержит три текстовых элемента, без фотографии и личных данных. Ширины 360 и 240 px, отступы 16 px и промежутки 12 px — условия этого упражнения, а не универсальный стандарт интерфейсов.
Соберите фрейм
Поместите заголовок, описание и действие внутрь одного фрейма. Проверьте вложенность в списке слоёв: визуальное положение поверх рамки ещё не означает, что слой находится внутри неё.
Результат: три элемента принадлежат карточке.Задайте Auto Layout
Выберите вертикальное расположение. Для карточки задайте фиксированную ширину и высоту Hug contents; для заголовка и описания — ширину Fill container и высоту Hug contents. Действие в этом упражнении занимает доступную ширину; его текст может переноситься, высота не фиксируется.
Результат: высота следует содержимому, а не маскирует его обрезкой.Проверьте экземпляры компонента
Создайте основной компонент карточки и два экземпляра. Во втором замените тексты на длинные. Измените промежуток между элементами в основном компоненте и проверьте оба экземпляра без индивидуальной перенастройки промежутка.
Результат: общая структура сохраняется, тексты экземпляров различаются.Сузьте карточку и объясните поведение
Проверьте обе версии сначала при 360, затем при 240 px. Не уменьшайте шрифт ради короткой высоты. Текст должен оставаться целиком, действие — после описания, а отступы — по условиям задания.
Результат: четыре состояния можно сравнить без ручного перемещения каждого слоя.
Что считать правильным результатом
В узкой версии длинный текст может занять больше строк, поэтому карточка станет выше. Точная высота зависит от шрифта и его настроек: единственного правильного числа нет. Обязательны полный текст, отсутствие наложений и сохранение порядка.
Текст обрезан или выходит за рамку — что проверить?
Проверьте ширину текстового слоя, его высоту и режимы родителя. Фиксированная высота или настройка обрезки может скрыть проблему. Не исправляйте её только растягиванием одного экземпляра.
Компонент изменился, а экземпляр — нет?
Проверьте, что это экземпляр нужного компонента, а не отдельная копия или отсоединённый объект. Затем посмотрите, не переопределено ли проверяемое свойство в экземпляре. Сохранённый текстовый override не равен потере связи.
Как показать работу без выдуманной обратной связи?
Сохраните четыре состояния и короткую запись: что меняли, какое поведение ожидали, что наблюдали, что исправили. Если проверяли только сами, так и напишите. Макет и кликабельный прототип не доказывают работу реального приложения или удобство для пользователей.
Не уверены, какой текст должен быть заметнее? Разберите визуальную иерархию на учебном примере. Для перехода от карточки к сценарию используйте запись UX-решения и границы проверки.
Понятия сверены 13 октября 2026 по справке Figma о карточках и компонентах и вертикальном Auto Layout. Последовательность и критерии упражнения — редакционные; редактор в этой проверке не запускался. Даты условий программ ниже не обновлялись.
Инструменты и понятия
Что чаще всего мешает прогрессу
- 01Путать знание Figma с профессией дизайнера
- 02Рисовать без сетки и компонентов
- 03Не показывать состояния ошибок
Сравните бесплатный старт и системное обучение
Сначала соберите небольшой макет в бесплатном курсе Figma. Если нужна регулярная проверка работ, дополнительные инструменты или фундаментальная база, сравните Skillbox и специализацию CalArts.
Сравнить курсы графического дизайна →
