แปลง Figma เป็น Bulma CSS: คู่มือฉบับปฏิบัติจริง

Bulma อยู่ในจุดที่ค่อนข้างพิเศษเมื่อเทียบกับ Bootstrap หรือ Tailwind คือเป็นเฟรมเวิร์กคอมโพเนนต์เต็มรูปแบบ แต่ก็ใช้แค่คลาสล้วน ๆ ไม่มี JavaScript แถมมาและไม่ต้องมีขั้นตอนบิลด์ นั่นทำให้มันเป็นปลายทางที่สะอาดสำหรับการส่งออกจาก Figma แต่การแปลงดีไซน์ด้วยมือให้เข้ากับชุดคำศัพท์คลาสเฉพาะของ Bulma ก็ยังต้องอาศัยความเข้าใจกริด สเปซซิ่ง และตัวปรับแต่ง (modifier) ของมันเป็นอย่างดี เพื่อเลือกคลาสให้ถูกทุกครั้ง

ทำไมการแปลง Figma เป็น Bulma ด้วยมือถึงช้า

กริดของ Bulma ที่อิงจาก flexbox (columns, column, ตัวปรับขนาด is-*) อ่านง่ายเมื่อเขียนเสร็จแล้ว แต่การจะไปถึงจุดนั้นด้วยมือจากเฟรม Figma ก็ต้องทำงานแปลซ้ำ ๆ แบบเดียวกับเฟรมเวิร์กอื่น ๆ

• แมป Auto Layout เข้ากับระบบคอลัมน์ของ Bulma แถวขององค์ประกอบที่เว้นระยะเท่ากันใน Figma ต้องกลายเป็นชุดผสมที่ถูกต้องของ columns, column is-half/is-one-third และการจัดการ gap — ตัดสินใจด้วยสายตา ทีละเฟรม
• เลือกคลาสตัวปรับแต่งให้ถูก Bulma แสดงสไตล์ส่วนใหญ่ผ่านตัวปรับแต่ง (is-primary, is-rounded, is-large) จึงต้องแปลสีพื้นหรือมุมโค้งใน Figma ให้เป็น "ตัวปรับแต่งของ Bulma ที่ใกล้เคียงที่สุด" ซึ่งไม่ได้ตรงกันเป๊ะเสมอไป
• สร้างไทโปกราฟีและสเปซซิ่งขึ้นใหม่ ตามสเกลเฉพาะของ Bulma (title, subtitle, helper mb-*/mt-*) แทนที่จะก็อปค่าพิกเซลตรง ๆ
• ทำซ้ำทั้งหมดในทุกเบรกพอยต์ เพราะ helper แบบ responsive ของ Bulma (is-hidden-mobile, การเปลี่ยนความกว้างคอลัมน์) ต้องเพิ่มด้วยมือสำหรับทุกขนาดหน้าจอในดีไซน์

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

MarkupGen สร้างเอาต์พุต Bulma จากดีไซน์จริงได้อย่างไร

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

1. ส่งออกเฟรมจาก Figma ด้วยปลั๊กอิน MarkupGen ซึ่งจับโครงสร้าง สไตล์ และรูปภาพไปพร้อมกัน
2. AI สร้างมาร์กอัป จากโครงสร้างจริงของดีไซน์ ไม่ใช่การประมาณคร่าว ๆ
3. ปรับแต่งเนื้อหา ฟอนต์ และเลย์เอาต์ แบบเห็นภาพในตัวแก้ไขในแอปก่อนสรุปอะไรให้เสร็จสิ้น
4. ส่งออกแพ็กเกจโค้ดสุดท้าย เป็น Bulma 1.0.2

ตอนส่งออก ค่า Auto Layout และสเปซซิ่งจาก Figma จะถูกแมปไปยังคลาสกริดและ helper จริงของ Bulma แทนการเดา — แถวขององค์ประกอบที่ใช้ Auto Layout จะกลายเป็นโครงสร้าง columns/column ที่มีขนาดสอดคล้องกัน ส่วน padding, gap และการจัดตำแหน่งจะถูกแปลงเป็น helper สเปซซิ่งของ Bulma แทนสไตล์ inline เอาต์พุตยังคงไม่พึ่งพา JavaScript เลย ตรงตามปรัชญาของ Bulma เอง จึงไม่ต้องต่อสายอะไรเพิ่มเพื่อให้ CSS แสดงผลถูกต้อง

Bulma อยู่ตรงไหนในบรรดารูปแบบเอาต์พุตของ MarkupGen

Bulma เป็นหนึ่งในหกปลายทาง CSS ที่ MarkupGen รองรับ ควบคู่กับ Vanilla CSS, Tailwind, Bootstrap, Materialize และ Pico — เลือกได้ตามแต่ละโปรเจกต์จากแผงตั้งค่า แทนที่จะล็อกไว้ล่วงหน้า มันคือตัวเลือกที่เหมาะเมื่อคุณต้องการความสวยงามที่ทันสมัยและสะอาดตาโดยไม่ต้องรับไลบรารีคอมโพเนนต์เต็มรูปแบบแบบที่ Bootstrap หรือ Materialize ต้องการ ดูการเปรียบเทียบทั้งหกแบบเคียงข้างกันได้ที่ 6 เฟรมเวิร์ก CSS สำหรับ Figma-to-Code

ตรวจสอบมาร์กอัปที่สร้างขึ้นก่อนเผยแพร่

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

• ตรวจความกว้างคอลัมน์ในแต่ละเบรกพอยต์ — กริดของ Bulma ยืดหยุ่น จึงควรยืนยันว่าขนาด is-* ที่สร้างขึ้นยังตรงตามเจตนาบนมือถือ ไม่ใช่แค่บนเดสก์ท็อป
• หารูปแบบตัวปรับแต่งที่ซ้ำกัน โดยเฉพาะจุดที่คอมโพเนนต์เดียวกัน (การ์ด สไตล์ปุ่ม) ปรากฏมากกว่าหนึ่งครั้ง — ควรได้คลาสตัวปรับแต่งเดียวกันทุกจุด
• ยืนยัน HTML เชิงความหมายใต้คลาสของ Bulma — เอาต์พุตเน้นแท็กที่มีความหมายเป็นค่าเริ่มต้น แทนที่จะเป็น <div> ซ้อนกัน
• ใช้ตัวแก้ไขในแอป สำหรับปรับเนื้อหาหรือเลย์เอาต์ แทนการแก้คลาสที่ส่งออกมาด้วยมือ แล้วส่งออกใหม่

ทุกการส่งออกยังได้คะแนนคุณภาพจาก AI แบบอัตโนมัติ ให้สัญญาณเร็ว ๆ ว่าพร้อมเผยแพร่หรือควรดูอีกครั้งก่อนไปต่อ

ลองใช้กับดีไซน์ของคุณเอง

ถ้าคุณยังเลือกคลาสตัวปรับแต่งของ Bulma ด้วยมือเพื่อให้ตรงกับไฟล์ Figma ลองดูว่างานส่วนนั้นหายไปมากแค่ไหนเมื่อคลาสมาจากค่าจริงของดีไซน์ ลองใช้ MarkupGen ฟรี กับเฟรมของคุณเอง หรือดูหน้า ตัวแปลง Figma เป็น Bulma เพื่อดูว่าคุณจะได้อะไรตั้งแต่แรก