> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Импорт блока из Figma

Импорт блока позволяет быстро перенести блок с элементами из макета в сервисе Figma сразу в редактор вашего сайта. Это удобно, когда вы или другой дизайнер подготовили у Figma макет будущего сайта, который необходимо создать на Weblium.

Вам достаточно 1 раз подключить интеграцию, после чего вы можете последовательно добавлять пустые [Flex block](https://help.weblium.com/ru/article/dobavlenie-flex-block-dlya-proizvolnogo-raspolozheniya-elementov-3jo99o/) в редакторе и импортировать фрейм (frame) из Figma – изображения, текст, фон блока и т.д. будут автоматически перенесены на ваш сайт. Благодаря этому вы можете сэкономить очень много времени.

${youtube}[Импорт блока из Figma (видео на украинском языке, также можете открыть видео в статье на английском)](f8DtW2Fx4is)

**Содержание:**
* [Создание API-токена в Figma](#1-sozdanie-api-tokena-v-figma)
* [Импорт блока в Weblium](#1-import-bloka-v-weblium)
* [Требования к макету](#1-trebovaniya-k-maketu)
* [Рекомендации и подсказки](#1-rekomendacii-i-podskazki)
* [Настройка стилей сайта в соответствии с макетом (необязательно)](#1-nastrojka-stilej-sajta-v-sootvetstvii-s-maketom)
* [Возможные ошибки и их решения](#1-vozmozhnye-oshibki-i-ih-resheniya)

| ${color}[#1aa900](Подсказка:) пример блока в Figma можно найти [по этой ссылке](https://www.figma.com/community/file/1363170759308348783). Вы можете импортировать этот блок, чтобы опробовать функцию, или использовать его как образец при создании дизайна в Figma.

# Создание API-токена в Figma

Необходимо 1 раз создать API-токен в Figma, который будет использован при импорте блока — после первого импорта блока на Weblium этот токен будет автоматически подставляться при дальнейших импортах на Weblium на всех ваших сайтах в текущем аккаунте.

1. Редактируя файл в Figma, откройте главное меню в левом верхнем углу, разверните подменю **Help and account** (Помощь и аккаунт) и выберите **Account settings** (Настройки аккаунта):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-1_1wmzgww.png)
| ${color}[#1aa900](Подсказка:) если вы находитесь не в открытом файле, а на главной странице Figma, необходимо нажать на имя вашего профиля в левом верхнем углу и выбрать пункт “Settings”.

2. Во вкладке **Security** найдите секцию **Personal access tokens** и нажмите на кнопку **Generate new token** (сгенерировать новый токен):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/import-bloku-z-figma-2_24gcao.png)
3. Укажите желаемое название для вашего токена (①), в выпадающем списке **Expiration** (Срок действия) рекомендуем выбрать **90 days** (②) — таким образом генерировать новый API-токен нужно будет лишь раз в 90 дней. Так же, выберите **Read only** тип доступа для поля **File content** (③). После этого нажмите кнопку **Generate token** (Сгенерировать токен, ④):
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/figmatokenrules_1f386ll.png)
4. Скопируйте ваш токен с помощью кнопки **Copy this token**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-4_1mdtzft.png)
|| ${color}[#ffa800](Примечание:) токен доступен для копирования в Figma только ограниченное время после его генерации — если токен был утерян, вы можете сгенерировать новый.

5. Перейдите в редактор сайта на Weblium и [создайте пустой Flex block](https://help.weblium.com/ru/article/dobavlenie-flex-block-dlya-proizvolnogo-raspolozheniya-elementov-3jo99o/) в том месте, куда необходимо импортировать блок (фрейм) из Figma.

6. Нажмите на 3 точки в правом верхнем углу Flex блока, выберите **Импорт из Figma** и вставьте ранее скопированный токен в поле **Укажите API-токен**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-3_1rxiaw.png)
| ${color}[#1aa900](Подсказка:) если вы ранее импортировали блоки из вашего текущего аккаунта в Figma в текущий Weblium-аккаунт, необходимый токен будет подставлен автоматически.

# Импорт блока в Weblium

1. Откройте ваш макет в Фигма, выделите именно тот **фрейм (frame)**, который вам необходимо импортировать и скопируйте ссылку на него. Если вы используете браузерную версию Figma, можете просто скопировать URL (ссылку) из адресной строки:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-0_11efbq4.png)
| ${color}[#1aa900](Подсказка:) отдельные тексты и изображения (группы изображений) должны быть на уровне фрейма (сразу в нём) — таким образом, каждое изображение/текст будет отдельным элементом после импорта. Вы можете увидеть пример структуры на скриншоте выше слева. Более детально о рекомендациях можно узнать [в соответствующем разделе](#3-struktura).

…если вы используете установленное на вашем компьютере приложение Figma, нажмите правой клавишей мыши на необходимый фрейм, выберите **Copy/Paste as** и кликните **Copy link to selection** (скопировать ссылку на выбранное):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-00_7ccz1d.png)
| ${color}[#1aa900](Подсказка:) как альтернативный вариант, чтобы скопировать ссылку, вы можете просто выделить необходимый фрейм и нажать комбинацию клавиш `Ctrl+L`.

2. Вернитесь в редактор Weblium, вставьте ранее скопированную ссылку в поле **Укажите ссылку на фрейм** и нажмите кнопку **Импорт**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-4_9f229k.png)
3. Готово! Блок был импортирован на ваш сайт:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-5_8a50mi.png)
||| ${color}[#f97700](Важно:) при импорте из Figma определенные элементы могут не быть перенесены на Weblium — с помощью импорта вы можете создать заготовку блоков, местами требующих дополнительных редактирований (добавление элементов, не распознанных во время импорта и т.п.).
|| ${color}[#ffa800](Примечание:) на данный момент можно переносить блоки по одному за раз (не весь сайт сразу).

# Требования к макету

1. Фрейм (импортированный блок) должен быть высотой **не менее 65 px** и **не более 3000 px** — если ваш фрейм имеет бóльшую высоту, его необходимо разделить на отдельные фреймы;
2. Импортируемый блок в Figma должен быть либо фреймом (рекомендуется), либо группой элементов. При этом важно учесть, что 1 фрейм соответствует 1 блоку после импорта на Weblium;
3. Фрейм не должен быть скрыт в Figma:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-8_ohrdml.png)
|| ${color}[#ffa800](Примечание:) если в тексте в Figma есть определенное дополнительное оформление, которое недоступно на нашей платформе (обводка текста, маска и т.д.), то такой текст будет импортирован как изображение. Поэтому рекомендуется импортировать текст в качестве обычного текста без эффектов.
| ${color}[#1aa900](Подсказка:) повторно отметим, что [по этой ссылке](https://www.figma.com/community/file/1363170759308348783) вы можете найти пример блока в Figma. Вы можете импортировать этот блок, чтобы протестировать функцию, или использовать его в качестве примера при создании макета в Figma.

# Рекомендации и подсказки

### Размер фрейма
Рекомендуемой шириной фрейма является 1600 px с контентом, расположенным посередине фрейма в пределах ширины 1170 px (именно такова ширина рабочей области Flex блока). Другими словами, во фрейме с шириной 1600 пикселей рекомендуем сделать боковые отступы по 215 px с обеих сторон, чтобы все элементы были посередине в пределах 1170 px.

||| ${color}[#f97700](Важно:) максимально допустимой высотой фрейма является 3000 px. Фреймы с большей высотой должны быть разделены на отдельные фреймы перед импортом.
| ${color}[#1aa900](Подсказка:) вам может помочь оставаться в пределах 1170 px использование сетки (грида, grid) — подробнее о ней в [соответствующем разделе ниже](#6-ispolzovanie-setki-dlya-razmesheniya-elementov).

### Структура
При импорте блока на Weblium отдельно загружается каждый элемент, который находится непосредственно внутри фрейма в Figma. То есть структура фрейма должна быть следующей: `Frame → группы, кнопки, текст, изображения и другие элементы`.

При этом каждая **группа элементов** (Group) будет распознана как 1 элемент — скажем, если внутри фрейма сгруппировано 3 изображения, то после импорта они будут как 1 единое изображение.
Поэтому, чтобы после импорта элементы в блоке были так же отдельными элементами в редакторе Weblium, нужно в макете все необходимые элементы или группы вынести на уровень фрейма. Другими словами, сделать так, чтобы каждое отдельное изображение (или группа, состоящая из нескольких небольших изображений), текст и т.п. в боковом меню Figma были сразу внутри фрейма.

К примеру, если у вас во фрейме 2 или более крупных сгруппированных изображений, рекомендуем их расгруппировать (Ungroup — комбинация клавиш `Ctrl+⌫`), чтобы непосредственно внутри фрейма они были как отдельные элементы. Таким образом, после импорта в Weblium они также будут отдельными и вы сможете их независимо перемещать и редактировать.

| ${color}[#1aa900](Ключевое:) если вы хотите редактировать на Weblium какой-либо элемент, находящийся в Figma внутри группы, вынесите этот элемент из группы на уровень фрейма.

**Пример:**
1. Фрейм, который будет впоследствии импортирован на Weblium;
2. Сразу внутри фрейма каждое изображение добавлено **отдельно** — на скриншоте 1 отдельное изображение выделено в качестве примера. То есть эти изображения не сгруппированы между собой, они являются отдельными объектами в пределах фрейма;
3. Также каждый текст является отдельным элементом в пределах фрейма. При необходимости тексты могут оставаться сгруппированными, при условии, что в группе будут только тексты:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-6_gcfhr4.png)
При этом если у вас 1 изображение состоит из совокупности различных небольших элементов, то вы можете оставить их в качестве 1 группы, которая будет импортирована в Weblium как 1 сплошное изображение. Ниже пример такой группы – прямоугольник с 4 небольшими иконками объединен в 1 группу (с названием `image 6`). Поэтому после импорта на Weblium это будет 1 цельное изображение:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-7_1oi914k.png)
### Импорт элемента “Кнопка”
Если ваш блок содержит кнопки, вы можете назвать группу этой кнопки в Figma словом `button` (без других символов в названии) и аналогично другим элементам вынести эту кнопку на уровень фрейма в Figma — таким образом в Weblium будет создан именно элемент "Кнопка" на этом месте. При этом расположенный внутри такой группы текст будет установлен в качестве текста кнопки на Weblium, а стили кнопки (форма, цвет и т.д.) будут указаны в соответствии с глобальными настройками кнопок вашего сайта.

|| ${color}[#ffa800](Примечение:) необходимым условием для импорта кнопки является и слово “button” в качестве названия группы, которая будет превращена в кнопку, и наличие текстового элемента внутри этой группы.

Если не назвать необходимый элемент словом “button” в Figma, такая кнопка и её текст будут загружены в качестве обычного изображения.

После импорта блока по умолчанию кнопка будет добавлена среднего размера и с Primary стилем.

### Общие примечания и подсказки
* Рекомендуем перед импортом настроить стили вашего сайта (цветовую палитру и шрифты), чтобы в дальнейшем при необходимости вы могли изменять сразу все стили вашего сайта в несколько кликов. Детальнее об этом в [следующем разделе инструкции](#1-nastrojka-stilej-sajta-v-sootvetstvii-s-maketom).
* По состоянию на сегодня указанные в 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.
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/figma-9_2wrj6z.png)
Таким образом, сумма колонок и промежутков между ними равна 1170 px, что поможет вам размещать элементы в пределах этой ширины, а также при необходимости указывать ширину элементов такой, чтобы они были в пределах определённого количества колонок. Например, на скриншоте тексты слева размещены в пределах 4 колонок — если ниже или выше этого блока в редакторе Weblium будет добавлен обычный блок (не Flex block), в нём элементы будут размещены по той же сетке, что будет сохранять консистентность дизайна.

| ${color}[#1aa900](Подсказка:) вы можете сохранить эту сетку в стилях (Styles) вашего макета, чтобы затем добавлять её в другие фреймы в несколько кликов. Для этого после добавления сетки нажмите 4 точки справа от "Layout grid", в новом окошке "Grid styles" нажмите плюсик, введите произвольное название для этого стиля и нажмите на "Create style". После этого в новом фрейме вы сможете добавлять эту сетку в 1 клик, нажав на 4 точки справа от "Layout grid" и выбрав эту сетку.

# Настройка стилей сайта в соответствии с макетом

Если вы создаете новый сайт, то для наилучшего результата перед последовательным импортом блоков можно настроить шрифты и цветовую палитру сайта в редакторе Weblium таким образом, чтобы они соответствовали макету в Figma.

| ${color}[#1aa900](Подсказка:) действия из этого раздела не являются обязательными, но они улучшат будущий результат, а именно позволят в дальнейшем в редакторе изменять цвета и настройки шрифта одновременно для многих элементов. То есть настройки элементов Figma в бóльшей степени будут согласованы с настройками стиля сайта на Weblium.

1. В левом верхнем углу откройте **Стили сайта** (①), нажмите на кнопку **Редактировать** под вашей текущей палитрой сайта (②), далее нажмите поочередно на разноцветные квадратики (③) и укажите в соответствующем поле (④) HEX-код основных цветов, используемых в вашем макете. Таким образом, например, если после импорта определенные тексты будут иметь один из цветов, указанных в этих настройках, то вы сможете в будущем изменять этот цвет сразу для всех текстов в палитре сайта:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-1_3e2ytg.png)
| ${color}[#1aa900](Подсказка:) вы можете узнать подробнее о [настройке цветовой палитры сайта в этой инструкции](https://help.weblium.com/ru/article/cvetovaya-palitra-sajta-1cveou3/).

2. Также в **Стилях сайта** перейдите на вкладку **Шрифты** (①), нажмите на кнопку **Редактировать** под текущими шрифтами сайта (②). После чего последовательно открывайте разные типы шрифта (“Hero title”, “Block title” … “Text” и т.д. ③) и задайте для них те настройки шрифтов, которые используются в вашем макете (в первую очередь **размер шрифта** и само название шрифта, такие как Lato, Montserrat и т.д.).
Таким образом, если определенные тексты с макета совпадают по размеру с определенным типом шрифта на вашем сайте, импортируемые тексты будут иметь именно тот шрифт, который вы указали. Кроме того, вы затем сможете изменять стиль для всех текстов определенного типа одновременно в настройках стиля сайта:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ru-2_15h6mgf.png)
| ${color}[#1aa900](Подсказка:) больше информации о [настройке шрифтов сайта вы можете найти в этой инструкции](https://help.weblium.com/ru/article/izmenenie-shrifta-na-sajte-1t1brog/).

3. Также как до, так и после импорта вы можете [настроить глобально стиль кнопок](https://help.weblium.com/ru/article/izmenenie-dizajna-knopki-1xt931r/) вашего сайта таким образом, чтобы он был приближен к макету. Если определенный элемент во фрейме имеет название `button`, то после импорта его будет добавлено в качестве кнопки и вы сможете указать для него один из стилей кнопок вашего сайта.

# Возможные ошибки и их решения

Ниже в таблицах приведены ошибки, которые могут отображаться в редакторе Weblium. В левой колонке можно увидеть текст ошибки, возникающий в редакторе; в центральной колонке — где эта ошибка может быть отображена, а в правой колонке – комментарии, которые помогут вам с исправлением этих ошибок.

### Ошибки, с которыми импорт невозможен
В этой таблице указаны ошибки, после которых импорт нельзя продолжить до устранения описанных неполадок:

| Текст ошибки | Где возникает | Как исправить |
| ---- |
| Это поле обязательно для заполнения | Под полями в меню перед импортом | Заполните необходимые поля в соответствии с инструкцией — вставьте ссылку на фрейм и токен с Figma |
| Некорректная ссылка на фрейм | Под полем "Укажите ссылку на фрейм" | Проверьте, правильно ли вы скопировали ссылку на фрейм в Figma — необходимо выделить именно 1 фрейм и скопировать ссылку на него в соответствии с инструкцией выше. |
| Необходима ссылка на конкретный фрейм | Под полем "Укажите ссылку на фрейм" | В поле добавлена ссылка на общий файл с Figma, а не на конкретный фрейм. Необходимо выделить определенный фрейм в Figma и скопировать ссылку именно на него. |
| Высота вашего фрейма превышает 3000 пикселей. Пожалуйста, уменьшите его или разделите на отдельные фреймы. | В модальном окне после нажатия на кнопку "Импорт" | Вам необходимо уменьшить высоту импортируемого фрейма, чтобы она была меньше 3000 пикселей. Как проверить высоту фрейма можно увидеть на скриншоте в [этом разделе](#1-trebovaniya-k-maketu) (высота обозначена цифрой ①). Если после уменьшения высоты фрейма не удаётся вместить в него все элементы, вы можете создать новый фрейм и переместить часть элементов из первого фрейма в новый — таким образом разделить фрейм на несколько и импортировать каждый из них отдельно в разные Flex блоки. |
| Выбранный элемент должен быть фреймом или группой. Пожалуйста, выберите элемент правильного типа в файле Figma. | В модальном окне | При импорте вы указали ссылку не на группу (group) или фрейм (frame), а на элемент другого типа. Скопируйте в Figma ссылку именно на фрейм (рекомендуется) или группу. При необходимости скорректируйте макет таким образом, чтобы блок, который необходимо импортировать, был либо фреймом, либо группой. |
| Фрейм скрыт в Figma. Пожалуйста, сделайте его видимым и повторите попытку. | В модальном окне | Чтобы сделать фрейм видимым в Figma, наведите на него в левом боковом меню и нажмите на иконку закрытого глаза, чтобы он стал открытым (также после этого название фрейма станет чёрного цвета). Вы можете увидеть эту иконку на скриншоте в [этом разделе](#1-trebovaniya-k-maketu) (обозначена цифрой ②). |
| Выбранный элемент не существует в файле Figma. Пожалуйста, проверьте правильность ссылки на фрейм и повторите попытку. | В модальном окне | Эта ошибка может возникнуть, если вы скопировали ссылку на элемент (фрейм), а затем его удалили из макета в Figma. Попробуйте скопировать ссылку на фрейм повторно и импортировать его ещё раз. |
| Ссылка на фрейм некорректна или файл не существует в Figma. Пожалуйста, проверьте правильность ссылки и повторите попытку. | В модальном окне | Ссылка на файл в Figma некорректна. Возможно, после копирования ссылки файл в Figma был удален или ссылка была скопирована некорректно. Попробуйте повторно скопировать ссылку на фрейм и выполнить импорт. |
| Произошла ошибка при импорте на стороне сервера Figma. Пожалуйста, попробуйте ещё раз. | В модальном окне | На стороне Figma возникла ошибка на сервере при импорте, которая не связана с Weblium. Пожалуйста, попробуйте повторно осуществить импорт в соответствии с инструкциями выше. |
| Токен некорректен или срок его действия истёк. Пожалуйста, проверьте правильность токена и повторите попытку. | В модальном окне | Попробуйте в соответствии с [первым разделом инструкции](#1-sozdanie-api-tokena-v-figma) сгенерировать новый токен в Figma, добавить его в ваш Flex block и повторить импорт. |

### Ошибки, с которыми продолжается частичный импорт
После приведенных ниже ошибок импорт продолжается, но некоторые элементы не будут импортированы:
| Текст ошибки | Где возникает | Как исправить |
| ---- |
| Возникла ошибка при импорте `"Название элемента"` из-за ограничений Figma (слишком много изображений) | В редакторе над каждым элементом, который не удалось импортировать и вместо которого было добавлено пустое изображение | Figma имеет свои ограничения (rate limit) на количество элементов (изображений и т.п.), которые можно выгружать за определенный промежуток времени. Поэтому, если в вашем 1 импортированном фрейме много изображений (ориентировочно более 60), то некоторые изображения могут не импортироваться (обычно такое происходит лишь с несколькими изображениями, когда более 60 элементов в блоке). Неимпортируемые элементы будут добавлены в качестве пустых изображений, поэтому рекомендуем выгрузить эти необходимые фото из Figma на ваше устройство и добавить их вручную. Или можно уменьшить количество изображений или разделить фрейм на несколько меньших, чтобы импортировать их отдельно. |
| Возникла ошибка при импорте `"Название элемента"` из Figma | В редакторе над каждым элементом, который не удалось импортировать и вместо которого было добавлено пустое изображение | При импорте этих элементов возникла неопределённая ошибка (она может быть как со стороны Figma, так и с нашей стороны). Неимпортируемые элементы будут добавлены в качестве пустых изображений, поэтому рекомендуем выгрузить эти необходимые фото из Figma на ваше устройство и добавить их вручную в редакторе Weblium. |