Figma-курс с нуля: как учиться на одном макете
Влад Воронежцев · · 9 мин чтения
Хороший Figma-курс с нуля учит не отдельным кнопкам, а сборке изменяемого интерфейса. Возьмите один небольшой экран и последовательно освойте фреймы, Auto Layout, компоненты, стили, адаптив и прототип. ИИ можно подключить для отдельной иллюстрации или текста, но структура и редактируемые слои должны остаться в Figma.
- 1.
Начните с фреймов и понятной структуры слоев
Для первого задания достаточно экрана входа, карточки события или небольшого первого экрана сайта. Создайте фрейм нужной ширины и разложите содержимое по смыслу: навигация, заголовок, описание, действие, изображение. Каждый заметный блок поместите во вложенный фрейм и назовите по роли, а не по внешнему виду. Название `Primary action` полезнее, чем `Green button 2`, потому что цвет и размер еще изменятся. Не начинайте обучение Figma с рисования десятка экранов. Один аккуратный файл быстрее покажет, где вы понимаете вложенность, выравнивание и порядок слоев, а где пока двигаете элементы вручную и случайно ломаете соседние блоки.
- 2.
Освойте Auto Layout на реальном содержании
Auto Layout — автоматическая раскладка элементов внутри фрейма. Начните с кнопки: текст должен задавать ширину, а внутренние отступы — сохраняться при замене подписи. Затем соберите вертикальную карточку из изображения, заголовка, описания и действия. Настройте расстояния между элементами, выравнивание и режимы изменения размера. После этого замените короткий заголовок длинным и проверьте, растет ли карточка без наложений. Figma-уроки часто показывают функцию на идеальном примере, но навык появляется при неудобном содержании. Подставьте длинную фамилию, две строки описания и кнопку с развернутой подписью. Если макет выдерживает их без ручной перестановки, правила работают.
- 3.
Соберите компоненты и состояния без копирования
Когда кнопка или поле повторяется, превратите его в компонент. Свойства компонента должны менять то, что действительно варьируется: текст, иконку, размер или состояние. Для учебного поля ввода достаточно обычного, активного, заполненного и ошибочного состояния. Не создавайте отдельный главный компонент на каждую подпись. В экземпляре меняется содержимое, а общая геометрия и стиль приходят из одного источника. Затем исправьте радиус, отступ или цвет в главном компоненте и убедитесь, что обновились все экземпляры. Такой Figma-курс готовит к реальному файлу: вы не просто повторяете макет преподавателя, а строите правила, которые переживают правки и не расходятся между экранами.
- 4.
Используйте ИИ как источник одного слоя
Практический кейс: для экрана приложения о привычках в GPT Image 2 отправили запрос «сделай современный экран приветствия с растением». Модель нарисовала заголовок, кнопку и псевдоинтерфейс внутри картинки, поэтому результат нельзя было нормально редактировать. Запрос ограничили одной иллюстрацией: 'Create only a 1200x900 editorial illustration for a habit-tracking app onboarding screen. One small paper plant growing from a matte charcoal pot, soft side light, calm dark background, centered subject with generous clean margins. No text, letters, logos, buttons, cards, browser frame, phone frame, or UI.' Получился самостоятельный визуал без встроенного интерфейса. Его добавили в Figma одним растровым слоем, а текст, кнопку и отступы собрали компонентами. Opten помогает заранее заметить, что в промпте не хватает формата и запрета на UI.
- 5.
Сделайте адаптив и проверьте прототип
Для дизайна сайта в Figma соберите хотя бы две ширины: большую и мобильную. Не уменьшайте большой экран целиком. Решите, какие блоки меняют порядок, где карточки переходят в одну колонку, как сокращается навигация и какие поля растягиваются по ширине. Проверьте ограничения размера и Auto Layout на каждом уровне вложенности. Затем соедините основные состояния в прототипе и пройдите один короткий сценарий: открыть экран, выполнить действие, увидеть подтверждение или ошибку. Попросите другого человека сделать это без объяснений. Его первая остановка обычно полезнее еще одного часа косметических правок. В финале подготовьте понятные названия компонентов, стили, комментарии к нестандартным решениям и ссылку на выбранную стартовую точку прототипа.
