Εισαγωγή του Diya - Χρονομετρία κινούμενων εικόνων απευθείας στο Sketch

Το Diya είναι ένα πρόσθετο σκίτσο που φέρνει κινούμενα σχέδια χρονικά, απευθείας στο Sketch. Όταν σχεδιάζουμε εφαρμογές ή ιστότοπους, χρησιμοποιούμε πολλαπλά εργαλεία για τη δημιουργία, το πρωτότυπο και τη ζωγραφική των σχεδίων μας. Αλλά το άλμα ανάμεσα στα εργαλεία μόνο για να δοκιμάσετε τις αλληλεπιδράσεις μας δεν είναι μια ιδανική ροή εργασίας. Ο στόχος του Diya είναι να γεφυρώσει αυτό το χάσμα φέρνοντας τις δυνατότητες κινούμενης εικόνας απευθείας στο Sketch.

Με το Diya, μπορείτε να μείνετε μέσα στο Sketch και να ζωντανέψετε τα σχέδιά σας με πλούσιες αλληλεπιδράσεις, να τα δείτε προεπισκόπηση και ακόμα και να μεταβιβαστείτε σε προγραμματιστές.

Το όνομά μου είναι Suresh V. Selvaraj. Είμαι από το Chennai της Ινδίας και είμαι ο ιδρυτής και κατασκευαστής της Diya. Επιτρέψτε μου να σας πάρω σε μια γρήγορη περιήγηση σε αυτό που μπορείτε να επιτύχετε με Diya

Χρονοδιάγραμμα Κινούμενα Σχέδια

Χρονοδιάγραμμα Κίνηση στο Diya

Μπορείτε να συνδέσετε τα artboards σας, να επιλέξετε έναν τύπο αλληλεπίδρασης και το Diya θα ζωντανέψει αυτόματα όλα τα επίπεδα για εσάς. Στη συνέχεια, μπορείτε να προσαρμόσετε τις μεταβάσεις και το χρονοδιάγραμμά σας χρησιμοποιώντας την ενσωματωμένη γραμμή χρόνου.

Προσαρμοσμένη χαλάρωση και ελατήρια

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

Κινούμενο σύμβολο

Κινούμενο σύμβολο

Δημιουργήστε μια κινούμενη εικόνα μία φορά και επαναχρησιμοποιήστε τα παντού. Αυτό είναι ένα από τα πιο χρησιμοποιημένα και αγαπημένα χαρακτηριστικά του Diya!

Χαρακτηριστικά Handoff

Η Diya εξάγει ένα πρωτότυπο live HTML με ένα ενσωματωμένο φύλλο spec για τους προγραμματιστές σας. Δεν χρειάζεται να καθίσετε σε μεγάλες συναντήσεις για να εξηγήσετε σε εσάς το κινούμενο πλάνο τους. Μπορούν να δουν την κινούμενη εικόνα και τις προδιαγραφές, σε μια οθόνη.

Εάν ενδιαφέρεστε, μπορείτε να δοκιμάσετε το Diya αμέσως, λαμβάνοντας το δωρεάν αντίγραφο σας https://www.diyahq.com/

Όταν ανακοίνωσα για πρώτη φορά το plugin στις 23 Νοεμβρίου 2017, ο Diya έπληξε το # 1 στο Designer News και το # 2 για το κυνήγι προϊόντων. Σήμερα, οι σχεδιαστές στο Facebook, το Google, το Plume, το Thalmic Labs και πολλά άλλα κινούν τα έργα τους με το Diya. Σαφώς, η κίνηση στο Sketch είναι μια ανάγκη για σχεδιαστές σε όλο τον κόσμο. Σε αυτό το άρθρο, θέλω να σας δώσω μια πίσω από τις σκηνές κοιτάξτε πώς ξεκίνησε Diya, γιατί κάνω αυτό το plugin και τι είναι στο κατάστημα για το μέλλον.

Η αρχη

