การส่งออกโทเค็นระบบการออกแบบจาก Figma ไปยัง WordPress

หนึ่งในความท้าทายที่สำคัญของการใช้งานไซต์หรือชุดของไซต์ตามขนาดคือ การรับประกันความสอดคล้องของการออกแบบและการปฏิบัติตามระบบการออกแบบ บ่อยครั้งที่คำจำกัดความของระบบการออกแบบอยู่ใน Figma แต่นำมาใช้ด้วยตนเองในโค้ด หากมีการเปลี่ยนแปลงใดๆ กับระบบในระหว่างการพัฒนาหรือการแทนที่ขนาดใหญ่ในการแก้ไขใหม่ คำจำกัดความและการนำไปใช้งานจะไม่ซิงค์กัน

เพื่อแก้ปัญหานี้ เราได้สร้างเครื่องมือเพื่อให้ระบบการออกแบบใน Figma ซิงค์กับธีม WordPress เราใช้มันบนไซต์ของเราเอง wpvip.com และพบว่ามันช่วยลดความยุ่งยากในกระบวนการนี้อย่างมาก ในขณะเดียวกันก็รับประกันความสม่ำเสมอ

เป้าหมายของเราคือการมีแหล่งข้อมูลเดียวสำหรับระบบการออกแบบ ดังนั้นจึงไม่มีการตัดการเชื่อมต่อระหว่างการออกแบบและการนำไปใช้งาน ด้วยการใช้ปลั๊กอินโทเค็น Figma เราสร้างแหล่งความจริงแหล่งเดียวนี้ เก็บโทเค็นการออกแบบทั้งหมดของเราไว้ในระบบควบคุมเวอร์ชัน และอัปเดตระบบการออกแบบอัตโนมัติในโค้ดธีม

กระบวนการทำงานดังนี้:

1. ระบบการออกแบบถูกกำหนดไว้ในเอกสาร Figma
2. เราใช้ปลั๊กอินโทเค็น Figma เพื่อกำหนดโทเค็นการออกแบบที่ใช้ใน Figma
3. การใช้ที่เก็บข้อมูล GitHub ของ Figma Token เราส่งออกโทเค็นไปยังที่เก็บ
4. ด้วยเครื่องมือ vip-design-system-bridge เราแทรกโทเค็นการออกแบบลงใน WordPress ผ่านส่วนที่กำหนดเองของ theme.json
5. ในโค้ดและ CSS เราใช้คลาส –-wp–custom ที่สร้างขึ้นโดย WordPress เพื่ออ้างอิงโทเค็นการออกแบบ

สิ่งนี้ทำให้การเปลี่ยนแปลงระบบการออกแบบและการรีธีมเป็นเรื่องง่ายในการพุชโค้ด เมื่อทำการเปลี่ยนแปลงใน Figma การเปลี่ยนแปลงเหล่านั้นจะซิงค์กับโทเค็น Figma และเราจะเรียกใช้เครื่องมือ vip-design-system-bridge โทเค็นการออกแบบจะได้รับการอัปเดตในการกำหนดค่าธีมของเราโดยไม่ต้องทำการเปลี่ยนแปลงโค้ดหรือ CSS อื่นๆ

เราได้รวบรวมตัวอย่างระบบการออกแบบและธีมเพื่อสาธิตกระบวนการจาก Figma ไปสู่ ​​WordPress ในโพสต์นี้ เราจะกล่าวถึงขั้นตอนต่างๆ เพื่อ:

1. ทำสำเนาของระบบการออกแบบตัวอย่าง
2. ใช้ปลั๊กอินโทเค็น Figma เพื่อเพิ่มโทเค็นการออกแบบ
3. เปลี่ยนโทเค็นสีใน Figma และส่งออกโทเค็นการออกแบบใหม่
4. รันสำเนา WordPress ในเครื่องด้วยตัวจัดการสภาพแวดล้อมในเครื่องของ VIP เพื่อดูตัวอย่างธีม WordPress
5. ใช้เครื่องมือ vip-design-system-bridge เพื่ออัปเดตธีม WordPress ด้วยโทเค็นการออกแบบใหม่

