#ЧтоНового
Как перенести адаптивный дизайн из Figma в Tilda бесплатно — плагин Nolim App [beta]
Сейчас с помощью плагина Nolim App можно перенести макеты из Figma в Zero block:
— структуру слоёв
— размеры и позиции элементов
— изображения
— кнопки
— адаптивные версии макета
Мы продолжаем дорабатывать плагин и собираем обратную связь.
На период beta‑тестирования импорт доступен бесплатно, без подписки Нолим. Если заметите ошибку или некорректный перенос макета, напишите нам в поддержку в Telegram или в Max.
Чтобы перенос прошёл корректно, в Figma стоит заранее правильно подготовить структуру фреймов, назвать изображения, фоны, кнопки и проверить одинаковую вложенность на всех адаптивах.
— структуру слоёв
— размеры и позиции элементов
— изображения
— кнопки
— адаптивные версии макета
Мы продолжаем дорабатывать плагин и собираем обратную связь.
На период beta‑тестирования импорт доступен бесплатно, без подписки Нолим. Если заметите ошибку или некорректный перенос макета, напишите нам в поддержку в Telegram или в Max.
Чтобы перенос прошёл корректно, в Figma стоит заранее правильно подготовить структуру фреймов, назвать изображения, фоны, кнопки и проверить одинаковую вложенность на всех адаптивах.
Макет можно перенести и без предварительной подготовки — плагин всё равно выполнит импорт «как есть». Но если слои, группы и элементы на разных разрешениях названы по-разному или имеют разную структуру, плагин может перенести их как отдельные элементы для каждого адаптива. Из-за этого в Tilda могут появиться дубли, лишние слои, смещения или другие артефакты.
Подготовка макета по этой инструкции не является обязательным условием для работы плагина. Это рекомендация, которая помогает сделать перенос более чистым и предсказуемым. Потратьте всего 10 минут на изучение этих правил — и вы сэкономите сотни часов на ручной вёрстке сайтов в Tilda.
Подготовка макета по этой инструкции не является обязательным условием для работы плагина. Это рекомендация, которая помогает сделать перенос более чистым и предсказуемым. Потратьте всего 10 минут на изучение этих правил — и вы сэкономите сотни часов на ручной вёрстке сайтов в Tilda.
Содержание
Что нужно перед началом
- Установить расширение Nolim для браузера на базе Chromium.
- Авторизоваться в расширении под своим аккаунтом Nolim.
- Включить в настройках расширения опцию импорта макета из Figma в Tilda.
- Установить плагин Nolim App в Figma.
- Авторизоваться в плагине тем же логином и паролем, что и в аккаунте Nolim.
- Подготовить в Figma все нужные адаптивы.
- Проверить, что брейкпоинты в Figma совпадают по ширине с брейкпоинтами в Tilda.
- Проверить, что последовательность слоёв и их имена на всех адаптивах совпадают.
- Очистить Zero Block перед импортом, чтобы внутри блока не осталось старых слоёв и элементов.
- Выделить фреймы нужных брейкпоинтов в Figma.
- Запустить плагин Nolim App и нажать экспорт макета.
- В Tilda нажать кнопку импорта в Zero Block.
- Дождаться окончания импорта и проверить адаптивы на всех брейкпоинтах.
Важно: названия брейкпоинтов в Figma могут быть любыми — система определяет их по ширине фреймов. Если что‑то импортировалось не так, ниже по инструкции разобраны частые причины и способы исправить перенос.
Как установить плагин в Figma
1. Перейдите по ссылке на плагин: https://www.figma.com/community/plugin/1582465536317274778/nolim-app
2. Нажмите кнопку установки плагина.
3. После установки откройте нужный файл с макетом в Figma.
4. Запустите плагин и авторизуйтесь в нем используя логин и пароль от аккаунта в Nolim.
5. После успешной авторизации можно будет отправлять фреймы из Figma в Tilda.
2. Нажмите кнопку установки плагина.
3. После установки откройте нужный файл с макетом в Figma.
4. Запустите плагин и авторизуйтесь в нем используя логин и пароль от аккаунта в Nolim.
5. После успешной авторизации можно будет отправлять фреймы из Figma в Tilda.
Подготовка макета в Figma
Каждый адаптив должен быть отдельным родительским frame.
Например:
Главное правило: ширина frame в Figma должна соответствовать ширине брейкпоинта в Tilda, например:
Например:
- Desktop 1920
- Tablet 960
- Mobile 640
- Mobile 320
Главное правило: ширина frame в Figma должна соответствовать ширине брейкпоинта в Tilda, например:
Версия | Название frame | Ширина frame |
Desktop | Desktop 1920 | 1920 px |
Tablet | Tablet 960 | 960 px |
Mobile | Mobile 320 | 320 px |
Главное правило: одинаковая структура на всех адаптивах
Для корректного переноса в Tilda последовательность слоёв на всех адаптивных версиях должна совпадать.
Это значит, что на Desktop, Tablet и Mobile должны быть одинаковыми:
— количество уровней вложенности
— порядок родительских групп
— логика последовательности слоёв
— основные группы и контейнеры
Имена отдельных слоёв могут отличаться, но лучше сразу использовать единый нейминг.
Пример правильной структуры:
Desktop 1920
│─ Header
│ │─ Logo
│ └─ Menu
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Mobile 320
│─ Header
│ │─ Logo
│ └─ Menu
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Почему это правильно:
— на всех адаптивах одинаковое дерево слоёв
— Hero есть и на Desktop, и на Mobile
— Content лежит внутри Hero на всех версиях
— кнопка везде находится в одинаковом месте последовательности
— фоновая картинка bg_picture_hero лежит внутри Hero на верхнем уровне
Пример неправильной структуры
Desktop 1440
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Mobile 375
│─ Hero
│─ Wrapper
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Почему это неправильно:
— на Mobile появился лишний слой Wrapper
— структура Desktop и Mobile больше не совпадает
— плагин может некорректно сопоставить элементы
— после импорта в Tilda элементы могут сместиться и продублироваться
Как исправить:
Mobile 375
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Отдельная частая история — на одном из брейкпоинтов появляется лишний слой или элемент, которого нет на других версиях. В этом случае импорт тоже может пройти с ошибками: лишний блок сместится или задублируется только на конкретном адаптиве.
Чтобы не ловить такие артефакты, сначала выравнивайте последовательность слоёв, а уже потом настраивайте нюансы адаптива.
Для корректного переноса в Tilda последовательность слоёв на всех адаптивных версиях должна совпадать.
Это значит, что на Desktop, Tablet и Mobile должны быть одинаковыми:
— количество уровней вложенности
— порядок родительских групп
— логика последовательности слоёв
— основные группы и контейнеры
Имена отдельных слоёв могут отличаться, но лучше сразу использовать единый нейминг.
Пример правильной структуры:
Desktop 1920
│─ Header
│ │─ Logo
│ └─ Menu
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Mobile 320
│─ Header
│ │─ Logo
│ └─ Menu
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Почему это правильно:
— на всех адаптивах одинаковое дерево слоёв
— Hero есть и на Desktop, и на Mobile
— Content лежит внутри Hero на всех версиях
— кнопка везде находится в одинаковом месте последовательности
— фоновая картинка bg_picture_hero лежит внутри Hero на верхнем уровне
Пример неправильной структуры
Desktop 1440
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Mobile 375
│─ Hero
│─ Wrapper
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Почему это неправильно:
— на Mobile появился лишний слой Wrapper
— структура Desktop и Mobile больше не совпадает
— плагин может некорректно сопоставить элементы
— после импорта в Tilda элементы могут сместиться и продублироваться
Как исправить:
Mobile 375
│─ Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
Отдельная частая история — на одном из брейкпоинтов появляется лишний слой или элемент, которого нет на других версиях. В этом случае импорт тоже может пройти с ошибками: лишний блок сместится или задублируется только на конкретном адаптиве.
Чтобы не ловить такие артефакты, сначала выравнивайте последовательность слоёв, а уже потом настраивайте нюансы адаптива.
Правила нейминга в Figma
В макете лучше избегать стандартных названий Figma:
Такие названия усложняют проверку макета и могут привести к ошибкам при переносе.
Лучше использовать понятные названия по смыслу:
А для технически важных элементов использовать специальные названия:
В макете лучше избегать стандартных названий Figma:
- Group 1
- Frame 123
- Rectangle 5
- Image
- Vector 12
Такие названия усложняют проверку макета и могут привести к ошибкам при переносе.
Лучше использовать понятные названия по смыслу:
- Header
- Hero
- Content
- Cards
- Card
- Form
- Footer
- Menu
- Logo
- Title
- Subtitle
- Text
А для технически важных элементов использовать специальные названия:
- picture_***
- bg_picture_***
- btn
- button
Можно не переименовывать каждый слой на всех адаптивах. Достаточно навести порядок в самом крупном брейкпоинте, который используете как основной. Плагин синхронизирует имена на остальные версии по совпадающей последовательности слоёв.
Как называть обычные изображения
Если изображение является обычным элементом внутри блока, его нужно называть через picture_.
Например:
Используйте picture_, если это:
Пример структуры карточки:
Card
│─ picture_icon
│─ Title
└─ Text
Пример структуры кнопки с иконкой:
btn
│─ Label
└─ picture_arrow
Если изображение является обычным элементом внутри блока, его нужно называть через picture_.
Например:
- picture_photo
- picture_icon
- picture_product
- picture_arrow
- picture_card
- picture_decor
Используйте picture_, если это:
- фото
- иконка
- иллюстрация
- стрелка
- декоративный элемент
- изображение внутри карточки
- изображение внутри кнопки
Пример структуры карточки:
Card
│─ picture_icon
│─ Title
└─ Text
Пример структуры кнопки с иконкой:
btn
│─ Label
└─ picture_arrow
Как называть фоновые изображения
Если изображение должно стать фоном блока, его нужно называть через `bg_picture`.
Например:
Фоновая картинка должна соответствовать трём правилам:
1. Лежать внутри того frame, для которого она является фоном.
2. Быть прямым дочерним слоем этого frame.
3. Начинаться с названия `bg_picture`.
Правильная структура:
Hero
│─ Header
│ │─ Logo
│ └─ Menu
└─ bg_picture_hero
Неправильная структура:
Hero
│─ Header
│ │─ Logo
│.│─ bg_picture_hero
│ └─ Menu
Почему неправильно:
— `bg_picture_hero` вложен внутрь `Content`;
— он не является прямым дочерним слоем `Hero`;
— фон может не примениться корректно.
Если изображение должно стать фоном блока, его нужно называть через `bg_picture`.
Например:
- bg_picture
- bg_picture_hero
- bg_picture_main
- bg_picture_about
- bg_picture
Фоновая картинка должна соответствовать трём правилам:
1. Лежать внутри того frame, для которого она является фоном.
2. Быть прямым дочерним слоем этого frame.
3. Начинаться с названия `bg_picture`.
Правильная структура:
Hero
│─ Header
│ │─ Logo
│ └─ Menu
└─ bg_picture_hero
Неправильная структура:
Hero
│─ Header
│ │─ Logo
│.│─ bg_picture_hero
│ └─ Menu
Почему неправильно:
— `bg_picture_hero` вложен внутрь `Content`;
— он не является прямым дочерним слоем `Hero`;
— фон может не примениться корректно.
Как плагин работает с изображениями
- При импорте плагин автоматически переводит все растровые изображения в формат WebP — так страницы в Tilda загружаются быстрее и занимают меньше места.
- По умолчанию картинки сжимаются по правилам Tilda до ширины 1680 px. Если вам нужен фон или фото шире, проще экспортировать его из Figma отдельно и загрузить в Tilda вручную. В настройках Tilda можно разрешить загрузку до 1920 px, но имейте в виду, что это может замедлить страницу и повлиять на SEO и конверсию.
- Векторные элементы (например, SVG) при импорте остаются векторными и в Tilda — мы не превращаем их в растр.
- Ограничений по типу аккаунта Figma нет: плагин одинаково работает и с бесплатной, и с платной версией.
Как оформлять кнопки
Чтобы плагин распознал кнопку, родительская группа кнопки должна называться:
btn или button
Внутри кнопки должно быть:
— один текстовый слой;
— одна иконка или картинка с названием `picture_*`, если она нужна.
Правильный пример:
btn
│─ Label
└─ picture_arrow
или:
button
│─ Label
└─ picture_icon
Если кнопка без иконки:
btn
└─ Label
Правильная структура кнопки в слоях Figma.
Нежелательный вариант:
btn
│─ Rectangle
│─ Text
│─ Icon
│─ Shadow
└─ Glow
Почему так лучше не делать:
— дополнительные декоративные слои внутри кнопки могут быть проигнорированы;
— сложная структура кнопки может перенестись некорректно;
— плагину сложнее определить, где сама кнопка, где текст, а где декор.
Если у кнопки сложный декоративный фон, объедините декор в одну картинку и назовите её picture_button_bg — так перенос будет предсказуемым.
Чтобы плагин распознал кнопку, родительская группа кнопки должна называться:
btn или button
Внутри кнопки должно быть:
— один текстовый слой;
— одна иконка или картинка с названием `picture_*`, если она нужна.
Правильный пример:
btn
│─ Label
└─ picture_arrow
или:
button
│─ Label
└─ picture_icon
Если кнопка без иконки:
btn
└─ Label
Правильная структура кнопки в слоях Figma.
Нежелательный вариант:
btn
│─ Rectangle
│─ Text
│─ Icon
│─ Shadow
└─ Glow
Почему так лучше не делать:
— дополнительные декоративные слои внутри кнопки могут быть проигнорированы;
— сложная структура кнопки может перенестись некорректно;
— плагину сложнее определить, где сама кнопка, где текст, а где декор.
Если у кнопки сложный декоративный фон, объедините декор в одну картинку и назовите её picture_button_bg — так перенос будет предсказуемым.
Структура кнопки с иконкой
Как называть группы и контейнеры
Для обычных групп используйте понятные названия по смыслу.
Рекомендуемые названия:
Пример хорошей структуры:
Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Subtitle
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Пример структуры карточек:
Cards
│─ Card 01
│ │─ picture_icon
│ │─ Title
│ └─ Text
│─ Card 02
│ │─ picture_icon
│ │─ Title
│ └─ Text
│─ Card 03
│─ picture_icon
│─ Title
└─ Text
Что делать со сложными декоративными элементами
Сложные декоративные элементы лучше переносить как изображение.
Это касается:
— сложных SVG
— нестандартных фигур
— декоративных композиций
— сложных градиентов (особенно с большим количеством цветов)
— групп из множества векторов
— декоративных теней и свечений
Такие элементы лучше заранее объединить и назвать через:
Если элемент должен быть обычной картинкой внутри блока — используйте picture_.
Если элемент должен быть фоном блока — используйте bg_picture_.
С простыми градиентами (2–3 цвета) плагин обычно справляется нормально. Сложные градиенты надёжнее вынести в отдельное изображение.
Для обычных групп используйте понятные названия по смыслу.
Рекомендуемые названия:
- Header
- Hero
- Content
- Cards
- Card
- Form
- Footer
- Menu
- Logo
- Title
- Subtitle
- Text
- Image
- Buttons
Пример хорошей структуры:
Hero
│─ bg_picture_hero
│─ Content
│─ Title
│─ Subtitle
│─ Text
│─ btn
│─ Label
└─ picture_arrow
Пример структуры карточек:
Cards
│─ Card 01
│ │─ picture_icon
│ │─ Title
│ └─ Text
│─ Card 02
│ │─ picture_icon
│ │─ Title
│ └─ Text
│─ Card 03
│─ picture_icon
│─ Title
└─ Text
Что делать со сложными декоративными элементами
Сложные декоративные элементы лучше переносить как изображение.
Это касается:
— сложных SVG
— нестандартных фигур
— декоративных композиций
— сложных градиентов (особенно с большим количеством цветов)
— групп из множества векторов
— декоративных теней и свечений
Такие элементы лучше заранее объединить и назвать через:
- picture_decor
- picture_shape
- picture_diamond
- bg_picture_decor
Если элемент должен быть обычной картинкой внутри блока — используйте picture_.
Если элемент должен быть фоном блока — используйте bg_picture_.
С простыми градиентами (2–3 цвета) плагин обычно справляется нормально. Сложные градиенты надёжнее вынести в отдельное изображение.
Экспорт из Figma
Подготовка перед экспортом
Перед запуском плагина проверьте макет по чеклисту:
☐ Все адаптивы находятся в отдельных родительских frame.
☐ Ширина каждого frame соответствует нужному брейкпоинту.
☐ Последовательность слоёв на всех адаптивах совпадает.
☐ Обычные изображения названы через picture_*.
☐ Фоновые изображения названы через bg_picture_*.
☐ bg_picture лежит на нижнем уровне нужного frame.
☐ Кнопки названы btn или button.
☐ Внутри кнопки есть текстовый слой.
☐ Иконка внутри кнопки названа через picture_*.
☐ Нет случайных Group 1, Frame 123, Rectangle 5 без понятного смысла.
☐ Сложные декоративные элементы подготовлены как picture или bg_picture.
☐ Zero Block в Tilda очищен — в нём нет старых слоёв перед импортом.
Как отправить фреймы из Figma
Шаг 1. Откройте макет в Figma: Откройте файл, в котором подготовлены адаптивные версии макета.
Шаг 2. Выделите нужные фреймы: Выделите один или несколько родительских frame, которые нужно перенести в Tilda.
Перед запуском плагина проверьте макет по чеклисту:
☐ Все адаптивы находятся в отдельных родительских frame.
☐ Ширина каждого frame соответствует нужному брейкпоинту.
☐ Последовательность слоёв на всех адаптивах совпадает.
☐ Обычные изображения названы через picture_*.
☐ Фоновые изображения названы через bg_picture_*.
☐ bg_picture лежит на нижнем уровне нужного frame.
☐ Кнопки названы btn или button.
☐ Внутри кнопки есть текстовый слой.
☐ Иконка внутри кнопки названа через picture_*.
☐ Нет случайных Group 1, Frame 123, Rectangle 5 без понятного смысла.
☐ Сложные декоративные элементы подготовлены как picture или bg_picture.
☐ Zero Block в Tilda очищен — в нём нет старых слоёв перед импортом.
Как отправить фреймы из Figma
Шаг 1. Откройте макет в Figma: Откройте файл, в котором подготовлены адаптивные версии макета.
Шаг 2. Выделите нужные фреймы: Выделите один или несколько родительских frame, которые нужно перенести в Tilda.
Важно: выделять нужно именно родительские фреймы экранов или блоков, а не отдельные элементы внутри них.
Шаг 3. Запустите Nolim App: Откройте плагин Nolim App в Figma. Если вы ещё не авторизованы, появится окно входа. Введите email и пароль от аккаунта Nolim и нажмите «Войти».
Шаг 4. Проверьте список фреймов: После запуска плагин покажет выбранные фреймы.
Шаг 5. Нажмите «Отправить фреймы»: Нажмите кнопку отправки фреймов и дождитесь завершения загрузки. Не закрывайте Figma и плагин до окончания процесса.
Что делать, если плагин показывает предупреждения
Плагин может показать предупреждения перед отправкой или во время проверки макета.
Обычно предупреждения бывают двух типов:
Предупреждение о несовпадении структуры
Если плагин пишет, что структура отличается, значит на разных адаптивах дерево слоёв устроено по-разному.
Например, на Desktop структура такая:
Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
А на Mobile такая:
Hero
│─ Wrapper
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
В этом случае нужно вручную исправить структуру в Figma.
Что сделать:
1. Откройте панель слоёв.
2. Сравните Desktop и Mobile.
3. Найдите лишние или недостающие группы.
4. Уберите лишнюю вложенность.
5. Проверьте, что порядок слоёв совпадает.
6. Запустите плагин повторно.
Шаг 4. Проверьте список фреймов: После запуска плагин покажет выбранные фреймы.
Шаг 5. Нажмите «Отправить фреймы»: Нажмите кнопку отправки фреймов и дождитесь завершения загрузки. Не закрывайте Figma и плагин до окончания процесса.
Что делать, если плагин показывает предупреждения
Плагин может показать предупреждения перед отправкой или во время проверки макета.
Обычно предупреждения бывают двух типов:
- Несовпадение структуры.
- Несовпадение имён.
Предупреждение о несовпадении структуры
Если плагин пишет, что структура отличается, значит на разных адаптивах дерево слоёв устроено по-разному.
Например, на Desktop структура такая:
Hero
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
А на Mobile такая:
Hero
│─ Wrapper
│─ bg_picture_hero
│─ Content
│─ Title
└─ Text
В этом случае нужно вручную исправить структуру в Figma.
Что сделать:
1. Откройте панель слоёв.
2. Сравните Desktop и Mobile.
3. Найдите лишние или недостающие группы.
4. Уберите лишнюю вложенность.
5. Проверьте, что порядок слоёв совпадает.
6. Запустите плагин повторно.
Важно: плагин не перестраивает структуру автоматически. Если дерево слоёв отличается, его нужно исправить вручную.
Предупреждение о несовпадении имён
Если структура одинаковая, но имена слоёв отличаются, можно использовать синхронизацию имён.
Логика такая:
— самый большой экран используется как эталон;
— остальные адаптивы получают имена по соответствующей структуре.
Например, если на Desktop слой называется:
bg_picture_hero
а на Mobile тот же слой называется:
Image
после синхронизации он получит корректное имя:
bg_picture_hero
Важно: синхронизация имён помогает только тогда, когда структура на адаптивах уже совпадает.
Если структура разная, сначала нужно исправить дерево слоёв.
Если структура одинаковая, но имена слоёв отличаются, можно использовать синхронизацию имён.
Логика такая:
— самый большой экран используется как эталон;
— остальные адаптивы получают имена по соответствующей структуре.
Например, если на Desktop слой называется:
bg_picture_hero
а на Mobile тот же слой называется:
Image
после синхронизации он получит корректное имя:
bg_picture_hero
Важно: синхронизация имён помогает только тогда, когда структура на адаптивах уже совпадает.
Если структура разная, сначала нужно исправить дерево слоёв.
Импорт в Tilda
После отправки фреймов из Figma откройте страницу в Tilda.
Шаг 1. Откройте нужную страницу в Tilda
Перейдите в проект Tilda и откройте страницу, куда нужно перенести макет.
Шаг 2. Откройте Zero Block
Добавьте новый Zero Block или откройте уже существующий.
Перейдите в режим редактирования Zero Block.
Шаг 3. Откройте импорт Nolim
В левом верхнем углу Zero Block нажмите кнопку "Импорт".
После этого откроется окно импорта.
Шаг 4. Нажмите «Импортировать»
В открывшемся окне нажмите кнопку "Импортировать".
Плагин начнёт переносить макет из Figma в Tilda.
Шаг 1. Откройте нужную страницу в Tilda
Перейдите в проект Tilda и откройте страницу, куда нужно перенести макет.
Шаг 2. Откройте Zero Block
Добавьте новый Zero Block или откройте уже существующий.
Перейдите в режим редактирования Zero Block.
Шаг 3. Откройте импорт Nolim
В левом верхнем углу Zero Block нажмите кнопку "Импорт".
После этого откроется окно импорта.
Шаг 4. Нажмите «Импортировать»
В открывшемся окне нажмите кнопку "Импортировать".
Плагин начнёт переносить макет из Figma в Tilda.
Что проверить после импорта
После переноса обязательно проверьте каждый брейкпоинт.
Чеклист проверки:
☐ Все основные элементы появились в Zero Block.
☐ Тексты находятся на своих местах.
☐ Картинки перенеслись корректно.
☐ Фоновые изображения применились к нужным блокам.
☐ Кнопки отображаются корректно.
☐ На мобильной версии нет сильных смещений.
☐ На планшетной версии нет наложений.
☐ Декоративные элементы отображаются правильно.
☐ Векторы и SVG не сломались.
Если какие-то векторы отображаются некорректно, обновите страницу и проверьте блок повторно.
Если проблема сохраняется, лучше вернуться в Figma, подготовить сложный элемент как изображение и импортировать заново.
После переноса обязательно проверьте каждый брейкпоинт.
Чеклист проверки:
☐ Все основные элементы появились в Zero Block.
☐ Тексты находятся на своих местах.
☐ Картинки перенеслись корректно.
☐ Фоновые изображения применились к нужным блокам.
☐ Кнопки отображаются корректно.
☐ На мобильной версии нет сильных смещений.
☐ На планшетной версии нет наложений.
☐ Декоративные элементы отображаются правильно.
☐ Векторы и SVG не сломались.
Если какие-то векторы отображаются некорректно, обновите страницу и проверьте блок повторно.
Если проблема сохраняется, лучше вернуться в Figma, подготовить сложный элемент как изображение и импортировать заново.
Частые ошибки
Ошибка 1. Разная структура на адаптивах
Проблема:
Desktop:
Hero → Content → Title
Mobile:
Hero → Wrapper → Content → Title
Что не так:
На Mobile появился дополнительный уровень `Wrapper`.
Как исправить:
Сделать одинаковую структуру:
Hero → Content → Title
на всех адаптивах.
Ошибка 2. Фоновая картинка лежит слишком глубоко
Проблема:
Hero
└─ Content
└─ bg_picture_hero
Что не так:
Фон лежит внутри `Content`, а не на верхнем уровне `Hero`.
Как исправить:
Hero
├─ bg_picture_hero
└─ Content
Ошибка 3. Фоновая картинка названа неправильно
Проблема:
Hero
├─ background
└─ Content
Что не так:
Плагин не поймёт, что `background` должен быть фоном.
Как исправить:
Hero
├─ bg_picture_hero
└─ Content
Ошибка 4. Обычная картинка названа просто Image
Проблема:
Card
├─ Image
├─ Title
└─ Text
Как исправить:
Card
├─ picture_icon
├─ Title
└─ Text
Ошибка 5. Кнопка не названа как кнопка
Проблема:
Group 15
├─ Text
└─ Icon
Что не так:
Плагин может не распознать этот элемент как кнопку.
Как исправить:
btn
├─ Label
└─ picture_arrow
или:
button
├─ Label
└─ picture_arrow
Ошибка 6. Слишком сложная кнопка
Проблема:
btn
├─ Rectangle
├─ Shadow
├─ Glow
├─ Text
└─ Icon
Что не так:
Внутри кнопки слишком много декоративных слоёв.
Как исправить:
btn
├─ Label
└─ picture_arrow
Если нужен сложный фон, объедините декор в картинку:
btn
├─ picture_button_bg
├─ Label
└─ picture_arrow
Ошибка 7. Слишком глубокая вложенность слоёв
В Tilda Zero Block комфортный предел — до 5 уровней вложенности. Если в макете есть цепочки с 6–7 группами друг в друге, импорт может пройти с ошибками или не отработать.
Как исправить: пройтись по дереву слоёв, развернуть лишние группы и упростить структуру до разумной глубины.
Ошибка 8. Изображение выезжает за пределы фрейма
Плагин не обрезает изображения автоматически. Если картинка в Figma выходит за границы родительского frame, в Tilda она может выезжать за пределы блока и ломать вёрстку.
Как исправить: обрезать изображение по границам фрейма или настроить маску так, чтобы оно целиком находилось внутри родительского слоя.
Ошибка 9. Сложный градиент импортируется с ошибкой
Простые градиенты из двух‑трёх цветов обычно переносятся корректно. Сложные, с большим числом цветовых точек, после импорта могут выглядеть иначе.
Как исправить: сложные градиенты лучше заранее превратить в растровое изображение и назвать picture_* или bg_picture_*.
Проблема:
Desktop:
Hero → Content → Title
Mobile:
Hero → Wrapper → Content → Title
Что не так:
На Mobile появился дополнительный уровень `Wrapper`.
Как исправить:
Сделать одинаковую структуру:
Hero → Content → Title
на всех адаптивах.
Ошибка 2. Фоновая картинка лежит слишком глубоко
Проблема:
Hero
└─ Content
└─ bg_picture_hero
Что не так:
Фон лежит внутри `Content`, а не на верхнем уровне `Hero`.
Как исправить:
Hero
├─ bg_picture_hero
└─ Content
Ошибка 3. Фоновая картинка названа неправильно
Проблема:
Hero
├─ background
└─ Content
Что не так:
Плагин не поймёт, что `background` должен быть фоном.
Как исправить:
Hero
├─ bg_picture_hero
└─ Content
Ошибка 4. Обычная картинка названа просто Image
Проблема:
Card
├─ Image
├─ Title
└─ Text
Как исправить:
Card
├─ picture_icon
├─ Title
└─ Text
Ошибка 5. Кнопка не названа как кнопка
Проблема:
Group 15
├─ Text
└─ Icon
Что не так:
Плагин может не распознать этот элемент как кнопку.
Как исправить:
btn
├─ Label
└─ picture_arrow
или:
button
├─ Label
└─ picture_arrow
Ошибка 6. Слишком сложная кнопка
Проблема:
btn
├─ Rectangle
├─ Shadow
├─ Glow
├─ Text
└─ Icon
Что не так:
Внутри кнопки слишком много декоративных слоёв.
Как исправить:
btn
├─ Label
└─ picture_arrow
Если нужен сложный фон, объедините декор в картинку:
btn
├─ picture_button_bg
├─ Label
└─ picture_arrow
Элемент | Как назвать | Пример |
Родительский экран | по брейкпоинту | Desktop 1200, Tablet 960 |
Обычная картинка | picture_* | picture_icon, picture_photo |
Фоновая картинка | bg_picture_* | bg_picture_hero |
Кнопка | btn, button | btn |
Иконка внутри кнопки | picture_* | picture_arrow |
Контентная группа | по смыслу | Content, Cards, Form |
Декор | picture_* | picture_decor |
Фоновый декор | picture_decor | bg_picture_decor |
Ошибка 7. Слишком глубокая вложенность слоёв
В Tilda Zero Block комфортный предел — до 5 уровней вложенности. Если в макете есть цепочки с 6–7 группами друг в друге, импорт может пройти с ошибками или не отработать.
Как исправить: пройтись по дереву слоёв, развернуть лишние группы и упростить структуру до разумной глубины.
Ошибка 8. Изображение выезжает за пределы фрейма
Плагин не обрезает изображения автоматически. Если картинка в Figma выходит за границы родительского frame, в Tilda она может выезжать за пределы блока и ломать вёрстку.
Как исправить: обрезать изображение по границам фрейма или настроить маску так, чтобы оно целиком находилось внутри родительского слоя.
Ошибка 9. Сложный градиент импортируется с ошибкой
Простые градиенты из двух‑трёх цветов обычно переносятся корректно. Сложные, с большим числом цветовых точек, после импорта могут выглядеть иначе.
Как исправить: сложные градиенты лучше заранее превратить в растровое изображение и назвать picture_* или bg_picture_*.
Nolim App сейчас в beta‑тестировании, и мы активно улучшаем импорт из Figma в Tilda. Если что‑то не сработало как нужно или у вас есть идея по доработке, напишите нам в поддержку — обратная связь напрямую влияет на следующие обновления плагина.
Как тебе статья?