Как сделать макет сайта: 8 шагов
Весь макет — от десктопа до мобильной версии — удобно держать в одном файле. Каждый шаг подробно разобран ниже.
Создайте файл
В файловом менеджере нажмите «Новый файл». Чтобы сначала разобрать готовый пример, выберите «Начать с шаблона» и шаблон «Сайт».
Поставьте фрейм 1440
Нажмите F и в группе «Компьютер» справа щёлкните Desktop. Фрейм 1440×1024 встанет на холст уже выделенным.
Добавьте сетку
В разделе «Сетка макета» нажмите «+», откройте настройки сетки и выберите вид «Колонки»: например, 12 колонок, тип «Растянуть», поля 120, промежуток 24.
Соберите блоки
Шапка, первый экран, преимущества, призыв к действию, подвал — каждый блок делайте вложенным фреймом со своим автолейаутом.
Включите автолейаут страницы
Выделите фрейм страницы, нажмите ⇧A, выберите «Вертикально» и высоту «Обтянуть», а блокам задайте ширину «Заполнить». Теперь страница растёт вниз вместе с блоками.
Оформите стилями и компонентами
Цвета, текст и тени сохраните стилями, а кнопки и карточки сделайте компонентами (⌥⌘K).
Сделайте версии для планшета и телефона
Это отдельные фреймы своей ширины, например 834 и 393 px, из тех же компонентов и стилей.
Свяжите прототип и передайте макет
На вкладке «Прототип» настройте прокрутку к разделам, проверьте её в плеере (⌥⌘↵) и пригласите разработчика.
Шаблон «Сайт»: готовый макет на 12 колонках
Если вы делаете макет сайта впервые, начните с разбора шаблона. Он открывается через «Начать с шаблона» и собран ровно по шагам этого гайда.
| Что | Как устроено |
|---|---|
| Страница | Фрейм «Главная — 1440» с вертикальным автолейаутом; высота подстраивается под содержимое |
| Сетка | Стиль сетки «Сетка/Десктоп 12»: 12 колонок, поля 120 px, промежутки 24 px |
| Блоки | «Шапка», «Первый экран», «Клиенты», «Возможности», «Призыв», «Подвал» — фреймы на автолейауте во всю ширину страницы |
| Стили | Цвета «Нейтральные/…» и «Бренд/…», текст «Заголовки/…» и «Текст/…», тень «Тени/Окно»; шрифт Manrope |
| Прототип | Пункты меню и кнопки плавно прокручивают страницу к своим разделам |
Шаблон легко переделать под свой проект: поменяйте стиль — и изменятся все слои, которые его используют. Остальные шаблоны описаны на странице шаблоны для дизайна.
Сетка из 12 колонок: как настроить
Сетку добавляют фрейму страницы в разделе «Сетка макета» вкладки «Дизайн». Кнопка «+» создаёт квадратную сетку 10 px. Чтобы получить колонки, откройте её настройки значком слева от строки и в списке вида выберите «Колонки».
| Поле | Что задаёт | В шаблоне «Сайт» |
|---|---|---|
| «Количество» | Число колонок | 12 |
| «Тип» | «Растянуть» — колонки делят ширину фрейма; «По левому краю», «По центру», «По правому краю» — колонки фиксированной ширины | «Растянуть» |
| «Ширина» | Ширина колонки; при типе «Растянуть» считается сама | Авто, 78 px |
| «Поля» | Отступ колонок от краёв фрейма; у других типов это поле называется «Отступ» | 120 |
| «Промежуток» | Расстояние между колонками | 24 |
Ширина колонки при таких настройках: (1440 − 2 × 120 − 11 × 24) / 12 = 78 px. Блок на 4 колонки получается шириной 4 × 78 + 3 × 24 = 384 px — так удобно считать карточки в ряд.
Сетку стоит сохранить стилем: кнопка «Стили сетки» в заголовке раздела → «Создать стиль из сетки». Из того же меню стиль применяют к другим фреймам. Все сетки на холсте показывает и прячет команда «Вид → Сетки макета» (⌃G, на Windows и Linux Ctrl+Shift+4); по умолчанию они видны. Колонки, строки и модульная сетка подробно разобраны в гайде сетки макета.
Блоки страницы на автолейауте
Страница сайта — это стопка блоков. Фрейму страницы задают вертикальный автолейаут и высоту «Обтянуть», а каждый блок делают вложенным фреймом шириной «Заполнить» («Заполнить контейнер»). Тогда при правке текста соседние блоки сдвигаются сами, а страница растёт вниз.
Боковые отступы блока равны полям сетки: в шаблоне «Сайт» это 120 px слева и справа. Так содержимое встаёт ровно по крайним колонкам. Готовые слои быстро превращаются в блок: выделите их и нажмите ⇧A — редактор обернёт их во фрейм с автолейаутом.
- Шапка: «Горизонтально» и интервал «Авто» — логотип, меню и кнопки расходятся по всей ширине.
- Первый экран и разделы: «Вертикально», интервалы между заголовком, текстом и кнопками.
- Ряд карточек: «Горизонтально» с шириной «Заполнить» у карточек или «С переносом», если карточки идут в несколько строк.
- Кнопки и теги: размер «Обтянуть», ширина подстраивается под текст.
- «Абсолютное положение» — для значка или декора поверх блока, который не должен двигать соседей.
Все направления и режимы размеров описаны на странице автолейаут: как он работает.
Стили и компоненты: цвета, текст, кнопки
Стили задают один раз: цвета бренда и фона, заголовки и основной текст, тени карточек. Повторяющиеся элементы — кнопки, карточки, пункты меню — делают компонентами: изменения основного компонента переходят во все его экземпляры.
Стили цвета
Цвета бренда, фона и текста. Заливку любого слоя можно привязать к стилю.
Стили текста
Шрифт, начертание, размер и интервалы для заголовков, абзацев и кнопок.
Стили эффектов
Тени и размытие, которые повторяются у карточек и окон.
Стили сетки
Сетка из колонок, которую применяют к фреймам одним выбором.
Компонент создают из выделенного блока командой «Создать компонент» (⌥⌘K). Как добавить кнопке варианты «Наведение», «Нажата» и «Отключена», показано в гайде кнопка с вариантами.
Адаптивная версия сайта: отдельные фреймы
Один фрейм не перестраивается под разные экраны: точек перелома, как медиазапросов в CSS, у него нет. Поэтому версии для планшета и телефона рисуют отдельными фреймами своей ширины и ставят рядом с десктопной.
Быстрый способ — продублировать готовую страницу (⌘D) и задать копии новую ширину. Блоки с размером «Заполнить» сузятся вместе с фреймом, а текст с размером блока «Авто-высота» перенесётся на новые строки. Остальное перестраивают вручную: например, ряд карточек становится колонкой, а меню уходит в кнопку. Для узкой версии задайте свою сетку — меньше колонок и уже поля — и сохраните её отдельным стилем.
| Версия | Готовый размер | Ширина, px |
|---|---|---|
| Широкий монитор | Desktop Full HD | 1920 |
| Десктоп | Desktop | 1440 |
| Ноутбук | MacBook Air 13 | 1280 |
| Планшет | iPad Pro 11 или iPad mini 8.3 | 834 или 744 |
| Телефон | iPhone 16 или iPhone SE | 393 или 375 |
Прототип сайта: меню, прокрутка, шапка
Длинную страницу не нужно резать на экраны: фрейм верхнего уровня выше экрана прокручивается в плеере сам. Остаётся связать меню с разделами и закрепить шапку. Все триггеры и переходы описаны на странице прототипы.
Свяжите пункт меню с разделом
Выделите пункт меню и на вкладке «Прототип» добавьте взаимодействие «При нажатии» → «Прокрутить к», а затем выберите блок страницы. Переход «Плавная прокрутка» двигает страницу плавно.
Закрепите шапку
Выделите шапку и в разделе «При прокрутке» выберите «Зафиксирован» — шапка останется на месте — или «Липкий»: она прокручивается, пока не упрётся в край.
Свяжите страницы
«Перейти к» ведёт на другой фрейм, например с главной на страницу «О компании».
Запустите плеер
Кнопка ▶ или ⌥⌘↵ открывает прототип в новой вкладке. Рамку экрана выбирают в разделе «Устройство» вкладки «Прототип», когда ничего не выделено: для сайта — Desktop.
Передача макета сайта в вёрстку
Когда макет согласован, сохраните именованную версию (⌥⌘S) и пригласите разработчика с бесплатной ролью «Разработчик»: в режиме «Код» (⇧D) он увидит размеры, отступы и код блоков. Порядок действий — в гайде передача макета разработчику.
| В макете | В коде |
|---|---|
| Автолейаут | Flexbox |
| Стили и переменные | CSS-переменные в src/tokens.css |
| Компоненты с вариантами | React-компоненты с пропсами |
| Состояния кнопок | :hover, :active, :focus-visible, :disabled |
| Структура страницы | Семантическая разметка: заголовки, header, main, nav, footer |
| Каждый фрейм-страница | Отдельная страница проекта на Vite, React 19 и TypeScript |
HTML-файла в экспорте нет. Есть PNG, JPG, WEBP, SVG и PDF, а для разработки — проект на React из команды «Экспорт в React…»: он запускается через npm install и npm run dev.
Частые ошибки в макете сайта
Эти ошибки чаще всего приводят к правкам после согласования.