Figma: ภาพรวมและการทบทวน

Figma เป็นเครื่องมือออกแบบ UI/UX ที่มีการสร้างโค้ด ม็อคอัพที่มีความแม่นยำสูง และความสามารถในการสร้างต้นแบบเชิงโต้ตอบที่ใช้ออกแบบแอป หน้าจอ และภาพประกอบเวกเตอร์ แม้ว่าจะเป็นเครื่องมือที่ใช้เบราว์เซอร์เป็นหลักซึ่งสามารถใช้ได้กับระบบปฏิบัติการใด ๆ แต่ก็มีเวอร์ชันเดสก์ท็อปสำหรับ Mac และ Windows ด้วย

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

Figma ทำงานอย่างไร

Figma มีฟังก์ชันการทำงานที่คุ้นเคยกับ Adobe XD, Gravit, Sketch และเครื่องมือออกแบบอื่นๆ ที่คล้ายคลึงกัน แม้จะใช้งานบนเบราว์เซอร์ แต่อินเทอร์เฟซจะดูเหมือนที่คุณเคยเห็นมาก่อน เครื่องมือเหล่านี้จำนวนมากทำงานในลักษณะเดียวกัน และแตกต่างกันเมื่อเป็นคุณลักษณะเฉพาะ เช่น สิ่งที่รวมไว้ตั้งแต่แกะกล่อง และสิ่งที่คุณต้องการปลั๊กอินสำหรับ พวกเขายังจัดการโปรเจ็กต์ต่างๆ เช่น ม็อคอัพความเที่ยงตรงสูงและการสร้างต้นแบบที่แตกต่างกัน

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

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

Figma Tools

Figma มีเครื่องมือที่คุณคาดหวังจากซอฟต์แวร์การออกแบบ ได้แก่:

• การจัดตำแหน่ง
• ตารางข้อ จำกัด
• คำสั่งบูลีน (รวม, ตัด, รวม, ลบ)
• ตัวเลือกสี
• โหมดการผสม
• เติมหลายรายการ
• เอฟเฟกต์ (เงาหล่น/ด้านใน พื้นหลัง/เลเยอร์เบลอ)
• เครื่องมือเฟรมพร้อมการกำหนดขนาดแบบกำหนดเองหรือเฉพาะอุปกรณ์
• หน้ากาก
• องค์ประกอบรูปร่าง
• เครื่องมือปากกาและงอ
• เครื่องมือข้อความ
• ล็อคและซ่อนเลเยอร์
• ย้ายเครื่องมือ (ตัวชี้/ตัวคลิกเพื่อคว้ารายการ)
• ปักหมุด
• เครื่องมือซูม

สิ่งหนึ่งที่ต้องรู้เกี่ยวกับเครื่องมือข้อความคือคุณไม่สามารถลูกศรผ่านตัวเลือกแบบอักษรหรือดูตัวอย่างของภูมิประเทศได้ เป็นการดีที่สุดที่จะทราบภูมิประเทศที่คุณต้องการใช้เมื่อคุณเริ่มออกแบบ

คุณสมบัติเด่นของ Figma

เจาะลึกลงไปอีกเล็กน้อยเกี่ยวกับคุณสมบัติที่โดดเด่นของ Figma:

