สร้างแดชบอร์ดที่ตอบสนองด้วย figma

Jan 28, 2026

วิธีการ

Figma เป็นเครื่องมือกราฟิกสำหรับนักออกแบบ UI มันมีอินเทอร์เฟซที่เรียบง่ายและช่วยให้คุณทำงานร่วมกับเพื่อนร่วมทีมของคุณ หากคุณต้องการทำงานแบบออฟไลน์คุณสามารถเลือกใช้แอปเดสก์ท็อป อีกวิธีหนึ่ง Figma ทำงานบนระบบปฏิบัติการใด ๆ (Hello, Windows) ดังนั้นคุณไม่จำเป็นต้องติดตั้งอะไรเลย และเริ่มต้นใช้งานเป็นเรื่องง่าย - คุณสามารถนำเข้าการออกแบบเค้าโครงก่อนหน้านี้จากร่าง

เลือกผู้สร้างเว็บไซต์: 16 เครื่องมือยอดนิยม

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

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

01. ลงทะเบียน

ก่อนอื่นคุณต้องลงทะเบียนที่ www.figma.com . ตัดสินใจว่าคุณต้องการใช้เครื่องมือในเบราว์เซอร์ของคุณหรือดาวน์โหลดแอปเดสก์ท็อปหรือไม่ ในการดาวน์โหลดเวอร์ชันเดสก์ท็อปให้ไปที่เมนูแฮมเบอร์เกอร์ที่มุมซ้ายบนแล้วคลิกที่ 'รับเดสก์ท็อปแอป'

02. สร้างอาร์ตบอร์ดและกริด

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — เพิ่มกริดพื้นฐานเพื่อช่วยให้คุณวางตำแหน่งองค์ประกอบของคุณอย่างกลมกลืน (คลิกที่ภาพเพื่อดูภาพขยาย)

ตี เพื่อสร้างอาร์ตบอร์ด คุณสามารถเลือกหนึ่งในที่ตั้งค่าล่วงหน้าหรือสร้างขนาดที่กำหนดเองของคุณเอง สำหรับโครงการนี้เราจะใช้โทรศัพท์ & GT; iPhone 7 (375x667px) ในการสร้างตารางให้เลือกอาร์ตบอร์ดก่อน จากนั้นอยู่ทางด้านขวามือค้นหา 'เค้าโครงกริด' และกด '+' ตั้งค่าจำนวนคอลัมน์: 6, รางน้ำ: 16, ระยะขอบ: 8 และประเภท: ยืด

03. วาดสี่เหลี่ยมผืนผ้าสำหรับพื้นหลัง

เริ่มต้นด้วยพื้นหลังกัน กด r เพื่อนำเครื่องมือสี่เหลี่ยมผืนผ้าขึ้นมาและวาดสี่เหลี่ยม # 5F98FA โดยไม่มีพรมแดน ตั้งค่ามิติเป็น 375x363 โดยใช้แผงคุณสมบัติที่ด้านขวามือ

04. เพิ่มแถบสถานะ

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge) — ตั้งค่าการไล่ระดับสีสำหรับแถบสถานะโดยใช้แผงคุณสมบัติทางด้านขวาบนหน้าจอ ที่นี่คุณสามารถปรับตัวเลือกสีเพื่อสร้างการไล่ระดับสีเชิงเส้น (คลิกที่ภาพเพื่อดูภาพขยาย)

ต่อไปเราต้องการวางแถบสถานะที่ด้านบนของหน้าจอ กด r ในการตั้งค่าความกว้าง: 375, ความสูง: 64, ตำแหน่ง (x: 0; y: 0) สำหรับแถบการนำทางของเรามาตั้งค่าการเติมไล่ระดับสีโดยใช้แผงตรวจสอบอสังหาริมทรัพย์ทางด้านขวา ค้นหาตัวเลือก 'เติม' ให้กดบนตัวอย่างสีและเลือก 'เชิงเส้น' จากเมนูแบบเลื่อนลง สีที่ด้านบนควรเป็น # 77A6F7 และที่ด้านล่าง # 5A93F5 (ความทึบ 100 เปอร์เซ็นต์สำหรับทั้งสองอย่าง)

