Импорт блока из Figma
Импорт блока позволяет быстро перенести блок с элементами из макета в сервисе Figma сразу в редактор вашего сайта. Это удобно, когда вы или другой дизайнер подготовили у Figma макет будущего сайта, который необходимо создать на Weblium.
Вам достаточно 1 раз подключить интеграцию, после чего вы можете последовательно добавлять пустые Flex block в редакторе и импортировать фрейм (frame) из Figma – изображения, текст, фон блока и т.д. будут автоматически перенесены на ваш сайт. Благодаря этому вы можете сэкономить очень много времени.
Содержание:
Создание API-токена в Figma
Импорт блока в Weblium
Требования к макету
Рекомендации и подсказки
Настройка стилей сайта в соответствии с макетом (необязательно)
Возможные ошибки и их решения
Подсказка: пример блока в Figma можно найти по этой ссылке. Вы можете импортировать этот блок, чтобы опробовать функцию, или использовать его как образец при создании дизайна в Figma.
Необходимо 1 раз создать API-токен в Figma, который будет использован при импорте блока — после первого импорта блока на Weblium этот токен будет автоматически подставляться при дальнейших импортах на Weblium на всех ваших сайтах в текущем аккаунте.
Редактируя файл в Figma, откройте главное меню в левом верхнем углу, разверните подменю Help and account (Помощь и аккаунт) и выберите Account settings (Настройки аккаунта):
Подсказка: если вы находитесь не в открытом файле, а на главной странице Figma, необходимо нажать на имя вашего профиля в левом верхнем углу и выбрать пункт “Settings”.
Во вкладке Security найдите секцию Personal access tokens и нажмите на кнопку Generate new token (сгенерировать новый токен):
Укажите желаемое название для вашего токена (①), в выпадающем списке Expiration (Срок действия) рекомендуем выбрать No expiration (②) — таким образом этот API-токен будет работать без временных ограничений. После этого нажмите кнопку Generate token (Сгенерировать токен, ③):
Скопируйте ваш токен с помощью кнопки Copy this token:
Примечание: токен доступен для копирования в Figma только ограниченное время после его генерации — если токен был утерян, вы можете сгенерировать новый.
Перейдите в редактор сайта на Weblium и создайте пустой Flex block в том месте, куда необходимо импортировать блок (фрейм) из Figma.
Нажмите на 3 точки в правом верхнем углу Flex блока, выберите Импорт из Figma и вставьте ранее скопированный токен в поле Укажите API-токен:
Подсказка: если вы ранее импортировали блоки из вашего текущего аккаунта в Figma в текущий Weblium-аккаунт, необходимый токен будет подставлен автоматически.
Откройте ваш макет в Фигма, выделите именно тот фрейм (frame), который вам необходимо импортировать и скопируйте ссылку на него. Если вы используете браузерную версию Figma, можете просто скопировать URL (ссылку) из адресной строки:
Подсказка: отдельные тексты и изображения (группы изображений) должны быть на уровне фрейма (сразу в нём) — таким образом, каждое изображение/текст будет отдельным элементом после импорта. Вы можете увидеть пример структуры на скриншоте выше слева. Более детально о рекомендациях можно узнать в соответствующем разделе.
…если вы используете установленное на вашем компьютере приложение Figma, нажмите правой клавишей мыши на необходимый фрейм, выберите Copy/Paste as и кликните Copy link to selection (скопировать ссылку на выбранное):
Подсказка: как альтернативный вариант, чтобы скопировать ссылку, вы можете просто выделить необходимый фрейм и нажать комбинацию клавиш Ctrl+L.
Вернитесь в редактор Weblium, вставьте ранее скопированную ссылку в поле Укажите ссылку на фрейм и нажмите кнопку Импорт:
Готово! Блок был импортирован на ваш сайт:
Важно: при импорте из Figma определенные элементы могут не быть перенесены на Weblium — с помощью импорта вы можете создать заготовку блоков, местами требующих дополнительных редактирований (добавление элементов, не распознанных во время импорта и т.п.).
Примечание: на данный момент можно переносить блоки по одному за раз (не весь сайт сразу).
Фрейм (импортированный блок) должен быть высотой не менее 65 px и не более 3000 px — если ваш фрейм имеет бóльшую высоту, его необходимо разделить на отдельные фреймы;
Импортируемый блок в Figma должен быть либо фреймом (рекомендуется), либо группой элементов. При этом важно учесть, что 1 фрейм соответствует 1 блоку после импорта на Weblium;
Фрейм не должен быть скрыт в Figma:
Примечание: если в тексте в Figma есть определенное дополнительное оформление, которое недоступно на нашей платформе (обводка текста, маска и т.д.), то такой текст будет импортирован как изображение. Поэтому рекомендуется импортировать текст в качестве обычного текста без эффектов.
Подсказка: повторно отметим, что по этой ссылке вы можете найти пример блока в Figma. Вы можете импортировать этот блок, чтобы протестировать функцию, или использовать его в качестве примера при создании макета в Figma.
Рекомендуемой шириной фрейма является 1600 px с контентом, расположенным посередине фрейма в пределах ширины 1170 px (именно такова ширина рабочей области Flex блока). Другими словами, во фрейме с шириной 1600 пикселей рекомендуем сделать боковые отступы по 215 px с обеих сторон, чтобы все элементы были посередине в пределах 1170 px.
Важно: максимально допустимой высотой фрейма является 3000 px. Фреймы с большей высотой должны быть разделены на отдельные фреймы перед импортом.
Подсказка: вам может помочь оставаться в пределах 1170 px использование сетки (грида, grid) — подробнее о ней в соответствующем разделе ниже.
При импорте блока на Weblium отдельно загружается каждый элемент, который находится непосредственно внутри фрейма в Figma. То есть структура фрейма должна быть следующей: Frame → группы, кнопки, текст, изображения и другие элементы.
При этом каждая группа элементов (Group) будет распознана как 1 элемент — скажем, если внутри фрейма сгруппировано 3 изображения, то после импорта они будут как 1 единое изображение.
Поэтому, чтобы после импорта элементы в блоке были так же отдельными элементами в редакторе Weblium, нужно в макете все необходимые элементы или группы вынести на уровень фрейма. Другими словами, сделать так, чтобы каждое отдельное изображение (или группа, состоящая из нескольких небольших изображений), текст и т.п. в боковом меню Figma были сразу внутри фрейма.
К примеру, если у вас во фрейме 2 или более крупных сгруппированных изображений, рекомендуем их расгруппировать (Ungroup — комбинация клавиш Ctrl+⌫), чтобы непосредственно внутри фрейма они были как отдельные элементы. Таким образом, после импорта в Weblium они также будут отдельными и вы сможете их независимо перемещать и редактировать.
Ключевое: если вы хотите редактировать на Weblium какой-либо элемент, находящийся в Figma внутри группы, вынесите этот элемент из группы на уровень фрейма.
Пример:
Фрейм, который будет впоследствии импортирован на Weblium;
Сразу внутри фрейма каждое изображение добавлено отдельно — на скриншоте 1 отдельное изображение выделено в качестве примера. То есть эти изображения не сгруппированы между собой, они являются отдельными объектами в пределах фрейма;
Также каждый текст является отдельным элементом в пределах фрейма. При необходимости тексты могут оставаться сгруппированными, при условии, что в группе будут только тексты:
При этом если у вас 1 изображение состоит из совокупности различных небольших элементов, то вы можете оставить их в качестве 1 группы, которая будет импортирована в Weblium как 1 сплошное изображение. Ниже пример такой группы – прямоугольник с 4 небольшими иконками объединен в 1 группу (с названием image 6). Поэтому после импорта на Weblium это будет 1 цельное изображение:
Если ваш блок содержит кнопки, вы можете назвать группу этой кнопки в Figma словом button (без других символов в названии) и аналогично другим элементам вынести эту кнопку на уровень фрейма в Figma — таким образом в Weblium будет создан именно элемент "Кнопка" на этом месте. При этом расположенный внутри такой группы текст будет установлен в качестве текста кнопки на Weblium, а стили кнопки (форма, цвет и т.д.) будут указаны в соответствии с глобальными настройками кнопок вашего сайта.
Примечение: необходимым условием для импорта кнопки является и слово “button” в качестве названия группы, которая будет превращена в кнопку, и наличие текстового элемента внутри этой группы.
Если не назвать необходимый элемент словом “button” в Figma, такая кнопка и её текст будут загружены в качестве обычного изображения.
После импорта блока по умолчанию кнопка будет добавлена среднего размера и с Primary стилем.
Рекомендуем перед импортом настроить стили вашего сайта (цветовую палитру и шрифты), чтобы в дальнейшем при необходимости вы могли изменять сразу все стили вашего сайта в несколько кликов. Детальнее об этом в следующем разделе инструкции.
По состоянию на сегодня указанные в Figma стили элементов (тени, скругления углов, обводка, маски и т.д.) импортируются в качестве изображения, без применения таких стилей в настройках элемента в редакторе Weblium. То есть, например, если у вас в Figma есть элемент с закругленными углами и тенью, то Weblium будет импортировать прямоугольное изображение, где закругленные углы и тень будут частью изображения без возможности их дальнейшего редактирования.
Если во фрейм добавлена группа, внутри которой текст вместе с другими элементами, то этот текст будет импортирован в качестве изображения (не как напечатанный текст). Аналогично если использовать текст в качестве маски поверх изображения, то он будет импортирован как обычное изображение.
Если в группе есть только текстовые элементы и/или кнопки, то они будут импортированы корректно как текстовые элементы — то есть можно группировать текстовые элементы и кнопки между собой, если кроме них в группе не будет ничего другого. Другими словами, группа в Figma, в которой только текстовые элементы и кнопки, расгрупировывается автоматически.
Если вы импортируете фрейм в Flex block, в котором уже есть контент, то новые элементы будут размещены поверх уже имеющихся. При этом фон блока будет изменен на новый (тот, что у фрейма в Фигме).
После успешного импорта и завершения всех редактирований блока, не забудьте адаптировать импортированный блок для отображения на мобильной и планшетной версии сайта. Для этого перейдите в редактор сайта соответствующего устройства (сверху по центру в редакторе Weblium) и разместите там элементы необходимым для вас образом.
Чтобы облегчить размещение элементов в Figma в пределах центральных 1170 px, вы можете добавить в фрейм сетку с колонками, которые имеют общую ширину 1170 px и выровнены по центру. Самым простым вариантом является добавление 1 колонки шириной 1170 px, однако мы рекомендуем добавить 8 колонок с такими параметрами, которые используются в обычных блоках Weblium — таким образом вы сможете размещать элементы в макете так, чтобы они имели такую же ширину, как в других блоках (не Flex block) на вашем сайте. Для этого:
① Выделите ваш макет и в правом боковом меню нажмите на плюсик в разделе Layout grid;
② Откройте Layout grid settings (настройка сетки);
③ Выберите в выпадающем списке Columns вместо "Grid" для отображения колонок;
④ Укажите для них настройки в соответствии со скриншотом ниже, а именно Count (количество колонок) — 8, Type — Center (для выравнивания колонок по центру), Width (ширина) — 120 px и Gutter (промежуток между колонками) — 30 px.
Таким образом, сумма колонок и промежутков между ними равна 1170 px, что поможет вам размещать элементы в пределах этой ширины, а также при необходимости указывать ширину элементов такой, чтобы они были в пределах определённого количества колонок. Например, на скриншоте тексты слева размещены в пределах 4 колонок — если ниже или выше этого блока в редакторе Weblium будет добавлен обычный блок (не Flex block), в нём элементы будут размещены по той же сетке, что будет сохранять консистентность дизайна.
Подсказка: вы можете сохранить эту сетку в стилях (Styles) вашего макета, чтобы затем добавлять её в другие фреймы в несколько кликов. Для этого после добавления сетки нажмите 4 точки справа от "Layout grid", в новом окошке "Grid styles" нажмите плюсик, введите произвольное название для этого стиля и нажмите на "Create style". После этого в новом фрейме вы сможете добавлять эту сетку в 1 клик, нажав на 4 точки справа от "Layout grid" и выбрав эту сетку.
Если вы создаете новый сайт, то для наилучшего результата перед последовательным импортом блоков можно настроить шрифты и цветовую палитру сайта в редакторе Weblium таким образом, чтобы они соответствовали макету в Figma.
Подсказка: действия из этого раздела не являются обязательными, но они улучшат будущий результат, а именно позволят в дальнейшем в редакторе изменять цвета и настройки шрифта одновременно для многих элементов. То есть настройки элементов Figma в бóльшей степени будут согласованы с настройками стиля сайта на Weblium.
В левом верхнем углу откройте Стили сайта (①), нажмите на кнопку Редактировать под вашей текущей палитрой сайта (②), далее нажмите поочередно на разноцветные квадратики (③) и укажите в соответствующем поле (④) HEX-код основных цветов, используемых в вашем макете. Таким образом, например, если после импорта определенные тексты будут иметь один из цветов, указанных в этих настройках, то вы сможете в будущем изменять этот цвет сразу для всех текстов в палитре сайта:
Подсказка: вы можете узнать подробнее о настройке цветовой палитры сайта в этой инструкции.
Также в Стилях сайта перейдите на вкладку Шрифты (①), нажмите на кнопку Редактировать под текущими шрифтами сайта (②). После чего последовательно открывайте разные типы шрифта (“Hero title”, “Block title” … “Text” и т.д. ③) и задайте для них те настройки шрифтов, которые используются в вашем макете (в первую очередь размер шрифта и само название шрифта, такие как Lato, Montserrat и т.д.).
Таким образом, если определенные тексты с макета совпадают по размеру с определенным типом шрифта на вашем сайте, импортируемые тексты будут иметь именно тот шрифт, который вы указали. Кроме того, вы затем сможете изменять стиль для всех текстов определенного типа одновременно в настройках стиля сайта:
Подсказка: больше информации о настройке шрифтов сайта вы можете найти в этой инструкции.
Также как до, так и после импорта вы можете настроить глобально стиль кнопок вашего сайта таким образом, чтобы он был приближен к макету. Если определенный элемент во фрейме имеет название button, то после импорта его будет добавлено в качестве кнопки и вы сможете указать для него один из стилей кнопок вашего сайта.
Ниже в таблицах приведены ошибки, которые могут отображаться в редакторе Weblium. В левой колонке можно увидеть текст ошибки, возникающий в редакторе; в центральной колонке — где эта ошибка может быть отображена, а в правой колонке – комментарии, которые помогут вам с исправлением этих ошибок.
В этой таблице указаны ошибки, после которых импорт нельзя продолжить до устранения описанных неполадок:
После приведенных ниже ошибок импорт продолжается, но некоторые элементы не будут импортированы:
Вам достаточно 1 раз подключить интеграцию, после чего вы можете последовательно добавлять пустые Flex block в редакторе и импортировать фрейм (frame) из Figma – изображения, текст, фон блока и т.д. будут автоматически перенесены на ваш сайт. Благодаря этому вы можете сэкономить очень много времени.
Содержание:
Создание API-токена в Figma
Импорт блока в Weblium
Требования к макету
Рекомендации и подсказки
Настройка стилей сайта в соответствии с макетом (необязательно)
Возможные ошибки и их решения
Подсказка: пример блока в Figma можно найти по этой ссылке. Вы можете импортировать этот блок, чтобы опробовать функцию, или использовать его как образец при создании дизайна в Figma.
Создание API-токена в Figma
Необходимо 1 раз создать API-токен в Figma, который будет использован при импорте блока — после первого импорта блока на Weblium этот токен будет автоматически подставляться при дальнейших импортах на Weblium на всех ваших сайтах в текущем аккаунте.
Редактируя файл в Figma, откройте главное меню в левом верхнем углу, разверните подменю Help and account (Помощь и аккаунт) и выберите Account settings (Настройки аккаунта):
Подсказка: если вы находитесь не в открытом файле, а на главной странице Figma, необходимо нажать на имя вашего профиля в левом верхнем углу и выбрать пункт “Settings”.
Во вкладке Security найдите секцию Personal access tokens и нажмите на кнопку Generate new token (сгенерировать новый токен):
Укажите желаемое название для вашего токена (①), в выпадающем списке Expiration (Срок действия) рекомендуем выбрать No expiration (②) — таким образом этот API-токен будет работать без временных ограничений. После этого нажмите кнопку Generate token (Сгенерировать токен, ③):
Скопируйте ваш токен с помощью кнопки Copy this token:
Примечание: токен доступен для копирования в Figma только ограниченное время после его генерации — если токен был утерян, вы можете сгенерировать новый.
Перейдите в редактор сайта на Weblium и создайте пустой Flex block в том месте, куда необходимо импортировать блок (фрейм) из Figma.
Нажмите на 3 точки в правом верхнем углу Flex блока, выберите Импорт из Figma и вставьте ранее скопированный токен в поле Укажите API-токен:
Подсказка: если вы ранее импортировали блоки из вашего текущего аккаунта в Figma в текущий Weblium-аккаунт, необходимый токен будет подставлен автоматически.
Импорт блока в Weblium
Откройте ваш макет в Фигма, выделите именно тот фрейм (frame), который вам необходимо импортировать и скопируйте ссылку на него. Если вы используете браузерную версию Figma, можете просто скопировать URL (ссылку) из адресной строки:
Подсказка: отдельные тексты и изображения (группы изображений) должны быть на уровне фрейма (сразу в нём) — таким образом, каждое изображение/текст будет отдельным элементом после импорта. Вы можете увидеть пример структуры на скриншоте выше слева. Более детально о рекомендациях можно узнать в соответствующем разделе.
…если вы используете установленное на вашем компьютере приложение Figma, нажмите правой клавишей мыши на необходимый фрейм, выберите Copy/Paste as и кликните Copy link to selection (скопировать ссылку на выбранное):
Подсказка: как альтернативный вариант, чтобы скопировать ссылку, вы можете просто выделить необходимый фрейм и нажать комбинацию клавиш Ctrl+L.
Вернитесь в редактор Weblium, вставьте ранее скопированную ссылку в поле Укажите ссылку на фрейм и нажмите кнопку Импорт:
Готово! Блок был импортирован на ваш сайт:
Важно: при импорте из Figma определенные элементы могут не быть перенесены на Weblium — с помощью импорта вы можете создать заготовку блоков, местами требующих дополнительных редактирований (добавление элементов, не распознанных во время импорта и т.п.).
Примечание: на данный момент можно переносить блоки по одному за раз (не весь сайт сразу).
Требования к макету
Фрейм (импортированный блок) должен быть высотой не менее 65 px и не более 3000 px — если ваш фрейм имеет бóльшую высоту, его необходимо разделить на отдельные фреймы;
Импортируемый блок в Figma должен быть либо фреймом (рекомендуется), либо группой элементов. При этом важно учесть, что 1 фрейм соответствует 1 блоку после импорта на Weblium;
Фрейм не должен быть скрыт в Figma:
Примечание: если в тексте в Figma есть определенное дополнительное оформление, которое недоступно на нашей платформе (обводка текста, маска и т.д.), то такой текст будет импортирован как изображение. Поэтому рекомендуется импортировать текст в качестве обычного текста без эффектов.
Подсказка: повторно отметим, что по этой ссылке вы можете найти пример блока в Figma. Вы можете импортировать этот блок, чтобы протестировать функцию, или использовать его в качестве примера при создании макета в Figma.
Рекомендации и подсказки
Размер фрейма
Рекомендуемой шириной фрейма является 1600 px с контентом, расположенным посередине фрейма в пределах ширины 1170 px (именно такова ширина рабочей области Flex блока). Другими словами, во фрейме с шириной 1600 пикселей рекомендуем сделать боковые отступы по 215 px с обеих сторон, чтобы все элементы были посередине в пределах 1170 px.
Важно: максимально допустимой высотой фрейма является 3000 px. Фреймы с большей высотой должны быть разделены на отдельные фреймы перед импортом.
Подсказка: вам может помочь оставаться в пределах 1170 px использование сетки (грида, grid) — подробнее о ней в соответствующем разделе ниже.
Структура
При импорте блока на Weblium отдельно загружается каждый элемент, который находится непосредственно внутри фрейма в Figma. То есть структура фрейма должна быть следующей: Frame → группы, кнопки, текст, изображения и другие элементы.
При этом каждая группа элементов (Group) будет распознана как 1 элемент — скажем, если внутри фрейма сгруппировано 3 изображения, то после импорта они будут как 1 единое изображение.
Поэтому, чтобы после импорта элементы в блоке были так же отдельными элементами в редакторе Weblium, нужно в макете все необходимые элементы или группы вынести на уровень фрейма. Другими словами, сделать так, чтобы каждое отдельное изображение (или группа, состоящая из нескольких небольших изображений), текст и т.п. в боковом меню Figma были сразу внутри фрейма.
К примеру, если у вас во фрейме 2 или более крупных сгруппированных изображений, рекомендуем их расгруппировать (Ungroup — комбинация клавиш Ctrl+⌫), чтобы непосредственно внутри фрейма они были как отдельные элементы. Таким образом, после импорта в Weblium они также будут отдельными и вы сможете их независимо перемещать и редактировать.
Ключевое: если вы хотите редактировать на Weblium какой-либо элемент, находящийся в Figma внутри группы, вынесите этот элемент из группы на уровень фрейма.
Пример:
Фрейм, который будет впоследствии импортирован на Weblium;
Сразу внутри фрейма каждое изображение добавлено отдельно — на скриншоте 1 отдельное изображение выделено в качестве примера. То есть эти изображения не сгруппированы между собой, они являются отдельными объектами в пределах фрейма;
Также каждый текст является отдельным элементом в пределах фрейма. При необходимости тексты могут оставаться сгруппированными, при условии, что в группе будут только тексты:
При этом если у вас 1 изображение состоит из совокупности различных небольших элементов, то вы можете оставить их в качестве 1 группы, которая будет импортирована в Weblium как 1 сплошное изображение. Ниже пример такой группы – прямоугольник с 4 небольшими иконками объединен в 1 группу (с названием image 6). Поэтому после импорта на Weblium это будет 1 цельное изображение:
Импорт элемента “Кнопка”
Если ваш блок содержит кнопки, вы можете назвать группу этой кнопки в Figma словом button (без других символов в названии) и аналогично другим элементам вынести эту кнопку на уровень фрейма в Figma — таким образом в Weblium будет создан именно элемент "Кнопка" на этом месте. При этом расположенный внутри такой группы текст будет установлен в качестве текста кнопки на Weblium, а стили кнопки (форма, цвет и т.д.) будут указаны в соответствии с глобальными настройками кнопок вашего сайта.
Примечение: необходимым условием для импорта кнопки является и слово “button” в качестве названия группы, которая будет превращена в кнопку, и наличие текстового элемента внутри этой группы.
Если не назвать необходимый элемент словом “button” в Figma, такая кнопка и её текст будут загружены в качестве обычного изображения.
После импорта блока по умолчанию кнопка будет добавлена среднего размера и с Primary стилем.
Общие примечания и подсказки
Рекомендуем перед импортом настроить стили вашего сайта (цветовую палитру и шрифты), чтобы в дальнейшем при необходимости вы могли изменять сразу все стили вашего сайта в несколько кликов. Детальнее об этом в следующем разделе инструкции.
По состоянию на сегодня указанные в Figma стили элементов (тени, скругления углов, обводка, маски и т.д.) импортируются в качестве изображения, без применения таких стилей в настройках элемента в редакторе Weblium. То есть, например, если у вас в Figma есть элемент с закругленными углами и тенью, то Weblium будет импортировать прямоугольное изображение, где закругленные углы и тень будут частью изображения без возможности их дальнейшего редактирования.
Если во фрейм добавлена группа, внутри которой текст вместе с другими элементами, то этот текст будет импортирован в качестве изображения (не как напечатанный текст). Аналогично если использовать текст в качестве маски поверх изображения, то он будет импортирован как обычное изображение.
Если в группе есть только текстовые элементы и/или кнопки, то они будут импортированы корректно как текстовые элементы — то есть можно группировать текстовые элементы и кнопки между собой, если кроме них в группе не будет ничего другого. Другими словами, группа в Figma, в которой только текстовые элементы и кнопки, расгрупировывается автоматически.
Если вы импортируете фрейм в Flex block, в котором уже есть контент, то новые элементы будут размещены поверх уже имеющихся. При этом фон блока будет изменен на новый (тот, что у фрейма в Фигме).
После успешного импорта и завершения всех редактирований блока, не забудьте адаптировать импортированный блок для отображения на мобильной и планшетной версии сайта. Для этого перейдите в редактор сайта соответствующего устройства (сверху по центру в редакторе Weblium) и разместите там элементы необходимым для вас образом.
Использование сетки для размещения элементов
Чтобы облегчить размещение элементов в Figma в пределах центральных 1170 px, вы можете добавить в фрейм сетку с колонками, которые имеют общую ширину 1170 px и выровнены по центру. Самым простым вариантом является добавление 1 колонки шириной 1170 px, однако мы рекомендуем добавить 8 колонок с такими параметрами, которые используются в обычных блоках Weblium — таким образом вы сможете размещать элементы в макете так, чтобы они имели такую же ширину, как в других блоках (не Flex block) на вашем сайте. Для этого:
① Выделите ваш макет и в правом боковом меню нажмите на плюсик в разделе Layout grid;
② Откройте Layout grid settings (настройка сетки);
③ Выберите в выпадающем списке Columns вместо "Grid" для отображения колонок;
④ Укажите для них настройки в соответствии со скриншотом ниже, а именно Count (количество колонок) — 8, Type — Center (для выравнивания колонок по центру), Width (ширина) — 120 px и Gutter (промежуток между колонками) — 30 px.
Таким образом, сумма колонок и промежутков между ними равна 1170 px, что поможет вам размещать элементы в пределах этой ширины, а также при необходимости указывать ширину элементов такой, чтобы они были в пределах определённого количества колонок. Например, на скриншоте тексты слева размещены в пределах 4 колонок — если ниже или выше этого блока в редакторе Weblium будет добавлен обычный блок (не Flex block), в нём элементы будут размещены по той же сетке, что будет сохранять консистентность дизайна.
Подсказка: вы можете сохранить эту сетку в стилях (Styles) вашего макета, чтобы затем добавлять её в другие фреймы в несколько кликов. Для этого после добавления сетки нажмите 4 точки справа от "Layout grid", в новом окошке "Grid styles" нажмите плюсик, введите произвольное название для этого стиля и нажмите на "Create style". После этого в новом фрейме вы сможете добавлять эту сетку в 1 клик, нажав на 4 точки справа от "Layout grid" и выбрав эту сетку.
Настройка стилей сайта в соответствии с макетом
Если вы создаете новый сайт, то для наилучшего результата перед последовательным импортом блоков можно настроить шрифты и цветовую палитру сайта в редакторе Weblium таким образом, чтобы они соответствовали макету в Figma.
Подсказка: действия из этого раздела не являются обязательными, но они улучшат будущий результат, а именно позволят в дальнейшем в редакторе изменять цвета и настройки шрифта одновременно для многих элементов. То есть настройки элементов Figma в бóльшей степени будут согласованы с настройками стиля сайта на Weblium.
В левом верхнем углу откройте Стили сайта (①), нажмите на кнопку Редактировать под вашей текущей палитрой сайта (②), далее нажмите поочередно на разноцветные квадратики (③) и укажите в соответствующем поле (④) HEX-код основных цветов, используемых в вашем макете. Таким образом, например, если после импорта определенные тексты будут иметь один из цветов, указанных в этих настройках, то вы сможете в будущем изменять этот цвет сразу для всех текстов в палитре сайта:
Подсказка: вы можете узнать подробнее о настройке цветовой палитры сайта в этой инструкции.
Также в Стилях сайта перейдите на вкладку Шрифты (①), нажмите на кнопку Редактировать под текущими шрифтами сайта (②). После чего последовательно открывайте разные типы шрифта (“Hero title”, “Block title” … “Text” и т.д. ③) и задайте для них те настройки шрифтов, которые используются в вашем макете (в первую очередь размер шрифта и само название шрифта, такие как Lato, Montserrat и т.д.).
Таким образом, если определенные тексты с макета совпадают по размеру с определенным типом шрифта на вашем сайте, импортируемые тексты будут иметь именно тот шрифт, который вы указали. Кроме того, вы затем сможете изменять стиль для всех текстов определенного типа одновременно в настройках стиля сайта:
Подсказка: больше информации о настройке шрифтов сайта вы можете найти в этой инструкции.
Также как до, так и после импорта вы можете настроить глобально стиль кнопок вашего сайта таким образом, чтобы он был приближен к макету. Если определенный элемент во фрейме имеет название button, то после импорта его будет добавлено в качестве кнопки и вы сможете указать для него один из стилей кнопок вашего сайта.
Возможные ошибки и их решения
Ниже в таблицах приведены ошибки, которые могут отображаться в редакторе Weblium. В левой колонке можно увидеть текст ошибки, возникающий в редакторе; в центральной колонке — где эта ошибка может быть отображена, а в правой колонке – комментарии, которые помогут вам с исправлением этих ошибок.
Ошибки, с которыми импорт невозможен
В этой таблице указаны ошибки, после которых импорт нельзя продолжить до устранения описанных неполадок:
| Текст ошибки | Где возникает | Как исправить |
|---|---|---|
| Это поле обязательно для заполнения | Под полями в меню перед импортом | Заполните необходимые поля в соответствии с инструкцией — вставьте ссылку на фрейм и токен с Figma |
| Некорректная ссылка на фрейм | Под полем "Укажите ссылку на фрейм" | Проверьте, правильно ли вы скопировали ссылку на фрейм в Figma — необходимо выделить именно 1 фрейм и скопировать ссылку на него в соответствии с инструкцией выше. |
| Необходима ссылка на конкретный фрейм | Под полем "Укажите ссылку на фрейм" | В поле добавлена ссылка на общий файл с Figma, а не на конкретный фрейм. Необходимо выделить определенный фрейм в Figma и скопировать ссылку именно на него. |
| Высота вашего фрейма превышает 3000 пикселей. Пожалуйста, уменьшите его или разделите на отдельные фреймы. | В модальном окне после нажатия на кнопку "Импорт" | Вам необходимо уменьшить высоту импортируемого фрейма, чтобы она была меньше 3000 пикселей. Как проверить высоту фрейма можно увидеть на скриншоте в этом разделе (высота обозначена цифрой ①). Если после уменьшения высоты фрейма не удаётся вместить в него все элементы, вы можете создать новый фрейм и переместить часть элементов из первого фрейма в новый — таким образом разделить фрейм на несколько и импортировать каждый из них отдельно в разные Flex блоки. |
| Выбранный элемент должен быть фреймом или группой. Пожалуйста, выберите элемент правильного типа в файле Figma. | В модальном окне | При импорте вы указали ссылку не на группу (group) или фрейм (frame), а на элемент другого типа. Скопируйте в Figma ссылку именно на фрейм (рекомендуется) или группу. При необходимости скорректируйте макет таким образом, чтобы блок, который необходимо импортировать, был либо фреймом, либо группой. |
| Фрейм скрыт в Figma. Пожалуйста, сделайте его видимым и повторите попытку. | В модальном окне | Чтобы сделать фрейм видимым в Figma, наведите на него в левом боковом меню и нажмите на иконку закрытого глаза, чтобы он стал открытым (также после этого название фрейма станет чёрного цвета). Вы можете увидеть эту иконку на скриншоте в этом разделе (обозначена цифрой ②). |
| Выбранный элемент не существует в файле Figma. Пожалуйста, проверьте правильность ссылки на фрейм и повторите попытку. | В модальном окне | Эта ошибка может возникнуть, если вы скопировали ссылку на элемент (фрейм), а затем его удалили из макета в Figma. Попробуйте скопировать ссылку на фрейм повторно и импортировать его ещё раз. |
| Ссылка на фрейм некорректна или файл не существует в Figma. Пожалуйста, проверьте правильность ссылки и повторите попытку. | В модальном окне | Ссылка на файл в Figma некорректна. Возможно, после копирования ссылки файл в Figma был удален или ссылка была скопирована некорректно. Попробуйте повторно скопировать ссылку на фрейм и выполнить импорт. |
| Произошла ошибка при импорте на стороне сервера Figma. Пожалуйста, попробуйте ещё раз. | В модальном окне | На стороне Figma возникла ошибка на сервере при импорте, которая не связана с Weblium. Пожалуйста, попробуйте повторно осуществить импорт в соответствии с инструкциями выше. |
| Токен некорректен или срок его действия истёк. Пожалуйста, проверьте правильность токена и повторите попытку. | В модальном окне | Попробуйте в соответствии с первым разделом инструкции сгенерировать новый токен в Figma, добавить его в ваш Flex block и повторить импорт. |
Ошибки, с которыми продолжается частичный импорт
После приведенных ниже ошибок импорт продолжается, но некоторые элементы не будут импортированы:
| Текст ошибки | Где возникает | Как исправить |
|---|---|---|
| Возникла ошибка при импорте "Название элемента" из-за ограничений Figma (слишком много изображений) | В редакторе над каждым элементом, который не удалось импортировать и вместо которого было добавлено пустое изображение | Figma имеет свои ограничения (rate limit) на количество элементов (изображений и т.п.), которые можно выгружать за определенный промежуток времени. Поэтому, если в вашем 1 импортированном фрейме много изображений (ориентировочно более 60), то некоторые изображения могут не импортироваться (обычно такое происходит лишь с несколькими изображениями, когда более 60 элементов в блоке). Неимпортируемые элементы будут добавлены в качестве пустых изображений, поэтому рекомендуем выгрузить эти необходимые фото из Figma на ваше устройство и добавить их вручную. Или можно уменьшить количество изображений или разделить фрейм на несколько меньших, чтобы импортировать их отдельно. |
| Возникла ошибка при импорте "Название элемента" из Figma | В редакторе над каждым элементом, который не удалось импортировать и вместо которого было добавлено пустое изображение | При импорте этих элементов возникла неопределённая ошибка (она может быть как со стороны Figma, так и с нашей стороны). Неимпортируемые элементы будут добавлены в качестве пустых изображений, поэтому рекомендуем выгрузить эти необходимые фото из Figma на ваше устройство и добавить их вручную в редакторе Weblium. |
Последнее изменение: 10/03/2025
Спасибо!