Как создать макет сайта в Figma?

Макет в Figma начинают не с рисования страниц, а с настройки основы: сетки, размеров экрана и стилей - цветов, шрифтов и отступов, оформленных как переиспользуемые компоненты. Дальше собирают из готовых блоков (кнопки, карточки, шапка) сначала одну ключевую страницу, а уже потом остальные - на основе тех же элементов.

Первый шаг - выбрать ширину макета под десктоп (обычно 1440 px) и отдельно под мобильную версию (375 px), создать сетку колонок через Layout Grid в панели справа. Второй шаг - завести библиотеку стилей: 4-6 цветов, 2 шрифта, несколько размеров отступов. Без этого на десятой странице макета кнопки окажутся все немного разного цвета и с разными скруглениями, и это придётся переделывать вручную.

Дальше работают компонентами (Create Component), а не копированием элементов: кнопка, карточка услуги, поле формы собираются один раз и переиспользуются на всех страницах. Если позже понадобится изменить цвет кнопки, достаточно поправить один компонент, и это отразится сразу везде, а не на каждой странице отдельно.

Начинающие часто тратят время на визуальные детали раньше структуры - выбирают шрифт, пока не решили, сколько разделов вообще нужно сайту. Правильный порядок обратный: сначала карта страниц и блоков на каждой, потом стили, потом уже финальный дизайн. Для одностраничника мастерской реально собрать рабочий макет за пару вечеров по бесплатным туториалам; для многостраничного сайта с адаптивом под три размера экрана и передачей макета в разработку быстрее и дешевле привлечь дизайнера.