Page Builder Sandwich를 사용하여 Figma 프레임을 WordPress로 가져오기

Page Builder Sandwich Pro는 Figma 프레임을 편집 가능한 WordPress 페이지로 변환합니다. 사이트는 사용자가 생성한 개인 액세스 토큰을 사용하여 귀하의 Figma 계정으로 Figma와 통신하며, 어떠한 디자인이나 토큰도 Zinn Digital®을 거치지 않습니다.

Figma 연결 (관리자 권한으로 1회 진행)

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은 동일한 간격, 패딩 및 정렬을 유지하면서 플렉스 행과 열(그리드 오토 레이아웃의 경우 그리드)로 변환됩니다. 자유롭게 배치된 프레임은 읽기 순서대로 쌓이며, 레이어가 겹치는 경우 리포트에 해당 내용이 표시됩니다.
• 전체 너비 밴드로 구성된 페이지 프레임은 밴드당 하나의 전체 너비 섹션이 됩니다.
• Text는 글꼴, 크기, 굵기, 줄 높이, 자간, 대소문자, 정렬 및 색상을 유지합니다. 큰 텍스트는 제목이 되며 굵게, 기울임꼴 및 링크는 유지됩니다.
• 그레이디언트를 포함한 채우기, 획, 모서리 반경 및 드롭 섀도가 그대로 유지됩니다.
• 이미지는 미디어 라이브러리로 복사되며, 벡터 아트(아이콘, 일러스트레이션)는 Figma에서 렌더링되어 이미지로 복사됩니다(가져오기 1회당 최대 200개 도면). 동일한 프레임을 다시 가져오면 해당 사본을 재사용합니다.
• 채우기, 둥근 모서리 및 하나의 짧은 레이블(또는 이름이 "button"인 레이어)이 있는 작은 프레임은 Button 블록이 됩니다.

Figma 프레임은 단일 너비로 그려지므로, 스마트폰에서는 고정 너비 항목의 행이 하나의 열로 세로 정렬됩니다.

명령줄 실행: wp pbs importers figma <frame link>.