• ไลบรารี: สร้างไลบรารีด้วยส่วนประกอบที่นำกลับมาใช้ใหม่ได้และให้สิทธิ์เข้าถึงแก่ทีมทั้งหมด ไลบรารีคอมโพเนนต์ถูกกำหนดโดยทีม ดังนั้นทีมหนึ่งสามารถมีหนึ่งไลบรารี และอีกทีมหนึ่งสามารถมีไลบรารีของตัวเองได้ เมื่อมีการอัปเดตส่วนประกอบในไลบรารี การเปลี่ยนแปลงจะเกิดขึ้นกับทุกการออกแบบที่ใช้ส่วนประกอบนั้น เมื่ออัปเดตส่วนประกอบในไลบรารี คุณจะต้องยืนยันเพื่อเผยแพร่การเปลี่ยนแปลง เพื่อไม่ให้เกิดการเปลี่ยนแปลงโดยไม่ได้ตั้งใจ ("ไลบรารีของทีม" มีไว้สำหรับแผนชำระเงินเท่านั้น)
• ย้าย: เมื่อย้ายวัตถุไปรอบๆ ผืนผ้าใบ ไม้บรรทัดจะแสดงความสูงและความกว้าง
• มาตราส่วน: ตามปกติ เครื่องมือชั่งจะเก็บทุกอย่างตามสัดส่วน เอกลักษณ์ของ Figma คือมาตราส่วนนั้นเป็นเครื่องมือ ส่วนบุคคล คุณไม่จำเป็นต้องกด Shift ค้างไว้เมื่อใช้งาน คุณยังสามารถปรับขนาดจากแผงข้อมูลได้หากต้องการ
• เครือข่าย V ector: สร้างรูปร่างที่ซับซ้อน เรียกว่า เครือข่ายเวกเตอร์ โดยแนบหลายส่วนเข้ากับโหนดบนเวกเตอร์ (ซึ่งต่างจากเพียงสองส่วน ซึ่งเป็นมาตรฐาน)
• โค้งงอ: ด้วยเครื่องมือโค้งงอ คุณสามารถคว้าและจัดการรูปร่างด้วยขอบใดก็ได้ ไม่ใช่แค่จุดเดียว
• Image-to-Shape: วางรูปภาพลงในรูปร่างที่คุณสร้างขึ้น เมื่อคุณเปลี่ยนรูปร่าง รูปภาพจะคงสัดส่วนอยู่ภายใน
• Place Image Tool: รูปภาพไม่เพียงแค่วางลงในการออกแบบของคุณ แต่คุณจะถือรูปภาพไว้บนเคอร์เซอร์แทน จากนั้นคลิกเพื่อวางลงในตำแหน่ง หากคุณเปลี่ยนขนาดในขณะที่ถือไว้ (โดยไม่กด shift ค้างไว้) ระบบจะครอบตัดรูปภาพแทนการปรับขนาด

ประโยชน์ของฟิกม่า

นอกจากเครื่องมือและความสามารถเฉพาะตัวแล้ว ประโยชน์ของ Figma ยังรวมถึง:

• แสดงความคิดเห็นโดยตรงบนผืนผ้าใบ
• สร้างโค้ด CSS และ SVG, iOS และ Android
• ส่งออกเป็น JPG, PDF, PNG หรือ SVG
• นำเข้าหลายภาพพร้อมกัน
• นำเข้าไฟล์ Sketch
• การเชื่อมโยงระหว่างวัตถุกับอาร์ตบอร์ด
• ทางลัดคล้ายกับแพลตฟอร์มอื่น
• ประวัติเวอร์ชันสามารถใช้ได้

ความร่วมมือทางความคิดและการออกแบบ

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

ที่มา: Figma

ลักษณะออนไลน์ตลอดเวลาของ Figma ทำให้เป็นเครื่องมือแชร์หน้าจอที่คล้ายกับ Google เอกสาร ดูว่าใครกำลังดูเอกสารแบบเรียลไทม์ เคอร์เซอร์มีป้ายกำกับเพื่อให้คุณรู้ว่าใครเป็นผู้เปลี่ยนแปลง คุณยังสามารถคลิกอวาตาร์ในแถบเครื่องมือเพื่อดูมุมมองของสมาชิกในทีม ซึ่งสามารถปรับปรุงการสื่อสารได้ การแบ่งปันทำงานคล้ายกับ Dropbox และคุณสามารถตั้งค่าการอนุญาตสำหรับการแก้ไขหรือดูอย่างเดียวได้

ที่มา: Figma

ราคา Figma

Figma ให้บริการฟรีหากคุณมีทีมเล็กๆ สองคน และต้องทำงานครั้งละไม่เกินสามโครงการเท่านั้น นอกเหนือจากนั้น คุณจะต้องใช้แผน Professional ซึ่งเท่ากับ $12 ต่อผู้แก้ไขต่อเดือน หรือแผนองค์กร ซึ่งมีค่า $45 ต่อผู้แก้ไขต่อเดือน

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

ความคิดสุดท้าย

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

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

พร้อมที่จะสำรวจเครื่องมือฟรีเพิ่มเติมแล้วหรือยัง ตรวจสอบบทความของเราเกี่ยวกับ GIMP ซึ่งเป็นทางเลือก Photoshop โอเพ่นซอร์สฟรี

ภาพเด่นผ่าน PureSolution / shutterstock.com