แหล่งข้อมูลเหล่านี้ยังมีไว้เพื่อช่วยให้คุณเริ่มต้นได้:

• ระบบเอกสารการออกแบบที่เรียบง่ายใน Figma ตามเทมเพลต Material 3 Design Kit
• ชุดโทเค็นการออกแบบที่ใช้รวมกับโทเค็น Figma
• ตัวอย่างธีม WordPress ที่กำหนดค่าให้ใช้สีและรูปแบบตัวอักษรที่ระบบออกแบบให้มา

ตั้งค่าโทเค็น Figma

เราจะเริ่มต้นด้วยขั้นตอนการทำงานของนักออกแบบโดยใช้ระบบการออกแบบใน Figma และส่งออกโทเค็นการออกแบบ

หากต้องการติดตั้ง Figma Tokens ให้เข้าสู่ระบบ Figma และไปที่หน้าปลั๊กอิน Figma Tokens ที่มุมขวาบน คลิกปุ่ม "ทดลองใช้" ในหน้าถัดไป คลิกปุ่ม "เรียกใช้" เมื่อติดตั้งแล้ว ปลั๊กอินจะพร้อมใช้งานในเอกสาร Figma

1. รับสำเนาของระบบการออกแบบ

เราจะใช้ระบบการออกแบบขนาดเล็กใน Figma ตามเทมเพลต Material 3 Design Kit สำหรับตัวอย่างของเรา

1. เปิดตัวอย่างระบบการออกแบบ Figma เราจะทำสำเนาเอกสารนี้ในเครื่องเพื่อใช้กับปลั๊กอิน Figma Tokens

2. ที่ด้านขวาของชื่อเอกสาร คลิกลูกศรลงแล้วเลือก “ทำสำเนาเป็นร่างของคุณ”:

3. ในป๊อปอัปที่ด้านล่างของหน้า คลิกปุ่ม "เปิด":

2. เชื่อมต่อโทเค็น Figma กับโทเค็นการออกแบบ

เราได้สร้างชุดโทเค็นการออกแบบที่พร้อมจะนำเข้าสู่เอกสารระบบการออกแบบโดยใช้โทเค็น Figma โทเค็นการออกแบบเหล่านี้สร้างขึ้นโดยตรงใน Figma โดยใช้ปลั๊กอิน Figma Tokens ต่อไปนี้เป็นวิธีเชื่อมต่อปลั๊กอิน Figma Tokens กับโทเค็นการออกแบบที่มีอยู่:

1. เปิดเอกสาร Figma จากขั้นตอนก่อนหน้า ที่ด้านซ้ายบนของหน้า คลิกปุ่มเมนูหลักแล้วเลือกปลั๊กอิน -> โทเค็น Figma

2. หลังจากเปิดตัวโทเค็น Figma ให้เลือกปุ่ม “เริ่มต้นใช้งาน” คุณควรเห็นชุดโทเค็นว่างในหน้าถัดไป:

3. ที่ด้านบนของปลั๊กอิน คลิกแท็บ "การตั้งค่า" ในส่วน “ที่เก็บโทเค็น” ให้คลิกปุ่ม “URL”:

คลิกปุ่ม "เพิ่มข้อมูลรับรองใหม่" ในช่อง "ชื่อ" ให้ป้อนชื่อใดก็ได้ (เช่น โทเค็นตัวอย่าง) ในช่อง URL ให้ป้อน URL นี้:

 https://raw.githubusercontent.com/Automattic/vip-design-system-bridge/trunk/docs/design-tokens-example/tokens.json

4. ผลลัพธ์ควรมีลักษณะดังนี้:

5. ภายใต้ “Token Storage” คลิกปุ่ม “เอกสารในเครื่อง” ในป๊อปอัปการยืนยัน ให้คลิก “ใช่ ตั้งเป็นท้องถิ่น”

