10 δωρεάν προσθήκες σκίτσων για προγραμματιστές Ιστού

Το σκίτσο παίρνει πολλή πρόσφυση μεταξύ των σχεδιαστών ιστοσελίδων και των προγραμματιστών. Αυτό πιθανότατα συμβαίνει επειδή είναι διαισθητικό, εύκολο στην εκμάθηση και έρχεται με πολλά χαρακτηριστικά που καθιστά πολύ πιο εύκολο να δημιουργηθεί ένα πρωτότυπο ιστότοπου. Μπορεί επίσης να οφείλεται στο γεγονός ότι αυτή η εφαρμογή είναι επεκτάσιμη, δηλ. Μπορείτε εύκολα να προσθέσετε νέες λειτουργίες στην εφαρμογή με τη βοήθεια plugin.

Εδώ είναι 10 plugins που μπορούν να σας βοηθήσουν να αυξήσετε την παραγωγικότητά σας όταν εργάζεστε με το Sketch. Υπάρχουν ποικίλες ποικιλίες, που κυμαίνονται από γεννήτριες περιεχομένου, επιλογέα παλέτας χρωμάτων και μπορούν να σας βοηθήσουν να εμφανίσετε μετρήσεις στρώματος ή να προσθέσετε αυτόματα την επένδυση σε ένα στρώμα.

1. CSS Buddy

CSS Buddy σας επιτρέπει να προσθέσετε το CSS στο στρώμα σας στο χώρο εργασίας Sketch. Βασικά, μπορείτε να εφαρμόσετε το πλάτος, το ύψος, την αδιαφάνεια, τη σκιά κουτιού, τα σύνορα και το φόντο στο στρώμα χρησιμοποιώντας το CSS.

Με αυτό το πρόσθετο, απλά επιλέξτε ένα επίπεδο και, στη συνέχεια, επιλέξτε Εφαρμόστε στην επιλεγμένη από το μενού plugin. Ένα παράθυρο διαλόγου θα σας ζητήσει να εισαγάγετε το φύλλο στυλ σας. Προσθέστε το περιεχόμενο CSS χωρίς την κλάση CSS και παρακολουθήστε το στρώμα σας να διαμορφωθεί.

2. Παλέτα χρωμάτων σχεδίασης υλικών

Αν ακολουθήσετε την τάση του Υλικού Σχεδιασμού, ένα σημαντικό πράγμα που θα παρατηρήσετε είναι η χρήση των διακριτών χρωμάτων. Το σχέδιο υλικών έχει μια φοβερή χρωματική παλέτα. Τώρα μπορείτε να το φέρετε στο χώρο εργασίας σας Σχεδίαση υλικών Plug Color Palette.

Αυτό το πρόσθετο θα δημιουργήσει παλέτες χρωμάτων σε δευτερόλεπτα χωρίς να χρειάζεται να κλείσετε το χώρο εργασίας σας. Επιλέξτε Hue, Value, ή Swatch για να δημιουργήσετε μια παλέτα χρωμάτων που είναι κατάλληλη για το έργο σας.

3. Sketch Notebook

Μερικές φορές πρέπει να δείξουμε τι κάνουμε σε ένα σχόλιο ή μέσω τεκμηρίωσης. Εάν εργάζεστε σε έργα με άλλους σχεδιαστές ή σε ανάμειξη ενός πελάτη, αυτό είναι επίσης απαραίτητο για να διασφαλίσετε ότι το αποτέλεσμα είναι αυτό που όλοι στόχευσαν.

Sketch Notebook είναι ένα plugin για την τεκμηρίωση του σχεδίου σας στο Sketch με ευκολία. Θα προσθέσει μια πρόσθετη πλαϊνή γραμμή στο χώρο εργασίας σας, η οποία περιέχει σχόλια που προσθέτετε σε οποιοδήποτε στοιχείο του σχεδίου σας. Μπορείτε να αναδιατάξετε το σχόλιο, να επαναπροσδιορίσετε, να διαγράψετε και να αλλάξετε την ορατότητα των σχολίων.

4. Παίκτης ημέρας

Πριν από τη χρήση πραγματικών εικόνων σε ένα σχέδιο, χρησιμοποιούμε συχνά εικόνες placeholder για να επιταχύνουμε τη διαδικασία σχεδιασμού. Για το Σκίτσο, μπορείτε να χρησιμοποιήσετε Παίκτης ημέρας για να προσθέσετε προσαρμοσμένες εντολές κράτησης θέσης σε οποιοδήποτε στρώμα του χώρου εργασίας σκίτσων από 6 υπηρεσίες εικονικής θέσης, όπως Placehold.it, LoremPixel και Unsplash. Μόλις ενεργοποιηθεί, μπορείτε να ρυθμίσετε το πλάτος, το ύψος και άλλες πληροφορίες της εικόνας.