05. นำเข้าแถบสถานะ iOS

น่าเสียดายที่ Figma ไม่รวมองค์ประกอบ iOS UI ตามค่าเริ่มต้น อย่างไรก็ตามมีไฟล์ที่เรียกว่า 'ไฟล์ตัวอย่าง' ซึ่งเป็นการออกแบบแอป iOS ดังนั้นเราจึงสามารถยืมแถบสถานะจากนั้น คัดลอกตัวเลือกแถบสถานะแสงวางลงในไฟล์ปัจจุบันและวางไว้ที่ (x: 0; y: 0) การใช้เครื่องมือข้อความ ( t ) คลิกที่ ArtBoard ของคุณเพื่อเพิ่มส่วนหัวไปยังแถบนำทาง ฉันไป Avenir หนัก 15px #FFFFFFF จัดแนวหัวเรื่องโดยศูนย์แนวนอน, Y: 33

06. สร้างไอคอนด้านหลัง

ด้านซ้ายของแถบนำทางควรเป็นไอคอน 'ย้อนกลับ' ฉันจะสร้างสิ่งนี้ตั้งแต่เริ่มต้น สร้างสี่เหลี่ยมผืนผ้า 14x14px เพิ่มการหมุน 45 องศา, x: 14; Y: 43 ทำซ้ำสี่เหลี่ยมผืนผ้านี้และวางที่ x: 18; Y: 43 เลือกสี่เหลี่ยมทั้งสองและใต้เมนูด้านบนไปที่กลุ่มบูลีน & GT; ลบการเลือก หลังจากนั้นกลับไปที่กลุ่มบูลีน & GT; การเลือกแบนหรือกด cmd + e .

07. เสร็จสิ้นไอคอนลูกศร

ไอคอนลูกศรของเราเกือบจะเสร็จแล้ว ตอนนี้เราเพียงแค่ต้องตั้งค่าความกว้างและความสูงให้กับค่าตัวเลข - ในความกว้างของกรณีของฉัน: 12px; ความสูง: 20px ขั้นตอนสุดท้ายคือการตั้งค่าสีเติมเป็น #FFFFFFF

08. สร้างกราฟ

ตอนนี้เรากำลังจะสร้างกราฟ ก่อนอื่นเราจะใส่แนวทางบางอย่าง เลือกเครื่องมือสี่เหลี่ยมผืนผ้า ( r ) และตั้ง X: 24 Y: 147; ความกว้าง: 1; ความสูง: 166; เติมสี # b3dcff และความทึบ 20%

ทำซ้ำสี่เหลี่ยมผืนผ้านี้สี่ครั้งด้วยระยะขอบ 80px ที่ด้านล่างของแนวทางแต่ละครั้งเราจำเป็นต้องเพิ่มฉลากวันที่โดยใช้เลเยอร์ข้อความ ('2 ก.พ. ', '9 ก.พ. ', '16 ก.พ. ', '23 ก.พ. ', 'มีนาคม 1') ฉันใช้ Avenir Medium ที่ 11px # C1D8FF

09. ทำสายข้อมูล

การใช้เครื่องมือปากกา ( p ) เราต้องสร้างเวกเตอร์เพื่อเป็นตัวแทนของสายข้อมูล คลิกและลากเพื่อสร้างจุดBézier รูปร่างนี้ควรมีจังหวะ 4px และไม่มีการเติม #ffffff

มาเพิ่ม Shadow Drop เพื่อช่วยให้สายโดดเด่น: คลิกที่ส่วน '+' บนเอฟเฟกต์และเลือก 'Drop Shadow' ใช้การตั้งค่าต่อไปนี้เพื่อสร้างเงาที่ราบรื่นและสง่างาม: Blur: 3px, Y: 7px, # 2951FF, ความทึบ: 100%

10. เพิ่มรายละเอียดลงในกราฟ

Use the Text tool to add values to the places the guidelines intersect with the data line — ใช้เครื่องมือข้อความเพื่อเพิ่มค่าให้กับตำแหน่งที่แนวทางการตัดกับบรรทัดข้อมูล

