Імпорт блоку з Figma
Імпортування блоку дозволяє швидко перенести блок з елементами з макету у сервісі Figma одразу до редактора вашого сайту. Це зручно, коли ви або інший дизайнер підготували у Figma макет майбутнього сайту, який необхідно створити на Weblium.
Вам достатньо 1 раз підключити інтеграцію, після чого ви можете послідовно додавати порожні Flex block у редакторі та імпортувати фрейм (frame) з Figma — зображення, текст, фон блоку тощо будуть автоматично перенесені на ваш сайт. Завдяки цьому ви можете зекономити дуже багато часу.
Зміст:
Створення АРІ-токена у Figma
Імпорт блоку до Weblium
Вимоги до макету
Рекомендації та підказки
Налаштування стилів сайту відповідно до макету (необов’язково)
Можливі помилки та їхнє вирішення
Підказка: приклад блоку у Figma можна знайти за цим посиланням. Ви можете імпортувати цей блок, щоб випробувати функцію, або використати його як взірець під час створення дизайну у Figma.
Необхідно 1 раз створити АРІ-токен у Figma, який буде використано під час імпорту блоку — після першого імпорту блоку на Weblium цей токен буде автоматично підставлятися під час подальших імпортів на Weblium на усіх ваших сайтах в межах поточного акаунту.
Редагуючи файл у Figma, відкрийте головне меню в лівому верхньому куті, розгорніть підменю Help and account (Допомога та акаунт) та оберіть Account settings (Налаштування акаунту):
Підказка: якщо ви знаходитеся не у відкритому файлі, а на головній сторінці Figma, то необхідно натиснути на ім’я вашого профіля у лівому верхньому куті та обрати пункт “Settings”.
Прогорніть налаштування дещо нижче та у розділі Personal access tokens натисніть на кнопку Generate new token (згенерувати новий токен):
Вкажіть довільну назву для вашого токена (①), у випадному списку Expiration (Термін дії) рекомендуємо обрати No expiration (②) — таким чином цей АРІ-токен працюватиме без часових обмежень. Після цього натисніть кнопку 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. За допомогою імпорту ви можете створити заготовку блоків, які подекуди потребуватимуть додаткових редагувань (додавання елементів, котрі не були розпізнані під час імпорту, тощо).
Примітка: станом на зараз можна переносити блоки по одному за раз (не увесь сайт одразу).
Підказка: повторно зазначимо, що за цим посиланням ви можете знайти приклад блоку у Figma. Ви можете імпортувати цей блок, щоб протестувати функцію, або ж використати його у якості прикладу під час створення макету у Figma.
Фрейм (імпортований блок) має бути висотою не менше 65 px та не більше 3000 px — якщо ваш фрейм має більшу висоту, його необхідно розділити на окремі фрейми;
Імпортований блок у Figma має бути або фреймом (рекомендовано), або групою елементів. Водночас важливо врахувати, що 1 фрейм відповідає 1 блоку після імпорту на Weblium;
Фрейм не має бути прихованим у 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 — зображення, текст, фон блоку тощо будуть автоматично перенесені на ваш сайт. Завдяки цьому ви можете зекономити дуже багато часу.
Зміст:
Створення АРІ-токена у Figma
Імпорт блоку до Weblium
Вимоги до макету
Рекомендації та підказки
Налаштування стилів сайту відповідно до макету (необов’язково)
Можливі помилки та їхнє вирішення
Підказка: приклад блоку у Figma можна знайти за цим посиланням. Ви можете імпортувати цей блок, щоб випробувати функцію, або використати його як взірець під час створення дизайну у Figma.
Створення АРІ-токена у Figma
Необхідно 1 раз створити АРІ-токен у Figma, який буде використано під час імпорту блоку — після першого імпорту блоку на Weblium цей токен буде автоматично підставлятися під час подальших імпортів на Weblium на усіх ваших сайтах в межах поточного акаунту.
Редагуючи файл у Figma, відкрийте головне меню в лівому верхньому куті, розгорніть підменю Help and account (Допомога та акаунт) та оберіть Account settings (Налаштування акаунту):
Підказка: якщо ви знаходитеся не у відкритому файлі, а на головній сторінці Figma, то необхідно натиснути на ім’я вашого профіля у лівому верхньому куті та обрати пункт “Settings”.
Прогорніть налаштування дещо нижче та у розділі Personal access tokens натисніть на кнопку Generate new token (згенерувати новий токен):
Вкажіть довільну назву для вашого токена (①), у випадному списку Expiration (Термін дії) рекомендуємо обрати No expiration (②) — таким чином цей АРІ-токен працюватиме без часових обмежень. Після цього натисніть кнопку 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. За допомогою імпорту ви можете створити заготовку блоків, які подекуди потребуватимуть додаткових редагувань (додавання елементів, котрі не були розпізнані під час імпорту, тощо).
Примітка: станом на зараз можна переносити блоки по одному за раз (не увесь сайт одразу).
Підказка: повторно зазначимо, що за цим посиланням ви можете знайти приклад блоку у Figma. Ви можете імпортувати цей блок, щоб протестувати функцію, або ж використати його у якості прикладу під час створення макету у Figma.
Вимоги до макету
Фрейм (імпортований блок) має бути висотою не менше 65 px та не більше 3000 px — якщо ваш фрейм має більшу висоту, його необхідно розділити на окремі фрейми;
Імпортований блок у Figma має бути або фреймом (рекомендовано), або групою елементів. Водночас важливо врахувати, що 1 фрейм відповідає 1 блоку після імпорту на Weblium;
Фрейм не має бути прихованим у 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 та повторити імпорт. Під час створення токену рекомендуємо у випадному списку "Expiration" (Термін дії) обрати "No expiration", щоб цей токен працював без часових обмежень. |
Помилки, з якими продовжується частковий імпорт
Після наведених нижче помилок імпорт продовжується, але певні елементи не будуть імпортовані:
| Текст помилки | Де виникає | Як виправити |
|---|---|---|
| Виникла помилка під час імпорту "Назва елементу" через обмеження Figma (забагато зображень) | У редакторі над кожним елементом, який не вийшло імпортувати і замість якого було додано порожнє зображення | Figma має власні обмеження (rate limit) на кількість елементів (зображень тощо), які можна вивантажувати за певний проміжок часу. Тому, якщо у вашому 1 імпортованому фреймі забагато зображень (орієнтовно понад 60), то певні зображення можуть не імпортуватися (зазвичай таке відбувається лише з кількома зображеннями, коли понад 60 елементів у блоці). Неімпортовані елементи будуть додані як порожні зображення, тому рекомендуємо вивантажити ці необхідні фото з Figma на ваш пристрій та додати їх вручну в редакторі Weblium. Або ж ви можете зменшити кількість зображень або розділити фрейм на кілька менших, щоб імпортувати їх окремо. |
| Виникла помилка під час імпорту "Назва елементу" з Figma | У редакторі над кожним елементом, який не вийшло імпортувати і замість якого було додано порожнє зображення | Під час імпорту цих елементів виникла невизначена помилка (вона може бути як з боку Figma, так і з нашого боку). Неімпортовані елементи будуть додані як порожні зображення, тому рекомендуємо вивантажити ці необхідні зображення з Figma на ваш пристрій та додати їх вручну в редакторі Weblium. |
Оновлено: 08/05/2024
Дякуємо!