10 Sketch Sketch ฟรีสำหรับนักพัฒนาเว็บ

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

ต่อไปนี้คือ 10 ปลั๊กอินที่สามารถช่วยคุณเพิ่มประสิทธิภาพการทำงานของคุณเมื่อทำงานกับ Sketch มีหลากหลายตั้งแต่ตัวสร้างเนื้อหาตัวเลือกจานสีและพวกเขาสามารถช่วยคุณในการแสดงการวัดเลเยอร์หรือเพิ่มการเติมเต็มไปยังเลเยอร์โดยอัตโนมัติ.

1. CSS บัดดี้

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

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

2. การออกแบบวัสดุสี Palette

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

ปลั๊กอินนี้จะสร้างจานสีในไม่กี่วินาทีโดยไม่ต้องปิดพื้นที่ทำงานของคุณ เลือก Hue, Value หรือ Swatch เพื่อสร้างจานสีที่เหมาะกับโครงการของคุณ.

3. สมุดบันทึกร่าง

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

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

4. ผู้เล่นรายวัน

ก่อนที่จะใช้ภาพจริงในการออกแบบเรามักจะใช้ภาพตัวยึดเพื่อเร่งกระบวนการออกแบบ สำหรับ Sketch คุณสามารถใช้ ผู้เล่นรายวัน เพื่อเพิ่มตัวแทนที่กำหนดเองลงในเลเยอร์ใด ๆ ในพื้นที่ทำงาน Sketch ของคุณจากบริการรูปภาพตัวแทน 6 รายการรวมถึง Placehold.it, LoremPixel และ Unsplash เมื่อเปิดใช้งานคุณสามารถตั้งค่าความกว้างความสูงและข้อมูลอื่น ๆ ของภาพ.

5. เครื่องกำเนิดเนื้อหา

เรามีปลั๊กอินสำหรับแทรกรูปภาพตัวยึดแล้วหนึ่งอันสำหรับเนื้อหาทั่วไป? เครื่องมือสร้างเนื้อหา ช่วยให้คุณเพิ่มข้อมูลดัมมี่เช่นอวตารชื่อข้อมูลตำแหน่งทางภูมิศาสตร์และอื่น ๆ ใช้งานได้ดีสำหรับการออกแบบจำลองและลดอาการปวดหัวจากการพยายามหาวิธีสร้างข้อมูลในจุดที่ต้องการ.

ในการเพิ่มข้อมูลหุ่นจำลองให้เลือกเลเยอร์จากนั้นเลือก ปลั๊กอิน> ตัวสร้าง, และเลือก ภูมิศาสตร์, บุคคล หรือ ภาพถ่าย.

6. ร่างการวัด

ร่างการวัด เป็นเครื่องมือวัดสำหรับ Sketch มันวัดความยาวหรือขนาดของชั้น (หรือชั้น) ในการออกแบบของคุณ คุณยังได้รับช่องว่างภายในและระยะขอบของชั้นรวมทั้งระยะห่างระหว่างสองชั้น การวัดแบบร่างยังสามารถพิมพ์คุณสมบัติเลเยอร์เช่นสีเส้นขอบและความทึบ การวัดทั้งหมดสามารถนำขึ้นมาผ่านทางแป้นพิมพ์ลัด.

7. ปุ่มแบบไดนามิก

ปุ่มแบบไดนามิก ช่วยให้คุณสร้างปุ่มที่มีช่องว่างคงที่ได้อย่างง่ายดาย มันจะปรับ padding โดยอัตโนมัติตามค่าที่คุณให้ไม่ว่าข้อความของคุณจะยาวเท่าใดก็ตาม เมื่อติดตั้งปลั๊กอินข้อความจะถูกแปลงเป็นโครงสร้างด้วยแป้นพิมพ์ลัด Command + J จำนวนของการเติมที่ต้องการสามารถถูกเจาะเข้ากับเลเยอร์ข้อความ (0: 0: 0: 0) (ภายใต้กลุ่มปุ่มดิ้น).

8. ขนาดตัวอักษร

สเกล Typographic เป็นปลั๊กอินเพื่อเปลี่ยนเลเยอร์ข้อความที่เลือกเป็นสเกลของตัวอักษร ในการใช้ปลั๊กอินนี้เพียงเลือกเลเยอร์ข้อความ (ชั้นเดียวหรือหลายชั้น) หรือเลเยอร์ผสมที่มีเลเยอร์ข้อความอย่างน้อยหนึ่งชั้นจากนั้นเลือก ปลั๊กอิน> มาตราส่วนแบบตัวพิมพ์ และปรับค่าในกล่องโต้ตอบ ผลที่ได้คือชุดของข้อความที่ปรับขนาดที่เป็นไปตามกฎของระดับตัวพิมพ์.

9. โมดูไลเซอร์

กับ Modulizer คุณสามารถควบคุมการเติมสำหรับปุ่มโมดูลหรือพื้นที่ในการออกแบบของคุณด้วยแป้นพิมพ์ลัด Shift + Command + M คุณสามารถรวมเลเยอร์ทั้งหมดของคุณจัดกลุ่มแล้วใช้ทางลัดเพื่อปรับการแพ็ดโดยอัตโนมัติตามค่าช่องว่างที่คุณต้องการ . ดูวิดีโอสาธิตเพื่อดูการทำงาน.

10. ใบมีด

คุณเคยคิดที่จะแปลงการออกแบบของคุณจากแบบร่างเป็น HTML หรือไม่? ถ้าเป็นเช่นนั้นคุณอาจจะได้รับ ใบมีด, ปลั๊กอิน Sketch ที่สร้างไฟล์ HTML โดยอัตโนมัติจากการออกแบบของคุณ มันจะแปลงกลุ่มเป็น div, ข้อความเป็น พี และอื่น ๆ.

เมื่อใช้เบลดคุณสามารถบอกปลั๊กอินที่จะสร้างองค์ประกอบ DOM โดยเพิ่มชื่อพิเศษให้กับเลเยอร์เช่น [btn] หรืออินพุต [ข้อความ] ดังนั้นเบลดจะรู้ว่าควรทำอย่างไร ลองชมตัวอย่างวิดีโอนี้เพื่อดูภายใน.

อ่านแล้ว: 12 ปลั๊กอินที่มีประโยชน์สำหรับนักพัฒนา WordPress