ณ จุดที่แนวทางตัดต่อกับสายข้อมูลที่เรากำลังจะเพิ่มแวดวง เวลานี้เราจะใช้เครื่องมือวงรี ( o ) ซึ่งคุณจะพบในเมนูแบบเลื่อนลงที่มาพร้อมกับเครื่องมือสี่เหลี่ยมผืนผ้า วาดวงกลม 8x8px ในแต่ละสี่แยกและตั้งค่าสีเติมเป็น # 5F98FA เราจำเป็นต้องเพิ่มจังหวะ: คลิกที่ปุ่ม '+' ถัดจากส่วนจังหวะ, ชุดน้ำหนัก: 2px และจัดตำแหน่ง: ศูนย์

11. สัมผัสสุดท้าย

ในการจบส่วนกราฟเราเพียงแค่ต้องเพิ่มค่าให้กับจุดตัดของเรา ด้วยเครื่องมือข้อความ ( t ) เลือก Avenir Black, 11px, # 1F4991

12. สามกล่องข้อมูล

ใต้กราฟเส้นเราจะสร้างเซลล์สามเซลล์ที่แสดงข้อมูลเพิ่มเติม การใช้เครื่องมือข้อความ ( t ) มาสร้างหัวข้อแรกของเรา: 'มูลค่าโดยประมาณของหุ้นของคุณ': X: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6 ทางด้านขวาของเซลล์วางค่า '$ 1,115', สไตล์ข้อความ: Avenir หนัก, 22px, # 5F98FA, การจัดตำแหน่งข้อความ: ซ้าย, x: 287; Y: 387

13. การแยกเครื่องแยก

