Figma с нуля для вайб-кодеров: минимум, который закрывает работу

Figma — программа, в которой дизайнеры рисуют макеты сайтов. (Макет — это «чертёж» сайта: как будут выглядеть блоки, где кнопки, какие цвета. Как рисунок дома перед стройкой.) У тебя резонный вопрос: зачем мне макеты, если нейросеть собирает сайт по тексту? Отвечаю: затем, что 80% правок и половина «дорогого» вида решаются в Figma быстрее, чем словами в промпте. Разберу минимум, который закрывает работу, — за один вечер.

1. Увидеть сайт до сборки. За 15 минут накидать блоки и понять: «ага, вот тут тесно, а вот этот блок лишний». Дешевле подвигать прямоугольники в Figma, чем переписывать код.
2. Показывать правки, а не объяснять словами. «Сделай заголовок крупнее и сдвинь кнопку влево» — это минуты объяснений. Скриншот из Figma с нужным видом — нейросеть понимает с первого раза.
3. Собирать референсы и мудборды. (Мудборд — доска настроения: накиданные рядом примеры цветов, шрифтов и блоков, которые тебе нравятся. Помогает понять стиль до того, как начнёшь делать.)

Сразу вычеркни из списка: анимации и прототипирование, автолейаут со всеми настройками, компоненты и варианты, плагины и продвинутые стили. (Прототипирование — когда макет «оживает»: кликаешь по кнопке, открывается следующий экран. Автолейаут — автоматическое выравнивание элементов. Компоненты — переиспользуемые детали макета.) Это арсенал дизайнера на полную ставку. Тебе он не нужен — ты не рисуешь интерфейсы с нуля, ты управляешь нейросетью и правишь результат.

1. Фрейм (клавиша F). Это «холст» — прямоугольник размером с экран сайта или телефона. Всё рисуется внутри фрейма. Создал фрейм 1440×900 — это твой будущий первый экран.
2. Текст и шрифты (клавиша T). Пишешь заголовок, выбираешь шрифт, размер, жирность. Здесь ты тренируешь глаз на иерархию: заголовок 48, текст 18.
3. Прямоугольники и цвет (клавиша R). Блоки — это прямоугольники. Покрасил фон в светлый, кнопку — в акцентный — и уже видишь, дружат ли цвета.
4. Выравнивание. Кнопки в панели: «по левому краю», «по центру», «равные отступы». Именно они делают «аккуратно» за два клика. Дубликат элемента — Ctrl+D.
5. Просмотр и экспорт. Present (Ctrl+Enter) показывает макет «как сайт», а экспорт (Ctrl+Shift+E) — картинка, которую можно кинуть нейросети или клиенту.

Час 1 — интерфейс. Создай фрейм (F), напиши заголовок и текст (T), нарисуй три блока-прямоугольника (R), выровняй их. Курсор-стрелка (V) — основной режим. Ошибся — Ctrl+Z отменяет последнее действие. Покликай всё подряд — Figma не ломается, экспериментируй.

Час 2 — макет главной. Собери свой будущий сайт из блоков: hero, три преимущества, форма, контакты. Не красиво, а по сетке: всё по одной левой границе, большие отступы. Заблудился в масштабе — Shift+1 вписывает макет в экран.

30 минут — цвет и шрифты. Выбери один акцентный цвет и пару шрифтов, примени ко всему макету. Посмотри, как меняется ощущение от страницы.

Всё. Этого минимума хватает, чтобы планировать сайт, править «дорого/дёшево» и говорить с нейросетью на языке картинок.

Если хочешь систему — композиция, цвет, шрифты и «чтобы было красиво» — это мой мини-курс по веб-дизайну за 390 ₽: без воды, для тех, кто кодит, но не дизайнер. А если нужен разбор твоего сайта дизайнером — бесплатная консультация ниже.