เนื้อหา
- 01. คัดลอกและวางคำแนะนำ
- 02. Sketch Cleaner
- 03. อนิมา
- 04. ตอบสนอง Sketch.app
- 05. Git Sketch Plugin
- 06. ImageOptim
- 07. กระจกวิเศษ
- 08. ส่งออกมากขึ้น
- 11. ตลาด
- 12. แบ่งส่วนวงกลม
- 13. นักวิ่งร่าง
- 14. แบบอักษรไอคอน
- 15. ค้นหาและแทนที่
ปลั๊กอิน Sketch ช่วยให้ Sketch ดียิ่งขึ้น Sketch เป็นเครื่องมือออกแบบเว็บ UI ที่เหมาะสำหรับหลาย ๆ คนและส่วนหนึ่งของสิ่งที่ทำให้ดีมากคือชุมชนของผู้คนที่ทำงานเพื่อขยายฟังก์ชันการทำงานและคุณสมบัติต่างๆโดยการสร้างปลั๊กอินที่กำหนดเอง
การจัดการปลั๊กอิน Sketch ของคุณทำได้ง่ายกว่าที่เคย ปลั๊กอินจะอัปเดตโดยอัตโนมัติและส่วนที่ล้าสมัยจะถูกปิดใช้งาน การทำให้ระบบนิเวศของปลั๊กอินมีประโยชน์มากยิ่งขึ้นคือ Sketch Cloud ซึ่งเป็นบริการแชร์ไฟล์ที่ทุกคนสามารถสมัครได้ซึ่งคุณสามารถดูดาวน์โหลดและแสดงความคิดเห็นในเอกสาร Sketch ที่แชร์แบบสาธารณะหรือแบบส่วนตัวได้โดยตรงจาก Sketch
ลองมาดูปลั๊กอิน Sketch ที่ดีที่สุดซึ่งสามารถเปลี่ยนวิธีการออกแบบอินเทอร์เฟซผู้ใช้ของคุณได้อย่างมาก เมื่อคุณพบสิ่งที่คุณต้องการแล้วให้อ่านวิธีการติดตั้งปลั๊กอิน Sketch หากคุณชื่นชอบเครื่องมือเว็บอย่าพลาดเครื่องมือออกแบบเว็บเครื่องมือสร้างเว็บไซต์และการจัดเก็บข้อมูลบนคลาวด์ที่เราโปรดปราน และอย่าลืมว่าผู้ให้บริการเว็บโฮสติ้งที่คุณเลือกมีความสำคัญต่อความสำเร็จของไซต์ของคุณ (คำแนะนำของเราจะช่วย)
01. คัดลอกและวางคำแนะนำ
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: คัดลอกวางหรือลบคำแนะนำจากอาร์ตบอร์ดของคุณ
นักออกแบบทุกคนมีความสัมพันธ์แบบรัก / เกลียดกับไกด์ บางครั้งสิ่งเหล่านี้มีความสำคัญอย่างยิ่งและเวลาที่เหลือก็เข้ามาขวางทางคุณ หากคุณใช้คำแนะนำแทนตัวเลือกเค้าโครงของ Sketch การเปลี่ยนคำแนะนำสำหรับอาร์ตบอร์ดหลายชิ้นอาจเป็นฝันร้าย แต่ด้วยปลั๊กอินนี้คุณสามารถคัดลอกวางและลบคำแนะนำออกจากอาร์ตบอร์ดทั้งหมดของคุณได้อย่างง่ายดาย
02. Sketch Cleaner
- ดาวน์โหลดที่นี่
- ราคา: $2
- สรุป: ทำให้ไฟล์งานออกแบบของคุณสะอาดราวกับเสียงนกหวีด
การออกแบบ Sketch ใด ๆ ที่ผ่านการทำซ้ำสองสามครั้งจะต้องรับขยะระหว่างทางเช่นเลเยอร์ที่ซ่อนอยู่ตำแหน่งเส้นขอบที่ไม่สอดคล้องกันและรูปแบบเลเยอร์ที่ไม่ได้ใช้
แม้ว่าจะไม่ใช่จุดจบของโลกที่จะมีไฟล์ Sketch ที่ยุ่งเหยิง แต่ก็อาจส่งผลต่อการส่งต่อและทำให้ชีวิตง่ายขึ้นสำหรับทุกคนที่ต้องทำความเข้าใจกับมัน แทนที่จะทำทุกอย่างด้วยมือให้ใช้ Sketch Cleaner เพื่อจัดการกับปัญหาทั่วไปทั้งหมดโดยอัตโนมัติ
03. อนิมา
- ดาวน์โหลดที่นี่
- ราคา: ขึ้นไปฟรี
- สรุป: สร้างต้นแบบที่ตอบสนองและมีความเที่ยงตรงสูง
ก่อนหน้านี้มีให้ใช้งานเป็นปลั๊กอินฟรีแยกต่างหาก - เค้าโครงอัตโนมัติและ Launchpad - ตอนนี้ Anima เป็นปลั๊กอินแบบครบวงจรที่ออกแบบมาเพื่อช่วยคุณสร้างเค้าโครงที่ตอบสนองด้วยหมุดกองซ้อนและช่องว่างภายในและต้นแบบความเที่ยงตรงสูงที่เหมาะกับทุกหน้าจอ ยังคงมีเวอร์ชันฟรีที่รองรับโครงการหนึ่ง สำหรับโครงการไม่ จำกัด ราคาเริ่มต้นที่ 25 เหรียญต่อเดือน
04. ตอบสนอง Sketch.app
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: Render React Components เป็น Sketch
การจัดการสินทรัพย์การออกแบบใน Sketch อาจเป็นเรื่องยาก ปลั๊กอิน Sketch ที่มีประโยชน์นี้ให้วิธีที่ง่ายและเชื่อถือได้มากขึ้นในการจัดการสินทรัพย์ของคุณ ใช้การออกแบบของคุณในโค้ดเป็นส่วนประกอบ React จากนั้นใช้ปลั๊กอินนี้เพื่อแสดงเป็นแบบร่าง นอกจากนี้ยังทำให้ง่ายต่อการดึงและนำข้อมูลจริงไปใช้ในไฟล์ Sketch ของคุณ
React Sketch.app ได้รับการพัฒนาโดย Airbnb เพื่อใช้กับระบบการออกแบบโดยมีจุดประสงค์เพื่อช่วยลดช่องว่างระหว่างนักออกแบบและนักพัฒนา
05. Git Sketch Plugin
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: ไคลเอนต์ Git ที่สร้างขึ้นใน Sketch
ปลั๊กอินนี้มีจุดมุ่งหมายเพื่อนำการควบคุมเวอร์ชันเข้าสู่ Sketch ทำงานโดยการส่งออกรูปภาพสำหรับทุกส่วนของการออกแบบจากนั้นสร้างความแตกต่างที่สวยงามเพื่อให้ชัดเจนว่ามีการเปลี่ยนแปลงอะไรบ้าง ทุกคนในทีมจะเห็นความคืบหน้าของการออกแบบโดยการจัดทำเป็นเอกสารในแต่ละขั้นตอนของกระบวนการออกแบบ
Git Sketch Plugin ถูกสร้างขึ้นโดย Mathieu Dutour ซึ่งตั้งแต่นั้นมาได้ย้ายไปสู่การสร้างระบบควบคุมเวอร์ชันที่ต้องชำระเงินที่ครอบคลุมมากขึ้นที่เรียกว่า Kactus
06. ImageOptim
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: การปรับภาพให้เหมาะสมใน Sketch
ในขณะที่ Sketch นำเสนอโซลูชันของตัวเองสำหรับการเพิ่มประสิทธิภาพไฟล์ SVG แต่ไม่มีตัวเลือกมากมายสำหรับการบีบอัดรูปภาพ JPG และ PNG เนื่องจาก ImageOptim ได้นำเสนอบริการที่มั่นคงมาเป็นเวลาหลายปีจึงเหมาะสมที่จะนำฟังก์ชันนี้ไปใช้กับ Sketch
นักออกแบบที่ให้ความสำคัญกับเวลาในการโหลดและการปรับแต่งรูปภาพ (ซึ่งควรเป็นนักออกแบบทั้งหมด) ควรเพิ่ม ImageOptim ลงในกล่องเครื่องมือของตน โปรดทราบว่าเช่นเดียวกับปลั๊กอินคุณจะต้องติดตั้งแอป ImageOptim หลัก (ฟรี) ในระบบ macOS ของคุณและคุณยังต้องทำเครื่องหมายเลเยอร์ว่าสามารถส่งออกได้ใน Sketch (ไปที่ "ส่งออกและเพิ่มประสิทธิภาพเนื้อหาทั้งหมด" เพื่อเริ่มต้น)
07. กระจกวิเศษ
- ดาวน์โหลดที่นี่
- ราคา: จาก $ 4 / เดือน
- สรุป: เครื่องมือการเปลี่ยนแปลงมุมมองภาพ
หากคุณกำลังพยายามสร้างภาพจำลองผลิตภัณฑ์ที่น่าประทับใจ แต่ต้องกระโดดเข้าสู่ Photoshop เพื่อจัดการกับสิ่งที่ยุ่งยาก Magic Mirror อาจช่วยชีวิตคุณได้ เป็นเครื่องมือเปลี่ยนมุมมองของภาพที่ช่วยให้คุณสร้างภาพจำลองมุมมองและเอฟเฟกต์ที่ผิดเพี้ยนอื่น ๆ ได้โดยไม่ต้องออกจาก Sketch
08. ส่งออกมากขึ้น
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: สร้างภาพตัวแทนโดยอัตโนมัติ
การเพิ่มภาพตัวยึดตำแหน่งลงในการออกแบบเป็นส่วนที่จำเป็นในการสร้างต้นแบบ แต่การค้นหาภาพจริงอาจเป็นเรื่องยาก ดังนั้นแทนที่จะเสียเวลากับมันทิ้งทุกอย่างไว้ที่ Day Player วิธีนี้ช่วยให้คุณสามารถเพิ่มภาพตัวยึดตำแหน่งที่กำหนดเองลงในเอกสาร Sketch ใด ๆ จากบริการภาพตัวยึดตำแหน่งต่างๆได้ดังนั้นการตัดสินใจที่สำคัญที่สุดที่คุณจะต้องทำก็คือว่าคุณต้องการใช้ Bill Murray, Nicolas Cage หรือลูกแมวหรือไม่
11. ตลาด
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: สร้างเพจ html ที่สามารถวัดและรับสไตล์ CSS
หากคุณต้องการดึงสไตล์ CSS จากการออกแบบ Sketch ของคุณปลั๊กอินอย่าง Marketch เป็นสิ่งจำเป็นอย่างยิ่ง ช่วยให้คุณสามารถส่งออก Sketch artboards ของคุณเป็นไฟล์ zip ที่เต็มไปด้วยเอกสาร HTML ซึ่งคุณสามารถแยกออกมาเพื่อดึง CSS ที่น่ารักออกมามากมายพร้อมใช้งาน
12. แบ่งส่วนวงกลม
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: สร้างกราฟิกวงกลมที่แม่นยำ
นี่เป็นวิธีที่รวดเร็วในการสร้างวงกลมที่แบ่งกลุ่มสำหรับแผนภูมิและไดอะแกรม ปลั๊กอินนี้สามารถสร้างรูปแบบต่างๆของแผนภาพวงกลมรวมถึงวงกลมเส้นประและเครื่องหมายถูกและความหนาจะถูกควบคุมผ่านรายการค่าที่คั่นด้วยจุลภาคอย่างง่าย
13. นักวิ่งร่าง
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: สปอตไลท์สำหรับการค้นหา
Sketch เป็นที่ชื่นชอบสำหรับขั้นตอนการทำงานของแป้นพิมพ์ที่เรียบง่าย ดังที่กล่าวมามีแป้นพิมพ์ลัดสองหรือสามปุ่มที่คุณมักจะลืมหรือสับสนกับแอปออกแบบอื่น ๆ เช่น Photoshop และอย่าลืมเครื่องมือและคุณสมบัติทั่วไปที่ไม่มีแป้นพิมพ์ลัดและซ่อนอยู่ในส่วนลึก เมนูร่าง
Sketch Runner ช่วยแก้ปัญหาเหล่านี้และทำได้ในแบบที่ผู้ใช้ macOS คุ้นเคย - Sketch Runner คือ macOS Spotlight แต่สำหรับ Sketch
14. แบบอักษรไอคอน
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: จัดการแบบอักษรไอคอน
แบบอักษรไอคอนเป็นวิธีที่มีประสิทธิภาพสูงในการใช้ไอคอนในการออกแบบเว็บของคุณโดยไม่ต้องส่งออกและปรับแต่งเนื้อหารูปภาพจำนวนมาก โดยปกติเราจะอ้างอิงแบบอักษรไอคอนในไฟล์ หัว> ส่วนของหน้าเว็บ HTML เช่นเดียวกับ CSS และ JavaScript อย่างไรก็ตามการใช้งานใน Sketch นั้นซับซ้อนกว่าเล็กน้อย โชคดีที่ Icon Font ทำให้เป็นเรื่องง่าย
หลังจากดาวน์โหลดและติดตั้ง Sketch IconFont แล้วให้ดาวน์โหลดไฟล์ฟอนต์ SVG หรือดาวน์โหลดชุดฟอนต์นี้ซึ่งรวมถึงไฟล์ฟอนต์สำหรับ FontAwesome, Material Design Icons, Ion Icons และ Simple Line Icons เมื่อคุณทำเสร็จแล้วให้ไปที่ Plugins> Icon Font> ติดตั้ง Font-Bundle เลือกแบบอักษรที่ดาวน์โหลดจากกล่องโต้ตอบ Open File จากนั้นไปที่ Plugins> Icon Font> Grid Insert> [แบบอักษรไอคอนที่คุณต้องการ] เพื่อแทรก ไอคอน
แม้ว่าคุณจะตั้งใจออกแบบชุดไอคอนที่กำหนดเองสำหรับงานออกแบบของคุณ แต่การมีไอคอนสำเร็จรูปพร้อมให้คุณใช้งานสามารถช่วยคุณในการสร้างต้นแบบอย่างรวดเร็วในช่วงแรกของการออกแบบซึ่งจะเพิ่มความชัดเจน / ความเที่ยงตรงให้กับการจำลองความเที่ยงตรงต่ำ .
15. ค้นหาและแทนที่
- ดาวน์โหลดที่นี่
- ราคา: ฟรี
- สรุป: ค้นหาและแทนที่ข้อความในเลเยอร์ที่เลือก
โปรแกรมแก้ไขข้อความไม่ใช่ที่เดียวที่คุณต้องการค้นหาและแทนที่ แต่ยังมีประโยชน์ใน Sketch ด้วย ปลั๊กอินนี้มีตัวเลือกขั้นสูงมากมายและช่วยให้คุณสามารถค้นหาอินสแตนซ์ของคำหรือวลีที่ต้องการในข้อความในเลเยอร์ที่เลือก (และทุกอย่างที่อยู่ภายใน) จากนั้นแทนที่ได้อย่างง่ายดาย
หน้าถัดไป: ปลั๊กอิน Sketch ที่ประหยัดเวลาเพิ่มเติม