6. เนื่องจากข้อผิดพลาดเล็กน้อยในโทเค็น Figma จำเป็นต้องรีเฟรชหน้าเพื่อให้สามารถแก้ไขโทเค็นที่นำเข้าจาก URL ได้ โปรดทราบว่าในโทเค็นกระบวนการออกแบบจริงสามารถซิงค์ผ่านตัวเลือกที่เก็บโทเค็น GitHub ได้ ขั้นตอนนี้จำเป็นสำหรับตัวอย่างบทช่วยสอนนี้เท่านั้น

• หลังจากเปลี่ยนตัวเลือกการจัดเก็บโทเค็นเป็น “เอกสารในเครื่อง” ให้โหลดหน้าซ้ำ
• เปิดโทเค็น Figma อีกครั้งผ่านเมนูปลั๊กอิน

7. ในโทเค็น Figma ไปที่แท็บ "โทเค็น" เพื่อดูโทเค็นทั้งหมด ใช้ช่องทำเครื่องหมายทางด้านซ้าย เลือกชุดโทเค็น “ทั่วโลก” “วัสดุ-3 สี” และ “วัสดุ-3-ข้อความ” ตอนนี้คุณควรจะดูโทเค็นการออกแบบประเภทและสีในแผงหลักได้แล้ว:

ชุด "สากล" แสดงถึงชุดสีและตัวเลือกการพิมพ์ที่มีอยู่ในระบบการออกแบบ ชุด "วัสดุ-3 สี" ประกอบด้วยสีโทเค็นการออกแบบที่มีชื่อซึ่งใช้โดยระบบการออกแบบ เช่น "ธีม/แสง/สีหลัก" และ "ธีม/แสง/พื้นหลัง" “material-3-text” มีตัวเลือกการพิมพ์ที่ใช้โดยระบบการออกแบบ

หมายเหตุ: บทช่วยสอนนี้ใช้ที่เก็บโทเค็น URL เพื่อทำให้การตั้งค่าง่ายขึ้น ในเอกสารระบบการออกแบบจริง ควรใช้ระบบจัดเก็บโทเค็นเวอร์ชันเช่น “GitHub” หรือ “GitLab” แทน โทเค็นเหล่านี้อนุญาตให้ดึงและเผยแพร่โดยตรงไปยังที่เก็บจาก Figma

3. เปลี่ยนโทเค็นการออกแบบและส่งออก

ส่วนนี้จะครอบคลุมถึงการเปลี่ยนโทเค็นการออกแบบสำหรับพื้นหลังเป็นค่าใหม่ และการส่งออกไฟล์โทเค็นที่อัปเดตเพื่อใช้ในระบบการออกแบบ

1. ในโทเค็น Figma คลิกชุดสี “วัสดุ-3-สี” ถัดไป ในเอกสาร Figma ภายใต้ส่วน "Light Theme" เลือกบล็อก "พื้นหลัง" และดูว่ามีการเลือกโทเค็นการออกแบบที่ตรงกันในโทเค็น Figma:

2. ใน Figma Tokens ให้คลิกขวาที่โทเค็นสีพื้นหลังแล้วเลือก “Edit Token” เปลี่ยนค่าเป็น {color.error.70} (หรือโทเค็นจานสีอื่นที่คุณเลือก) แล้วคลิก "อัปเดต":

ดังที่แสดงไว้ด้านบน บล็อกสีพื้นหลังที่เลือกควรเปลี่ยนเพื่อให้ตรงกับโทเค็นสีใหม่

3. ที่ด้านล่างขวาของปลั๊กอิน Figma Tokens ให้คลิก "ส่งออก" ทำเครื่องหมายที่ “ชุดโทเค็นทั้งหมด” จากนั้นไปที่ด้านล่างของกล่องโต้ตอบแล้วคลิกปุ่ม “ส่งออก”

