Nhập một khung Figma vào WordPress bằng Page Builder Sandwich

Page Builder Sandwich Pro chuyển đổi một khung Figma thành một trang WordPress có thể chỉnh sửa. Trang web giao tiếp với Figma bằng chính tài khoản Figma của quý vị, sử dụng mã thông báo truy cập cá nhân do quý vị tạo; không có thiết kế hoặc mã thông báo nào đi qua Zinn Digital®.

Kết nối Figma (một lần, với tư cách quản trị viên)

1. Trong Figma, mở Settings → Security → Personal access tokens và tạo một mã thông báo với phạm vi File content: read.
2. Trong wp-admin, đi tới Page Builder Sandwich → Import from other builders and Figma → Import from Figma, dán mã thông báo và nhấn Connect Figma.

Mã thông báo được xác thực với Figma, được lưu trữ mã hóa, và không bao giờ hiển thị lại (chỉ hiển thị bốn ký tự cuối cùng). Disconnect sẽ xóa mã này. Trên giao diện dòng lệnh: echo <token> | wp pbs importers figma-token set (mã thông báo được đọc từ đầu vào chuẩn, vì vậy nó không được lưu trong lịch sử shell của quý vị).

Nhập một khung

1. Trong Figma, nhấp vào một khung, nhấp chuột phải và chọn Copy/Paste as → Copy link to selection.
2. Dán liên kết vào Figma frame link và nhấn Import the frame. Một trang bản nháp mới được tạo, đặt tên theo khung đó.

Cách thiết kế được chuyển đổi

• Auto layout trở thành các hàng và cột flex (và dạng lưới cho grid auto layout) với cùng khoảng cách, phần đệm và căn chỉnh; một khung được sắp xếp tự do sẽ xếp chồng theo thứ tự đọc, và báo cáo sẽ ghi chú khi các lớp chồng lên nhau.
• Một khung trang gồm các dải toàn chiều rộng trở thành một phần toàn chiều rộng cho mỗi dải.
• Văn bản giữ nguyên phông chữ, kích thước, độ đậm, chiều cao dòng, khoảng cách chữ, kiểu chữ hoa/thường, căn lề và màu sắc; văn bản lớn trở thành tiêu đề, các đoạn in đậm, in nghiêng và liên kết được giữ lại.
• Màu tô, đường viền, bán kính góc và bóng đổ được giữ nguyên, bao gồm cả dải màu chuyển sắc.
• Hình ảnh được sao chép vào thư viện phương tiện của quý vị, và hình minh họa vector (biểu tượng, hình minh họa) được Figma hiển thị và sao chép dưới dạng hình ảnh (tối đa 200 bản vẽ cho mỗi lần nhập). Nhập lại cùng một khung sẽ sử dụng lại các bản sao.
• Một khung nhỏ có màu tô, các góc bo tròn và một nhãn ngắn (hoặc một lớp có tên "button") trở thành một khối Nút.

Trên điện thoại, các hàng mục có chiều rộng cố định sẽ xếp thành một cột, vì khung Figma được vẽ ở một chiều rộng duy nhất.

Từ giao diện dòng lệnh: wp pbs importers figma <frame link>.