Импортирайте рамка от Figma в WordPress с Page Builder Sandwich

Page Builder Sandwich Pro превръща рамка от Figma в редактируема страница на WordPress. Сайтът комуникира с Figma чрез Вашия собствен профил във Figma, използвайки личен маркер за достъп (personal access token), който Вие създавате; никакъв дизайн или маркер не преминава през 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>.