เครื่องมือออกแบบมีการปรับปรุงอย่างต่อเนื่องและมีจำนวนมากขึ้นเข้าสู่ตลาดทุกวัน ( InVision Studio , ตัวอย่างเช่น). ดังที่กล่าวมาเครื่องมือออกแบบสมัยใหม่เช่น Sketch ถูกสร้างขึ้นให้เหลือน้อยที่สุดโดยที่เครื่องมือถูกตั้งค่าให้ลบคุณสมบัติที่ไม่จำเป็นทั้งหมดออกไป เป็นเรื่องปกติที่จะสร้างฟังก์ชันเพิ่มเติมเมื่อจำเป็นเท่านั้นและนี่คือจุดที่เราเข้าสู่โลกที่น่าตื่นเต้นของการพัฒนาปลั๊กอิน Sketch
การพัฒนาปลั๊กอิน Sketch สามารถช่วยได้ นักออกแบบ เพื่อรับแง่มุมทางเทคนิคว่า Sketch ใช้งานได้จริงและทำให้พวกเขาสามารถทำงานซ้ำ ๆ โดยอัตโนมัติได้ ปลั๊กอิน Sketch สร้างขึ้นด้วยรหัสและ Sketch JavaScript API แต่เนื่องจากนักออกแบบไม่จำเป็นต้องเป็นนักพัฒนาที่เชี่ยวชาญในการใช้ API นี้บทช่วยสอนนี้จึงสาธิตวิธีการเขียนโค้ดปลั๊กอินเพื่อลดความซับซ้อนของกระบวนการออกแบบและปรับปรุงขั้นตอนการทำงานใน Sketch
ปลั๊กอินร่างที่เรียบง่าย แต่มีประโยชน์มาก
บ่อยมาก, นักออกแบบร่าง มีปลั๊กอิน Sketch อย่างน้อยสามหรือสี่ตัวติดตั้ง ปลั๊กอินด้านล่างนี้มีลักษณะพื้นฐานอยู่บ้าง แต่มักใช้กันเนื่องจากประหยัดเวลาได้มาก
- เปลี่ยนชื่อมัน (เปลี่ยนชื่อหลายชั้นพร้อมกัน)
- เรียงลำดับฉัน (ช่วยจัดลำดับเลเยอร์ใหม่อย่างมีเหตุผล)
- UnsplashIt (ดึงภาพจาก Unsplash)
- ตัวสร้างเนื้อหา (สร้างชื่อปลอมและข้อมูล 'ของจริง' อื่น ๆ )
หากคุณอยากรู้อยากเห็นว่าปลั๊กอิน Sketch สามารถทำอะไรได้บ้างลองดูรายการ 50 ปลั๊กอิน Sketch .
พื้นฐาน JavaScript ในเวลาน้อยกว่า 2 นาที
ก่อนที่คุณจะเริ่มเขียนโค้ดคุณจะต้องเรียนรู้บางสิ่งเกี่ยวกับไวยากรณ์ของ JavaScript (นั่นคือรูปแบบของวิธีการเขียนโค้ด) สิ่งนี้ไม่เพียง แต่จะช่วยให้คุณเขียนโค้ดสำหรับปลั๊กอิน Sketch ของคุณเท่านั้น แต่ยังช่วยให้คุณเข้าใจวิธีการทำงานของโค้ดได้ดีขึ้น
ความคิดเห็น
เริ่มต้นด้วยความคิดเห็นรหัส
ความคิดเห็นเกี่ยวกับโค้ดเป็นเหมือนบันทึกย่อที่ซ่อนอยู่ซึ่งไม่ได้มุ่งเน้นผู้ใช้และจะไม่ปรากฏในปลั๊กอิน Sketch ที่เป็นผลลัพธ์ นักพัฒนามักใช้ความคิดเห็นเกี่ยวกับโค้ดเหล่านี้เพื่ออธิบายโค้ดที่ถูกเขียนขึ้นดังนั้นหากนักพัฒนารายอื่นอ่านโค้ดหรือหากพวกเขากลับไปที่โค้ดในภายหลังพวกเขาจะเข้าใจสิ่งที่เขียนและวิธีการทำงาน
ความแตกต่างระหว่าง s corp vs c corp
// this is a single-line comment /* This is a multiline comment */ ตัวแปร
ตัวแปรเป็นเหมือนคอนเทนเนอร์เล็ก ๆ ที่ใช้เก็บค่า ตัวอย่างเช่น:
var firstName = 'Manuele Capacci'; // the variable firstName now equals 'Manuele Capacci' ในการดึงค่านี้คุณต้องใช้ตัวแปร ตัวอย่างเช่น:
log(firstName); // esto grabará 'Manuele Capacci' en la consola 
วัตถุ
ออบเจ็กต์สามารถจัดเก็บตัวแปรได้หลายตัวเช่นนี้
var user = { firstName: 'Manuele', lastName: 'Capacci', age: 28, role: 'Product Designer' } สังเกตว่าค่า `` อายุ '' ไม่อยู่ในเครื่องหมายคำพูด เนื่องจากเครื่องหมายคำพูดจะกำหนดตัวแปรเป็นสตริงซึ่งหมายความว่าผลลัพธ์ที่คาดหวังจะต้องเป็นตัวอักษร เราไม่ต้องการสิ่งนั้น เราต้องการให้ตัวแปรถูกกำหนดเป็นจำนวนเต็มเพื่อให้เราสามารถดำเนินการทางคณิตศาสตร์ได้ การใส่เครื่องหมายคำพูดรอบ ๆ ค่าจะเป็นการกำหนดค่าเป็นสตริงอย่างไม่พึงปรารถนา
เราสามารถใช้ตัวแปรของออบเจ็กต์ได้ดังนี้
// using the object's variables user.firstName; user.lastName; user.age; user.role; อาร์เรย์
อาร์เรย์เป็นวัตถุประเภทหนึ่งที่ง่ายกว่า:
var users = ['Manuele', 'Daniel', 'Miklos'] // 'users' is an array that contains a list of names user[0]; // this equals 'Manuele' user[1]; // this equals 'Daniel' user[2]; // this equals 'Miklos' คุณสมบัติ
คุณสมบัติต่างๆสามารถนำไปใช้ได้จริง - ทำ บางอย่าง ในตัวอย่างต่อไปนี้ฟังก์ชันจะคำนวณผลรวมของ a และ b. ในตัวอย่างนี้ a มันคือ 2 และ b มันคือ 3 .
// a function declaration function sum(a, b) { return a + b; } // calling the function sum(2, 3); // this equals 5 // recapitulando lo que hemos aprendido hasta ahora var total = sum(2, 3); // la variable 'total' será igual a 5 log(sum(2, 3)); // esto dará como resultado 5 en la consola log(total); // esto también dará como resultado 5 en la consola งบเงื่อนไข
คำสั่งเงื่อนไขจะรันโค้ดภายในวงเล็บเท่านั้นหากตรงตามเงื่อนไขที่ระบุ ในตัวอย่างต่อไปนี้โค้ดจะทำงานทันทีเนื่องจากค่าของ firstName ในความเป็นจริงมันเท่ากับ 'Manuele'; ดังนั้นรหัส else if และ else ไม่ทำงาน
var firstName = 'Manuele'; if(firstName == 'Manuele') { // hacer algo por Manuele } más si(firstName == 'Daniel') { // haz algo por Daniel } más { // hacer algo por alguien más } มาลองเขียนโค้ดพื้นฐานใน Sketch กันดีกว่า
เขียนโค้ดบรรทัดแรกของคุณใน Sketch
ไปที่ 'Plugins → Run Script' ใน Sketch ในหน้าต่างการเขียนสคริปต์นี้คุณสามารถเขียนโค้ดเพื่อทำให้สิ่งต่างๆเกิดขึ้นใน Sketch (เช่นการเปลี่ยนชื่อเลเยอร์) จากนั้นรวมโค้ดนี้ลงในปลั๊กอิน Sketch ด้วย .sketchplugin ประเภทไฟล์
ด้านล่าง: นี่คือลักษณะของหน้าต่างสคริปต์ในครั้งแรกที่คุณเปิด คุณอาจเห็นโค้ดบางอย่างที่คุณไม่คุ้นเคย แต่คุณจะได้เรียนรู้เพิ่มเติมเล็กน้อยเกี่ยวกับ JavaScript ไปพร้อมกัน รหัสเริ่มต้นที่มีอยู่แล้วในหน้าต่างนี้จะบอกชื่อของเอกสารร่างการเลือกเลเยอร์ในขณะนี้และอื่น ๆ
ในตอนนี้ให้ลบรหัสทั้งหมดในหน้าต่างนี้และแทนที่ด้วย:
log('Hello Sketch'); สิ่งที่คุณกำลังทำอยู่นี้เรียกว่า log และส่งสตริง Hello Sketch เป็นข้อโต้แย้ง บันทึกนี้สามารถเข้าถึงได้เฉพาะเบื้องหลังซึ่งทำให้มีประโยชน์สำหรับการดีบักโค้ดเมื่อสิ่งต่างๆไม่ทำงานตามที่คาด หากคุณคลิกปุ่ม 'เรียกใช้' อาร์กิวเมนต์ Hello Sketch มันจะเข้าสู่คอนโซลใต้หน้าต่างสคริปต์
มาเจาะลึกกันหน่อย
สร้างปลั๊กอินเพื่อเปลี่ยนชื่อเลเยอร์ร่าง
ตอนนี้คุณสามารถใช้ความรู้เกี่ยวกับสคริปต์ JavaScript และ Sketch เพื่อสร้างสคริปต์ที่เปลี่ยนชื่อหลายเลเยอร์พร้อมกัน Rodrigo Soares สร้าง ปลั๊กอิน RenameIt ซึ่งทำได้เหมือนกันและประหยัด นักออกแบบ ใช้เวลานาน - มาสร้างเวอร์ชันที่เรียบง่าย อย่าลืมสร้างเลเยอร์ร่างบางส่วนเพื่อให้คุณสามารถทดสอบสคริปต์ของคุณได้
ราคาความยืดหยุ่นของอุปสงค์
รหัสต้องขึ้นต้นด้วยบรรทัดที่ซ้ำกัน คุณต้องใช้ Application Programming Interface (API) ของ Sketch - นี่เป็นคำที่แปลกสำหรับวัตถุพิเศษที่คุณต้องการหากคุณต้องการโต้ตอบกับ Sketch อย่างมีความหมาย ตั้งชื่อออบเจ็กต์ API พิเศษนี้ sketch
เห็นได้ชัดว่าเพียงแค่เปลี่ยนชื่อเลเยอร์ที่เลือกในปัจจุบัน คุณจะทราบได้อย่างไรว่าเลเยอร์ใดถูกเลือกอยู่ในปัจจุบัน? Sketch JavaScript API เป็นวิธีที่สะดวกในการรับข้อมูลนี้ด้วยโค้ดเพียงบรรทัดเดียว
นี่คือวิธีการทำทั้งหมดนี้ด้วยโค้ด JavaScript:
// asignar el objeto API a una variable var sketch = context.api(); // asignar capas actualmente seleccionadas a una variable var selection = sketch.selectedDocument.selectedLayers; ข้อมูลทั้งหมดเกี่ยวกับเลเยอร์ที่เลือกในปัจจุบันมีอยู่ในตัวแปร selection ตอนนี้คุณเพียงแค่ต้อง 'ทำซ้ำ' (เรียกใช้โค้ดซ้ำ ๆ ) บนเลเยอร์เพื่อเปลี่ยนชื่อ
เพื่อประโยชน์ในการทดสอบให้เปลี่ยนชื่อแต่ละเลเยอร์เป็น 'เปลี่ยนชื่อเลเยอร์'
เพิ่มรหัสนี้ต่อท้ายสคริปต์ของคุณ:
selection.iterate(function(layer) { // for every selected layer layer.name = 'Renamed Layer'; // rename to 'Renamed Layer' }) เมื่อคุณกด 'เรียกใช้' คุณจะเห็นว่าแต่ละเลเยอร์ถูกเปลี่ยนชื่อเป็น 'เปลี่ยนชื่อเลเยอร์' แต่ผู้ใช้จะถูกถามว่าชื่อของเลเยอร์ใหม่ควรเป็นอย่างไร มาปรับบท:
// pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName }) หน้าต่างป๊อปอัปจะปรากฏขึ้นเพื่อขอให้ผู้ใช้ระบุชื่อใหม่สำหรับเลเยอร์
หากคุณไม่แน่ใจว่าจะเข้าถึงบริบทบางอย่างได้อย่างไรเช่นเลเยอร์ที่เลือกในปัจจุบันหรือวิธีเปิดเผยช่องป้อนข้อมูลของผู้ใช้ (เช่นในสถานการณ์ก่อนหน้านี้) คุณสามารถอ่านเอกสารอย่างเป็นทางการได้ เอกสารสำหรับนักพัฒนาร่าง ซึ่งจะแสดงรหัสที่ต้องใช้
เมื่อคุณพร้อมที่จะดำเนินการต่อให้กดปุ่ม 'บันทึก ... ' ที่มุมล่างซ้ายของหน้าต่างสคริปต์และตั้งชื่อสคริปต์ ตอนนี้คุณจะพบปลั๊กอิน Sketch นี้ที่สามารถเข้าถึงได้จากเมนู Sketch ภายใต้ 'ปลั๊กอิน' เช่นเดียวกับปลั๊กอิน Sketch อื่น ๆ
การเปลี่ยนชื่อเลเยอร์ใน Sketch - รหัสที่สมบูรณ์
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; // pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // para cada capa seleccionada layer.name = newLayerName; // renombrar al valor de newLayerName }) การสร้างปลั๊กอินร่าง 'เลือกเลเยอร์ทั้งหมดในกลุ่ม'
ตอนนี้เราจะสร้างสิ่งที่ซับซ้อนขึ้นเล็กน้อย ปลั๊กอิน Sketch ต่อไปนี้จะเลือกเลเยอร์ทั้งหมดภายในกลุ่มโดยอัตโนมัติซึ่งคุณสามารถปรับให้รวมเฉพาะเลเยอร์ข้อความหรือเลเยอร์รูปร่างเท่านั้นหรืออาจตรวจจับประเภทเลเยอร์โดยอัตโนมัติและเลือกเฉพาะเลเยอร์ของประเภทนั้น
ก่อนหน้านี้เรามาเริ่มต้นด้วยการกำหนดบริบท จากนั้นคุณสามารถวนซ้ำ / ทำซ้ำในเลเยอร์ภายในบริบทนั้นและเลือกโดยอัตโนมัติ
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo innerLayer.addToSelection(); // agregarlo a la selección }); layer.deselect(); // deseleccionar el grupo } }); ด้วยรหัสนี้เลเยอร์ทั้งหมดภายในกลุ่มที่เลือกในปัจจุบันจะถูกเลือก (ตราบเท่าที่เลือกไว้บางส่วน) ในขณะเดียวกันกลุ่มเองก็จะ จาก เลือกแล้ว
หากต้องการปรับแต่งสคริปต์นี้เพิ่มเติมคุณสามารถรวมคำสั่งเงื่อนไขที่ตรวจสอบว่าเลเยอร์นั้นเป็นประเภทเฉพาะหรือไม่ สมมติว่าคุณต้องการเลือกเลเยอร์ทั้งหมดโดยเฉพาะ ข้อความ ในกลุ่ม - ในการทำเช่นนั้นในการวนซ้ำแต่ละครั้งให้ตรวจสอบประเภทเลเยอร์ของแต่ละเลเยอร์ดังนี้:
if(innerLayer.isText) { innerLayer.addToSelection(); } 
วิธีการตั้งค่าผังบัญชี
เลือกเลเยอร์ข้อความทั้งหมดในกลุ่ม: รหัสที่สมบูรณ์
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo if(innerLayer.isText) { // solo si la capa es una capa de texto innerLayer.addToSelection(); // agregar a la selección } }); layer.deselect(); // deseleccionar el grupo } }); คุณสามารถปรับปรุงสคริปต์นี้ได้หลายวิธีโดยใช้ไฟล์ เอกสารประกอบ เป็นข้อมูลอ้างอิง:
- อนุญาตให้ผู้ใช้เลือกเฉพาะรูปร่าง
- อนุญาตให้ผู้ใช้เลือกเฉพาะภาพ
- ในกรณีที่ไม่มีการเลือกกลุ่มใด ๆ ให้เลือกกลุ่มหลักโดยอัตโนมัติโดยให้ผู้ใช้เลือกเลเยอร์ประเภทที่คล้ายกัน
- หากกลุ่มมีกลุ่มที่ซ้อนกันอยู่ภายในให้ดำเนินการในลักษณะเดียวกัน
ข้อสรุป
หากคุณอยากรู้เกี่ยวกับการพัฒนาปลั๊กอิน Sketch ที่นักออกแบบคนอื่น ๆ สามารถใช้ได้ลองดูที่ SKPM (โปรแกรมจัดการปลั๊กอิน Sketch) SKPM ช่วยให้นักออกแบบจัดแพคเกจปลั๊กอินในรูปแบบไฟล์ .sketchplugin ซึ่งทำให้ปลั๊กอินติดตั้งได้ ในระหว่างขั้นตอนนี้นักพัฒนาปลั๊กอินยังสามารถกำหนดแป้นพิมพ์ลัดสำหรับการทำงานของปลั๊กอินได้
นักออกแบบที่รู้วิธีโค้ดปลั๊กอิน Sketch คือไฟล์ นักออกแบบ ผู้ที่รู้วิธีปรับปรุงเวิร์กโฟลว์ของคุณและทำงานได้เร็วขึ้นเมื่อจำเป็นทำให้มีเวลามากขึ้นในการส่งมอบผลิตภัณฑ์คุณภาพสูง ไม่เพียงแค่นั้นการเรียนรู้ว่า Sketch ทำงานอย่างไรเบื้องหลังเป็นโอกาสที่ดีในการดำดิ่งสู่โลกของ JavaScript