Πίσω το 2014, ο σχεδιασμός αλληλεπίδρασης έγινε σιγά σιγά όλο και πιο συνηθισμένος όταν κυκλοφόρησα το πρώτο μου πρωτότυπο animation app που ονομάζεται Mitya. Έγραψε στο JavaScript χρησιμοποιώντας τον HTML Canvas.

Προεπισκόπηση του Mitya το 2014

Το app ήταν μπροστά από οποιοδήποτε άλλο εργαλείο στην αγορά τότε. Δυστυχώς, μαστίζεται από τεχνικά ζητήματα και πραγματικά δεν μπορούσε να πιάσει. Για την αντιμετώπιση αυτών των ζητημάτων, αποφάσισα να ξαναγράψω ολόκληρη την εφαρμογή χρησιμοποιώντας τις τεχνολογίες native macOS. Στην πορεία, πρόσθεσα ένα προηγμένο χρονοδιάγραμμα, δυνατότητες δέσμης ενεργειών και εξαγωγή HTML. Αλλά, είχα υποτιμήσει το χρόνο που θα χρειαζόταν μια πλήρης αναθεώρηση. Μέχρι τη στιγμή που ανακάμψα το 2016, η αγορά των πρωτοτύπων είχε ήδη γεμίσει και αρχίζει να εγκατασταθεί γύρω από τον Framer, την αρχή και τον Flinto. Ενώ η Mitya συγκέντρωσε μια βάση χρηστών, ήταν μια τεράστια πρόκληση να γίνουν σοβαρές επιδρομές στην αγορά.

Εγγενής εφαρμογή Mitya

Έψαχνα τρόπους για την αύξηση της βάσης χρηστών της Mitya. Ενώ μιλούσα στους χρήστες, θα μπορούσα να δω με σαφήνεια ότι η ανάγκη της αγοράς πέρασε πέρα ​​από ένα "εργαλείο πρωτοτύπου" και σε ένα "εργαλείο σχεδιασμού με πρωτότυπα". Ο σχεδιασμός κινουμένων σχεδίων στο UI έγινε τώρα mainstream και οι σχεδιαστές ήταν ενοχλημένοι με τη συνεχή κίνηση μεταξύ των εργαλείων για να επιτύχουν το στόχο τους. Κοιτάζοντας αυτή την ανάγκη, συνειδητοποίησα ότι είχα δύο επιλογές. Θα μπορούσα είτε να επεκτείνω το Mitya με χαρακτηριστικά σχεδιασμού UI ή θα μπορούσα να φέρω κινούμενα σχέδια στο Sketch.

Ο άξονας

Η επέκταση του Mitya θα απαιτούσε τεράστιους πόρους και δεν ήταν πρακτική επιλογή. Έτσι, πήγα με τη δεύτερη επιλογή. Δεν είχα εμπειρία να σχεδιάζω προχωρημένα plugins, γι 'αυτό άρχισα να γράφω μερικές αποδείξεις εννοιών. Ο στόχος ήταν να δούμε εάν θα μπορούσα να ενσωματώσω το Sketch και θα το έκανα να αισθάνεται σαν να ήταν ένα εγγενές χαρακτηριστικό της εφαρμογής, και όχι ένα add-on kludgy.

Για να συμβεί αυτό, χρειαζόμουν δύο πράγματα:

1. Το UI για το plugin έπρεπε να ζει μέσα στο UI του Sketch, τόσο στον Επιθεωρητή όσο και στον Καμβά

2. Η χρήση του Save (Αποθήκευση), Undo (Αναίρεση) και Redo (Επαναφορά) θα πρέπει να είναι εγγενής στο Sketch

Η προσθήκη στον Επιθεωρητή έγινε εύκολη από τον εξαιρετικό πόρο από το πρότυπο Xcode Plugin του James Tang - Sketch Plugin.

Στη συνέχεια, προσπάθησα να προσθέσω τις δικές μου προσαρμοσμένες απόψεις πάνω από τον καμβά του Sketch. Αυτό πήρε λίγο περισσότερη προσπάθεια, αλλά τελικά, ήταν πολύ απλούστερη από ό, τι φανταζόμουν.

