Изображения, текст и сетка

Шрифт 100%

Тема

Речь

Урок 14 · Часть 2 — Figma
Изображения, текст и сетка
Добавляем изображения на макет, работаем с текстом и настраиваем сетку — основу аккуратного дизайна.
Как добавить изображение
Способ 1: просто перетащите файл с компьютера на артборд Figma.
Способ 2: выберите инструмент «Шейп» → «Place Image» — откроется окно выбора файла.

Настройка	Что делает
Fill (Заполнить)	Изображение заполняет весь контейнер без пустых мест
Fit (Вместить)	Изображение полностью видно, могут быть пустые поля
Crop (Кадрировать)	Вы выбираете, какую часть изображения показывать
Скругление углов	Делает углы фотографии круглыми — как аватар

Работа с текстом
Нажмите клавишу T или нажмите на иконку T в верхней панели — появится курсор. Кликните в нужном месте и начните печатать.

1. Вставьте токен в поле Tilda. Скопируйте ссылку на ваш фрейм и вставьте в поле URL.
2. Нажмите «Импорт» — дизайн перенесётся в Zeroblock.

Настройка сетки	Значение для Tilda
Тип	Columns (Колонки)
Количество колонок	12
Выравнивание	Center (По центру)
Ширина колонки	60 пикселей
Расстояние между колонками (Gutter)	40 пикселей

Сетка для Tilda

Используйте именно эти настройки (12 колонок, 60px, gutter 40px) — тогда дизайн из Figma совпадёт с сеткой Tilda при переносе.

Перенос дизайна из Figma в Tilda
1.    Создайте фрейм 1200px шириной с сеткой для Tilda.
2.    Нарисуйте дизайн. Переименуйте слои: изображение → «image», кнопка → «button», текст → «text».
3.    В Tilda откройте Zeroblock → кнопка «...» (три точки) → «Импорт».

4. В Figma: Main Menu → Help & Account → «Personal Access Tokens» → сгенерируйте токен → скопируйте.

5. Вставьте токен в поле Tilda. Скопируйте ссылку на ваш фрейм и вставьте в поле URL.
6. Нажмите «Импорт» — дизайн перенесётся в Zeroblock.