Импортируйте фрейм 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») преобразуется в блок Button.

На телефоне строки элементов фиксированной ширины выстраиваются в столбец, поскольку фрейм Figma отрисован с одной фиксированной шириной.

Из командной строки: wp pbs importers figma <frame link>.