Με τη φροντίδα του UI, έψαξα έπειτα τρόπους να συνδεθώ στο σύστημα αρχείων του Sketch. Ευτυχώς, η Bohemian Coding πρόσθεσε δύο χαρακτηριστικά στο API που ήταν απαραίτητα για να δουλέψει ο Diya:

1. Είχαν ανοίξει τη μορφή αρχείων τους και επέτρεψαν τις προσθήκες να αποθηκεύουν δεδομένα απευθείας στο αρχείο Sketch

2. Το API Ενεργειών επέτρεψε τα πρόσθετα να ακούνε τα γεγονότα των χρηστών πιο βαθιά από ποτέ

Με όλα τα τεχνικά κομμάτια στη θέση μου, θα μπορούσα τελικά να αρχίσω να δουλεύω με το πραγματικό plugin.

Η Αναγέννηση

Άρχισα να μεταφέρω τη βάση κώδικα της Mitya και να την φέρω στο Diya. Η βασική μηχανή κίνησης και προεπισκόπησης μεταφέρθηκαν σε λιγότερο από δύο εβδομάδες. Οι περισσότεροι από αυτούς τους χρόνους δαπανήθηκαν για να υπολογίσουν πώς να διαβάσουν τα δεδομένα του Sketch από τα Artboards και τα Layers του. Απλοποίησα επίσης μερικά από τα περίπλοκα χαρακτηριστικά της Mitya, ώστε να μπορέσω να φτάσω σε ένα προϊόν v1 πιο γρήγορα.

Diya στο σκίτσο

Στις 23 Νοεμβρίου 2017, δημοσίευσα δημοσίως το έργο με μία μόνο θέση για το DN και το Spectrum. Δεν ήμουν ακόμη σίγουρος πως οι σχεδιαστές θα ήταν σε αυτή την ιδέα. Ευτυχώς, ένας μεγάλος αριθμός σχεδιαστών ενδιαφέρθηκε! Η Diya έγινε γρήγορα η # 1 Top Story για το DN και το προϊόν # 2 για το κυνήγι προϊόντων.

Η Βήτα

Μετά την ανακοίνωση, κάθε μέρα από τον Δεκέμβριο του 2017 έως τον Ιανουάριο του 2018, κάλεσα μερικές εκατοντάδες χρήστες να δοκιμάσουν το beta. Η κοινή χρήση ενός beta είναι πάντα μια γλυκόπικρη εμπειρία. Είναι συναρπαστικό να μοιράζεστε αυτό που εργάζεστε επί τόσο πολύ καιρό, αλλά είναι εξίσου οδυνηρό να ακούσετε τις καταγγελίες και τις αναφορές συγκρούσεων. Ευτυχώς, συνάντησα μερικούς πολύ ασθενούς και φιλικούς σχεδιαστές που βοήθησαν τη Diya να γίνει αυτό που είναι σήμερα.

Τέλος, στις 22 Φεβρουαρίου 2017, ο Diya έφτασε σε μια ανοιχτή beta. Από τότε χιλιάδες σχεδιαστές από όλο τον κόσμο έχουν κατεβάσει το Diya. Είναι υπέροχες ιστορίες ακρόασης από τους χρήστες σχετικά με το πώς η Diya έχει απλοποιήσει την καθημερινή ροή εργασίας τους.

Έχω δημιουργήσει μερικά μαθήματα βίντεο για να ξεκινήσετε! Δείτε το βίντεο γρήγορης εισαγωγής παρακάτω!

Το μέλλον

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

Το Diya είναι επί του παρόντος σε ανοικτή beta και θα είναι διαθέσιμο στο εμπόριο μέχρι το τέλος αυτού του μήνα. Μπορείτε να συμμετάσχετε στη συζήτηση για το Slack και το Facebook, καθώς και να ακολουθήσετε τις ενημερώσεις μου για το Diya. Μπορείτε επίσης να με βρείτε στο Twitter!

Ελπίζω να απολαμβάνετε την κίνηση με το Diya!