Τα εργαλεία σχεδίασης βελτιώνονται συνεχώς και όλο και περισσότερα εισέρχονται στην αγορά κάθε μέρα ( Στούντιο InVision , για παράδειγμα). Τούτου λεχθέντος, τα εργαλεία σύγχρονου σχεδιασμού όπως το Sketch έχουν δημιουργηθεί ώστε να είναι ελάχιστα, όπου το εργαλείο είναι έτοιμο να αφαιρέσει όλα τα μη απαραίτητα χαρακτηριστικά. Είναι τυπικό να δημιουργείτε πρόσθετες λειτουργίες μόνο όταν χρειάζεται, και εδώ μπαίνουμε στον συναρπαστικό κόσμο της ανάπτυξης προσθηκών Sketch.
Η ανάπτυξη προσθηκών Sketch μπορεί να βοηθήσει οι σχεδιαστές να αγκαλιάσουν την τεχνική πτυχή του πώς λειτουργεί πραγματικά το Sketch και να τους δοθεί η δυνατότητα αυτοματοποίησης επαναλαμβανόμενων εργασιών. Τα πρόσθετα σκίτσων γίνονται με κωδικό και Σκίτσο JavaScript API , αλλά επειδή οι σχεδιαστές δεν χρειάζεται να είναι ειδικοί προγραμματιστές για να χρησιμοποιήσουν αυτό το API, αυτό το σεμινάριο δείχνει πώς να κωδικοποιήσετε μια προσθήκη για να απλοποιήσετε μια διαδικασία σχεδίασης και να βελτιώσετε τη ροή εργασίας στο Sketch.
Απλές αλλά πολύ χρήσιμες προσθήκες σκίτσων
Πολύ συχνά, σχεδιαστές σκίτσων έχετε τουλάχιστον τρία ή τέσσερα πρόσθετα Sketch. Οι παρακάτω προσθήκες είναι κάπως βασικής φύσης, αλλά χρησιμοποιούνται συνήθως επειδή εξοικονομούν πολύ χρόνο.
- Μετονομασία (μετονομασία πολλαπλών επιπέδων ταυτόχρονα)
- Ταξινόμηση με (βοηθά στην αναδιάταξη των επιπέδων με λογικό τρόπο)
- UnsplashIt (ανακτά εικόνες από Unsplash)
- Δημιουργία περιεχομένου (δημιουργεί ψεύτικα ονόματα και άλλα 'πραγματικά' δεδομένα)
Αν είστε περίεργοι να δείτε τι μπορεί να επιτευχθεί με τα πρόσθετα Sketch, ρίξτε μια ματιά στην απόλυτη λίστα μας 50 προσθήκες σκίτσων .
Βασικά στοιχεία JavaScript σε λιγότερο από 2 λεπτά
Πριν ξεκινήσετε την κωδικοποίηση, θα πρέπει να μάθετε μερικά πράγματα σχετικά με τη σύνταξη JavaScript (δηλαδή, τη διατύπωση του πώς γράφεται ο κώδικας). Αυτό όχι μόνο θα σας βοηθήσει να γράψετε τον κωδικό για την προσθήκη Sketch, αλλά θα σας βοηθήσει να κατανοήσετε καλύτερα πώς και γιατί λειτουργεί ο κώδικας.
Σχόλια
Ας ξεκινήσουμε με τα σχόλια κώδικα.
Τα σχόλια κώδικα είναι σαν κρυφές σημειώσεις - δεν είναι προσανατολισμένες στο χρήστη και επομένως δεν θα εμφανίζονται στην προσθήκη Sketch που προκύπτει. Οι προγραμματιστές χρησιμοποιούν συχνά αυτά τα σχόλια κώδικα για να εξηγήσουν τον κώδικα που έχει γραφτεί, οπότε αν κάποιος άλλος προγραμματιστής διαβάσει τον κώδικα ή επιστρέψει στον κώδικα αργότερα, θα καταλάβει τι έχει γραφτεί και πώς λειτουργεί.
llc φορολογείται ως εταιρική ή εταιρική εταιρεία
// 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 , που επιτυγχάνει το ίδιο και σώζει σχεδιαστές πολύ καιρό - ας δημιουργήσουμε μια απλοποιημένη έκδοση. Φροντίστε να δημιουργήσετε κάποια επίπεδα σκίτσων ώστε να μπορείτε να ελέγξετε το σενάριό σας.
ποια γλώσσα προγραμματισμού χρησιμοποιείται για τη ρομποτική
Ο κωδικός πρέπει να ξεκινά με μια επαναλαμβανόμενη γραμμή. Πρέπει να χρησιμοποιήσετε τη διεπαφή προγραμματισμού εφαρμογών του Sketch (API) - αυτός είναι ένας φανταστικός όρος για ένα ειδικό αντικείμενο που θα χρειαστείτε εάν θέλετε να αλληλεπιδράσετε με το 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.
Μετονομασία επιπέδων σε σκίτσο - ο πλήρης κωδικός
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.