หมายเหตุ: เมื่อใช้ระบบจัดเก็บโทเค็นเวอร์ชันเช่น “GitHub” การเปลี่ยนแปลงโทเค็นสามารถพุชโดยตรงไปยังสาขาที่เก็บแทนการดาวน์โหลดผ่านเบราว์เซอร์

เครื่องมือติดตั้งสำหรับ WordPress

ในสองขั้นตอนถัดไป เราจะใช้โทเค็นการออกแบบที่ส่งออกจาก Figma เพื่ออัปเดตธีม WordPress ที่รันในเครื่อง การใช้เครื่องมือเหล่านี้ต้องใช้ประสบการณ์บางอย่างกับ GitHub การรันคำสั่งเทอร์มินัล และ npm ติดตามโดยใช้เครื่องมือต่อไปนี้:
ดาวน์โหลดหรือคัดลอกสำเนาที่เก็บ vip-design-system-bridge ลูกค้า VIP ของ WordPress สามารถใช้โค้ด WordPress ที่มีอยู่ได้โดยตรงพร้อมสำเนาของธีมโทเค็น

1. ติดตั้งเครื่องมือเทอร์มินัล vip dev-env ซึ่งใช้เพื่อเรียกใช้สำเนาของ WordPress และดูการเปลี่ยนแปลงของโทเค็น:

 $ npm install -g @automattic/vip

หมายเหตุ: คุณอาจต้องติดตั้ง Node.js และ Docker Desktop เป็นข้อกำหนดเบื้องต้นสำหรับ vip dev-env ดูส่วน ข้อกำหนดเบื้องต้น ในหน้าเอกสารนี้สำหรับข้อมูลเพิ่มเติม

4. เรียกใช้สำเนา WordPress ในเครื่อง

หากต้องการดูการอัปเดตโทเค็นการออกแบบของเรา ให้รันสำเนา WordPress ในเครื่องโดยใช้ npm และ vip dev-env ตรวจสอบให้แน่ใจว่ามีการติดตั้ง VIP CLI และสำเนาของที่เก็บ vip-design-system-bridge ถูกดาวน์โหลดในเครื่อง

1. เมื่อดาวน์โหลดโฟลเดอร์ที่เก็บ vip-design-system-bridge ในเครื่องแล้ว ให้รันคำสั่งเหล่านี้เพื่อสร้างเว็บไซต์ WordPress ในเครื่อง:

 cd vip-design-system-bridge/docs/design-tokens-example vip dev-env create --multisite=false --php=8.0 --wordpress=6.1 --mu-plugins=demo --elasticsearch=false --phpmyadmin=false --xdebug=false --app-code=token-site/ --slug=token-site --title=Tokens

2. หลังจากการติดตั้งเสร็จสิ้น ให้รันคำสั่งนี้เพื่อเริ่มสภาพแวดล้อม

 vip dev-env start --slug=token-site

ผลลัพธ์ควรมีลักษณะดังนี้:

3. ถัดไป เปิดใช้งานธีมโทเค็นโดยเรียกใช้:

 vip dev-env exec --slug=token-site -- wp theme activate token-theme

WordPress เวอร์ชันท้องถิ่นควรทำงานโดยเปิดใช้งานธีมโทเค็นของเรา

4. เยี่ยมชมอินสแตนซ์ WordPress ที่ทำงานในเครื่องที่ http://token-site.vipdev.lndo.site/ คุณควรเห็นหน้า WordPress โดยใช้ธีม Material 3 UI แบบง่าย:

5. ใช้โทเค็นเพื่ออัปเดตธีม WordPress

เมื่อมองเห็นธีมเริ่มต้นแล้ว เราสามารถอัปเดตธีมของเราแบบแทนที่และดูผลลัพธ์ของการเปลี่ยนแปลงโทเค็นได้

ไปที่ที่เก็บ vip-design-system-bridge ที่ดาวน์โหลดมาในเทอร์มินัล และติดตั้งการพึ่งพา npm สำหรับสคริปต์การประมวลผลโทเค็น:

 cd vip-design-system-bridge/ npm install