วาดรูปสี่เหลี่ยมผืนผ้าที่มีความสูง 1px และครอบคลุมความกว้างเต็มของหน้าจอ (# F5F5F5; x: 0; Y: 435) - สิ่งนี้จะทำหน้าที่เป็นตัวคั่นระหว่างเซลล์ เลือกหัวเรื่องค่าและตัวคั่นและสร้างกลุ่ม ( cmd + g .

14. การเพิ่มหัวเรื่อง

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — ภายใต้กราฟจะเป็นเซลล์สามเซลล์ที่แสดงข้อมูลสำคัญ (คลิกที่ภาพเพื่อดูภาพขยาย)

ทำซ้ำกลุ่มนี้เพื่อให้คุณมีสามกลุ่มที่มีระยะทางแนวตั้ง 24px ระหว่างพวกเขา เปลี่ยนหัวข้อที่สองเป็น 'สมาชิกทั้งหมด' และกลุ่มที่สามมุ่งหน้าไปที่ 'เพื่อนที่ลงทะเบียน' และอัปเดตค่าที่เกี่ยวข้อง

15. วาดและจัดรูปสี่เหลี่ยมผืนผ้าอื่น

ตอนนี้เรากำลังจะเพิ่มการเรียกร้องให้ดำเนินการ วาดสี่เหลี่ยมผืนผ้าด้านล่างเซลล์สุดท้ายความกว้าง: 195; ความสูง: 44, ระยะทางแกน Y จากตัวคั่นตัวสุดท้าย 21px

การใช้เครื่องมือจัดตำแหน่งจัดเรียงสี่เหลี่ยมผืนผ้าตามแนวนอน จากนั้นตั้งค่าสีเติมเป็น # 5F98FA และรอบเป็น 22 (คุณจะพบฟิลด์นี้หลังจาก 'การหมุน' ในแผงคุณสมบัติ) หลังจากนั้นเพิ่มเอฟเฟกต์เงาที่วาง (สี: #Abdaff; ความทึบ: 100%; Y: 5; เบลอ: 11)

16. ใส่ข้อความลงบนปุ่ม

เพิ่มข้อความลงในปุ่มโดยใช้เครื่องมือข้อความ ( t ): 'รับหุ้นเพิ่มเติม!' ตั้งค่านี้ใน Avenir Black, 15px, #FFFFFFF จัดเรียงข้อความตามกึ่งกลางของปุ่ม ในที่สุดกลุ่มองค์ประกอบทั้งหมดเข้าด้วยกันและตั้งชื่ออย่างถูกต้อง

17. ตอบสนองความต้องการ

ตอนนี้เรากำลังจะปรับเค้าโครงของเราเพื่อตอบสนองต่อ iPhone ที่แตกต่างกัน (320x568, 375x667 และ 414x736) ในการทำเช่นนี้เราต้องใช้ข้อ จำกัด ซึ่งคุณจะพบภายใต้เมนูคุณสมบัติด้านขวา

18. การเลย์เอาต์ที่เหมาะสม

หากคุณเลือก 'ซ้าย' หรือ 'ขวา' บนดรอปดาวน์แนวนอนกลุ่มจะพินไปที่ด้านที่คุณเลือกของหน้าจอและจะไม่ยืด หากคุณเลือก 'ศูนย์' กลุ่มหรือเลเยอร์จะยืดดังนั้นจึงเติมความกว้างของหน้าจอ เราจำเป็นต้องทำให้แถบสถานะลอยอยู่ในสถานที่ดังนั้นเราจึงต้องการตัวเลือก 'ขวา & amp; ซ้าย' ซ้าย (หรือกดค้างไว้ 'cmd' แล้วคลิกแถบซ้ายและขวาบนแผนภาพ)

19. ทดสอบ

ลองทำสิ่งนี้ ด้วยแถบสถานะที่เลือกให้กดตัวเลือก 'Right & Amp; Left' เลือก Artboard และแทนที่จะเป็น iPhone 7 ให้เลือก iPhone 7 Plus มันทำงานได้อย่างถูกต้องแม้ว่าคุณจะเลือกขนาด iPhone SE

20. ตรวจสอบแต่ละเลเยอร์

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

21. ตั้งค่ากราฟเส้น

ตอนนี้เรามาตั้งค่ากราฟเส้นกันแล้ว สำหรับแนวทางวันที่และวงเวียนสี่แยกเราต้องการใช้ 'ศูนย์' สำหรับสายข้อมูลและพื้นหลังเราจะใช้ 'Right & Amp; Left' ในส่วนข้อมูลพิเศษที่เราต้องการใช้ 'ซ้าย' สำหรับแต่ละชื่อ 'ถูกต้อง' สำหรับแต่ละค่าและ 'ขวา & AMP; ซ้าย' สำหรับสายคั่น สำหรับกลุ่มปุ่ม CTA ลองตั้ง 'ศูนย์'

22. ตั้งข้อ จำกัด ในแนวตั้ง

ขั้นตอนสุดท้ายคือการตั้งค่าข้อ จำกัด ในแนวตั้ง แถบสถานะแถบนำทางสายข้อมูลและวงเวียนทางแยกและชื่อที่เกี่ยวข้องควรตั้งค่าเป็น 'ด้านบน' พื้นหลังของกราฟวันที่และแนวทางควรตั้งค่าเป็น 'ศูนย์' แต่ละกลุ่มข้อมูลพิเศษควรตั้งค่าเป็นแนวตั้ง 'ศูนย์' และกลุ่มปุ่ม CTA ควรตั้งค่าเป็น 'ด้านล่าง'

23. ทำให้การทำงานสำหรับแต่ละขนาดหน้าจอ

ลองทำสำเนาอาร์ตบอร์ดสองครั้งกันแล้วตั้งค่าขนาดของ iPhone 7 Plus และอีกขนาดกับขนาดบน iPhone SE ในรุ่นบวกคุณจะต้องลดช่องว่างระหว่างเซลล์สุดท้ายของข้อมูลเพิ่มเติมและปุ่ม CTA โดยเลือกกลุ่มเซลล์และเพิ่มความสูงจาก 195 เป็น 225 ในรุ่น SE คุณจะเห็นว่าเซลล์ข้อมูลนั้นล้น ปุ่ม CTA ดังนั้นเราต้องเลือกกลุ่มเซลล์และลดความสูงเป็น 150

24. ทำเสร็จแล้ว!

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

บทความนี้มีจุดเด่นในตอนแรก นิตยสารสุทธิ ปัญหา 288; ซื้อที่นี่

บทความที่เกี่ยวข้อง:

แนวคิดการแสดงผลใหม่ดูเหมือนแอปนักฆ่า
การออกแบบผลกระทบทางสังคม
8 เคล็ดลับในการสัมภาษณ์งาน Ace Tech