Імпортуйте фрейм Figma у WordPress за допомогою Page Builder Sandwich

Page Builder Sandwich Pro перетворює фрейм Figma на редаговану сторінку WordPress. Сайт взаємодіє з Figma за допомогою вашого власного облікового запису Figma, використовуючи створений вами персональний токен доступу; жоден дизайн чи токен не проходить через Zinn Digital®.

Підключіть Figma (одноразово, як адміністратор)

1. У Figma відкрийте Settings → Security → Personal access tokens і згенеруйте токен з областю дії File content: read.
2. У wp-admin перейдіть до Page Builder Sandwich → Import from other builders and Figma → Import from Figma, вставте токен і натисніть Connect Figma.

Токен перевіряється через Figma, зберігається зашифрованим і більше ніколи не відображається (лише його останні чотири символи). Кнопка Disconnect видаляє його. У командному рядку: echo <token> | wp pbs importers figma-token set (токен зчитується зі стандартного вводу, тому він не зберігається в історії вашої командної оболонки).

Імпорт фрейму

1. У Figma виберіть один фрейм, клацніть правою кнопкою миші та виберіть Copy/Paste as → Copy link to selection.
2. Вставте посилання в поле Figma frame link і натисніть Import the frame. Буде створено нову чернетку сторінки, названу на честь фрейму.

Як перетворюється дизайн

• Auto layout стає рядками та стовпчиками flex (а також сітками для grid auto layout) з однаковими відступами (gap, padding) та вирівнюванням; фрейм із довільним макетом розташовується в порядку читання, і звіт повідомить, якщо шари перекривалися.
• Фрейм сторінки, що складається зі смуг повної ширини, стає однією секцією повної ширини на кожну смугу.
• Текст зберігає свій шрифт, розмір, насиченість, висоту рядка, міжлітерний інтервал, регістр, вирівнювання та колір; великий текст стає заголовками, а напівжирний і курсивний фрагменти та посилання зберігаються.
• Заливки, обведення, радіус кутів і тіні переносяться, включно з градієнтами.
• Зображення копіюються до вашої медіабібліотеки, а векторна графіка (значки, ілюстрації) рендериться Figma та копіюється як зображення (до 200 малюнків на один імпорт). Повторний імпорт того самого фрейму використовує ці копії повторно.
• Невеликий фрейм із заливкою, закругленими кутами та одним коротким написом (або шар з назвою «button») стає блоком Кнопка.

На телефоні рядки елементів фіксованої ширини складаються у стовпчик, оскільки фрейм Figma малюється за однієї фіксованої ширини.

З командного рядка: wp pbs importers figma <frame link>.