5. Γεννήτρια Περιεχομένου

Έχουμε ήδη μια προσθήκη για να εισαγάγουμε εικόνες με σύμβολα κράτησης θέσης, πώς για ένα για γενικό περιεχόμενο? Γεννήτρια Περιεχομένου σας βοηθά να προσθέσετε εικονικά δεδομένα, όπως είδωλα, ονόματα, δεδομένα γεωγραφικής κατανομής και άλλα. Δουλεύει τέλεια για σχέδια mockup και για τη μείωση των πονοκεφάλων από την προσπάθεια να καταλάβουμε πώς να παράγουμε δεδομένα επί τόπου.

Για να προσθέσετε τα ψεύτικα δεδομένα, απλά επιλέξτε ένα στρώμα και, στη συνέχεια, επιλέξτε Plugin> Γεννήτρια, και επιλέξτε Geo, Προσωπικότητα ή Φωτογραφίες.

6. Μέτρο σκίτσου

Μέτρο σκίτσου είναι ένα εργαλείο μέτρησης για το Sketch. Μετράει το μήκος ή το μέγεθος ενός στρώματος (ή στρώματα) στο σχέδιό σας. Παίρνετε επίσης την επένδυση και περιθώριο ενός στρώματος καθώς και την απόσταση μεταξύ δύο στρωμάτων. Το Sketch Measure μπορεί επίσης να εκτυπώσει τις ιδιότητες του στρώματος, όπως χρώμα, περίγραμμα και αδιαφάνεια. Όλες οι μετρήσεις μπορούν να εμφανιστούν μέσω συντομεύσεων πληκτρολογίου.

7. Δυναμικό κουμπί

Δυναμικό κουμπί σας βοηθά να δημιουργήσετε εύκολα το κουμπί με σταθερά paddings. Θα προσαρμόσει αυτόματα την επένδυση με βάση την αξία που δίνετε, ανεξάρτητα από το μήκος του κειμένου σας. Με το plugin που έχει εγκατασταθεί, ένα κείμενο μπορεί να μετατραπεί σε δομή με τη συντόμευση Command + J. Η ποσότητα του απαιτούμενου συμπληρώματος μπορεί στη συνέχεια να εισχωρήσει στο στρώμα κειμένου (0: 0: 0: 0) (κάτω από την ομάδα κουμπιών flex).

8. Τυπογραφική κλίμακα

Η τυπογραφική κλίμακα είναι ένα πρόσθετο για να μετατρέψει το επιλεγμένο στρώμα κειμένου σε τυπογραφική κλίμακα. Για να χρησιμοποιήσετε αυτό το πρόσθετο, απλά επιλέξτε στρώμα κειμένου (μονής ή πολλαπλής) ή μεικτό στρώμα που περιέχει τουλάχιστον ένα στρώμα κειμένου, στη συνέχεια επιλέξτε Plugin> Τυπογραφική κλίμακα και προσαρμόστε την τιμή στο παράθυρο διαλόγου. Το αποτέλεσμα είναι ένα σύνολο κλιμακωτών κειμένων που ακολουθούν τους κανόνες της τυπογραφικής κλίμακας.

9. Μονωτικό

Με Modulizer μπορείτε να ελέγξετε τα κουμπιά για το κουμπί, την ενότητα ή τις περιοχές του σχεδίου σας με τη συντόμευση πληκτρολογίου Shift + Command + M. Μπορείτε να συνδυάσετε όλα τα επίπεδα, να ομαδοποιήσετε τη χρήση της συντόμευσης για να προσαρμόσετε αυτόματα το padding σας με βάση την τιμή padding που χρειάζεστε . Παρακολουθήστε το βίντεο επίδειξης για να δείτε αυτό σε δράση.

10. Λεπίδα

Έχετε σκεφτεί ποτέ να μετατρέψετε το σχέδιό σας από σκίτσο σε HTML; Εάν ναι, θα πρέπει πιθανώς να πάρετε Λεπίδα, ένα πρόσθετο Sketch που δημιουργεί αυτόματα αρχεία HTML από το σχέδιό σας. Θα μετατρέψει την ομάδα σε div, κείμενο σε Π και ούτω καθεξής.

Όταν χρησιμοποιείτε το Blade, μπορείτε να πείτε στο πρόσθετο ποιο στοιχείο DOM θα δημιουργήσει προσθέτοντας ένα ειδικό όνομα στο στρώμα, όπως το [btn] ή το input [text], έτσι Blade ξέρει τι πρέπει να κάνει. Δείτε αυτό το demo βίντεο για μια εσωτερική εμφάνιση.

Τώρα διαβάστε: 12 χρήσιμες προσθήκες για προγραμματιστές WordPress