จากนั้นรันคำสั่งต่อไปนี้ อัปเดต –tokenPath เพื่อให้ตรงกับเส้นทางของ tokens.json ที่ดาวน์โหลดในขั้นตอนที่ 3:

 node ingest-tokens.js --tokenPath=~/Downloads/tokens.json --themePath=./docs/design-tokens-example/token-site/themes/token-theme --sourceSet=global --layerSets=material-3-color,material-3-text --overwrite

นี่คือรายละเอียดแฟล็กที่ใช้ในคำสั่งนี้:

 –tokenPath=~/Downloads/tokens.json # The path to the tokens.json file downloaded from Figma Tokens. Change # this to match the path of the tokens.json file downloaded in step 3. --themePath=./docs/design-tokens-example/token-site/themes/token-theme # The path to the WordPress theme folder that'll receive the updated tokens --sourceSet=global # Use the tokens in the “global” set as a source. Source sets are excluded # from the output, but can still be referenced by other token sets. This # option is used to avoid including the whole color palette and typography # choices in the resulting tokens. --layerSets=material-3-color,material-3-text # Use the “material-3-color” and “material-3-text” token sets to produce the # final output. All tokens included in these sets will be available to # WordPress.

เมื่อรันคำสั่งด้านบน ควรสร้างเอาต์พุตนี้:

 Using source and layer sets for tokens (source: global, layers: material-3-color, material-3-text) ︎ Processed with token-transformer wordpress-theme-json ︎ src/build/tokens.json ︎ Processed with Style Dictionary ︎ Wrote theme file: ~/vip-design-system-bridge/docs/design-tokens-example/token-theme/theme.json

ตอนนี้โทเค็นได้รับการอัปเดตใน WordPress แล้ว โปรดไปที่ http://token-site.vipdev.lndo.site/ หรือรีเฟรชหน้านี้ คุณจะเห็นว่าสีพื้นหลังเปลี่ยนเป็นค่าโทเค็นที่กำหนดใน Figma:

สรุปแล้ว

เราได้สาธิตกระบวนการแบบ end-to-end สำหรับการสร้างแหล่งความจริงแห่งเดียวสำหรับระบบการออกแบบและผลักดันสิ่งเหล่านั้นให้เป็นธีม WordPress อย่างไรก็ตาม มีหัวข้อที่สำคัญและซับซ้อนที่ยังไม่ได้กล่าวถึงในโพสต์นี้ เช่น กระบวนการสร้างโทเค็นสำหรับโทเค็น Figma และการออกแบบธีมบล็อก WordPress ที่สามารถใช้ประโยชน์จากโทเค็นเหล่านั้นได้

ที่กล่าวว่า เราหวังว่านี่จะเป็นกระบวนการที่มีประโยชน์สำหรับผู้ที่ต่อสู้กับการออกแบบระบบใน WordPress และโค้ดตัวอย่างสามารถใช้เป็นจุดเริ่มต้นได้

สำหรับหัวข้อระบบการออกแบบที่เกี่ยวข้อง โปรดดูทรัพยากรเหล่านี้:

ปลั๊กอิน Figma Tokens – เริ่มต้นใช้งาน

ผู้เขียน

Alec Geatches นักพัฒนาซอฟต์แวร์อาวุโสของ Automattic

ผู้พัฒนาและออกแบบระบบ WordPress สำหรับองค์กร ผู้ที่ชื่นชอบระบบอาศัยอยู่ในไทเป ไต้หวัน

Gopal Krishnan นักพัฒนาซอฟต์แวร์อาวุโสของ Automattic

Gopal ทำงานบน WordPress VIP ที่แยกส่วนออกจากข้อเสนอ WordPress โดยมีความสนใจในระบบการออกแบบและ Gutenberg เขาอาศัยอยู่ที่ซิดนีย์ ประเทศออสเตรเลีย และเพิ่งย้ายมาจากแคนาดา