บทความ IT เจ๋งๆ
6 Design Systems และ UI Kits ที่น่าสนใจ ในปี 2024
30-ส.ค.-24
คัมภีร์เทพ IT
ด้วยความก้าวหน้าของ Digital Technology และความต้องการของ User Interfaces ที่เป็นมิตรกับผู้ใช้งานมากขึ้น Design Systems และ UI Kits จึงกลายเป็นส่วนสำคัญใน Development Process ในบทความนี้จะมาแนะนำ 6 Design Systems และ UI Kits ที่น่าสนใจ ในปี 2024
Blade Design System คือ Design System อย่างเป็นทางการของ Razorpay ซึ่งเป็นชุดเครื่องมือและ Components ที่ครอบคลุม สำหรับการสร้าง Interfaces และ Websites
Tokens ที่ถูกสร้างขึ้นอย่างพิถีพิถัน และ Components มาตรฐานที่มาพร้อมกับ Documentation ทั้งหมด มีไว้ให้คุณได้ใช้งานด้วย ซึ่งมันได้รับการพิสูจน์แล้วว่า ทั้งดีและเหมาะสมเป็นอย่างยิ่ง
นอกจากนี้ มันยังเพิ่มสะดวกด้วยการที่ Design System ทั้งหมดถูกเก็บอยู่บน GitHub ดังนั้น คุณสามารถติดตั้ง Design ทั้งหมดบน Website ของคุณได้
Atomized Design System จะช่วยให้คุณสร้าง User Interfaces และ Websites ที่ทันสมัย, มีสไตล์ และดึงดูดสายตาได้โดยที่ไม่ต้องทำงานซ้ำ ๆ
มาดูกันว่า ใน Design System มีอะไรบ้าง:
- 200+ Styles: Typography, Effects, Colour Schemes
- 700+ Components: Buttons, Lists, Web3 และอื่น ๆ
- 200+ Variables
- ตัวอย่าง Screens เพื่อช่วยเพิ่มแรงบันดาลใจและค้นหา Solutions ที่เหมาะสม
System ทั้งหมดได้รับการจัดระเบียบและถูกคิดมาเป็นอย่างดีเพื่อเพิ่มความสะดวก Free Package ถือเป็นวิธีที่ดีในการทำความรู้จักกับ System นี้โดยละเอียด
3. Design System by Jordan Hughes
Design System by Jordan Hughes มีชุดของ Components ต่าง ๆ เป็นจำนวนมาก สำหรับ Project ของคุณ ซึ่งประกอบไปด้วย Logos, Icon Sets, UI Kit, Modals & Popups, Avatars, Colour Palette Systems เป็นต้น
ทุกอย่างได้รับการจัดระเบียบเพื่อเพิ่มความสะดวกในการใช้งาน ดังนั้น คุณจึงสามารถค้นหาสิ่งที่ต้องการสำหรับ Tasks หรือ Projects ที่ต้องการได้อย่างรวดเร็ว
Wanted Design Library เป็น Design Library ที่มีความสร้างสรรค์ ซึ่งแม้แต่ ผู้ที่เพิ่งเริ่มต้นก็สามารถนำไปปรับใช้และใช้งานใน Projects ได้อย่างรวดเร็ว
Library ประกอบไปด้วย Elements ที่มีโครงสร้างซึ่งถูกแบ่งออกเป็น Themes พื้นฐาน ได้แก่ Colour, Typography, Grid และ Icons สำหรับ Library นี้เหมาะอย่างยิ่งสำหรับ Projects ที่จำเป็นต้องการความโดดเด่นและนำเสนอสิ่งใหม่ ๆ และแตกต่างให้กับผู้ใช้งาน
ข้อดีคือ ทีมงานของพวกเขา ได้แสดงให้เห็นว่า พวกเขาใช้ Design System ใน Project อย่างไร และ ทุกอย่างดูค่อนข้างจะสมบูรณ์แบบและน่าประทับใจ
5. Design To Code UI Kit (Free)
Design To Code UI Kit เป็น Innovative Tool ใหม่ที่ทำให้ Process ตั้งแต่การ Design ไปจนถึงการเขียน Code ง่ายขึ้น ชุดเครื่องมือนี้ประกอบไปด้วย Components สำเร็จรูปที่สามารถนำไปปรับใช้และ Integrate รวมเข้ากับ Codebase ของ Project ได้อย่างง่ายดาย ซึ่งนับเป็นชุดเครื่องมือที่จำเป็นสำหรับ Designers และ Developers โดยที่ทุกอย่างได้รับการเพิ่มประสิทธิภาพสูงสุดด้วย Features ล่าสุดของ Figma
- Figma Component แต่ละส่วน มี React Component ที่เชื่อมโยงกับ Storybook
- Props ใน Figma เหมือนกับ Props ใน React 100%
- ทั้ง Fonts, Sizes, Shapes และ Spaces จะถูกบันทึกใน CSS Variables ที่สอดคล้องกับ Variables ใน Figma
- Structure และ Design ของ Interface ตรงกับ Structure ใน Code อย่างสมบูรณ์
- มี Components ที่มีคุณภาพทั้งใน Figma และ React
- มีทั้ง Best Practices ในด้านการ Design & UX และ Best Practices ในเรื่อง Coding และ Styling
หากคุณต้องการสร้าง Design System เป็นของคุณเอง คุณจะต้องมี Strategy เพราะ Design System Strategy จะช่วยคุณให้สามารถทำสิ่งนั้นได้
Design System Strategy Map เป็น Document หนึ่งหน้าที่สรุป Activities, Goals และ Users ของ Design System ของคุณ คุณสามารถแชร์ Map นี้กับผู้มที่เกี่ยวข้องทั้งหมดได้ เพื่อรับ Feedback และพัฒนา Strategy ที่ใช้แล้วได้ผล
สรุป
และนี่ก็เป็น 6 Design Systems และ UI Kits ที่น่าสนใจ ในปี 2024 ซึ่งจะนำเสนอ Features และ Tools ขั้นสูง สำหรับการสร้าง User Interfaces ไม่ว่าคุณจะทำงานให้กับทีมที่มีขนาดใหญ่หรือ startup ขนาดเล็กก็ตาม Design System เหล่านี้จะสามารถช่วยให้คุณบรรลุ Projects ใหม่ ๆ ได้เป็นอย่างดี
ที่มา: https://uxplanet.org/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด