Παρουσιάζοντας: Πλατφόρμα της Σχάμης

Το πρώτο βήμα προς ένα ανοιχτό οικοσύστημα σχεδιασμού

Σήμερα, είμαστε ενθουσιασμένοι που ξεκινήσαμε την πλατφόρμα Figma, έναν τρόπο να βελτιώσουμε τις ροές εργασίας του σχεδιασμού συνδέοντας το Figma με άλλα εργαλεία, σενάρια και ακόμη και εφαρμογές ιστού. Ξεκινάμε με μια νέα ιδέα για το χώρο του σχεδιασμού: Ένα API web.

Είναι τρελό το γεγονός ότι ένα web API είναι πρωτοποριακό το 2018, αλλά από την αντίληψή μας, κανείς δεν έχει ποτέ δημιουργήσει ένα για ένα επαγγελματικό εργαλείο σχεδίασης πριν. Ο λόγος? Ο σχεδιασμός συμβατικά συμβαίνει σε έναν κόσμο από πλαϊνό, offline λογισμικό επιφάνειας εργασίας, ενώ το Figma ζει σε απευθείας σύνδεση όπου τα πάντα είναι συνδεδεμένα.

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

Το API μας θέτει τα θεμέλια για μοναδικές μορφές συνεργασίας σχεδιασμού

Αυτές οι ιδέες είναι μόνο η αρχή - είμαστε ανοιχτοί που προμηθεύουμε διάφορα demo projects που κυμαίνονται από ένα ορθογραφικό ορθογράφο Figma σε ένα γενετικό εργαλείο τέχνης σε μια μέθοδο για την τοποθέτηση των σχεδίων σας στο μπλοκ του Ethereum. Επίσης εισάγουμε νέες και βελτιωμένες ενσωματώσεις με άλλα εργαλεία σχεδίασης όπως Avocode, Haiku, Zeplin και Pagedraw.

Είμαστε πολύ ενθουσιασμένοι για να δούμε τι θα κάνει η κοινότητά μας. Διαβάστε παρακάτω για να μάθετε περισσότερα σχετικά με τον τρόπο λειτουργίας της πλατφόρμας μας και τους τρόπους για να ξεκινήσετε. (Και ελέγξτε το εξαιρετικό άρθρο της Fast Company του Harry McCracken σχετικά με τη σημασία του API για την ευρύτερη βιομηχανία τεχνολογίας.)

Πως δουλεύει

Η πρώτη έκδοση του API Web του Figma έχει τρεις βασικές δυνατότητες:

  1. Διαβάστε τα αρχεία σχεδιασμού σε μια ανοικτή μορφή αρχείου JSON
  2. Διαβάστε / γράψτε σχόλια στα αρχεία σχεδιασμού
  3. Render αρχεία σχεδιασμού (και τα μέρη των αρχείων σχεδιασμού) σε τυποποιημένες μορφές εικόνας (png, svg, κλπ)

Η ανοιχτή μας μορφή αρχείων επιτρέπει στα εργαλεία τρίτων να καταναλώνουν τα σχέδια Figma με αξιόπιστο τρόπο. Σε αντίθεση με τους ανταγωνιστές της επιφάνειας εργασίας, το Web API του Figma δεν συνδέεται με λειτουργικά συστήματα, συγκεκριμένες διαδρομές αρχείων ή εκδόσεις λογισμικού σχεδιασμού. Αυτό σημαίνει ότι είναι δυνατή η πρόσβαση στην τρέχουσα κατάσταση ενός σχεδίου από λογισμικό που τρέχει σε εντελώς διαφορετικούς υπολογιστές ή ακόμα και στο διαδίκτυο, όπως το ίδιο το Figma - που θέτει το σκηνικό για μια εντελώς νέα κατηγορία ενσωμάτωσης σχεδιασμού.

Ο υπάλληλος της Uber εξετάζει μια ροή πραγματικού χρόνου των σχεδίων που τροφοδοτούνται σε μια τηλεόραση από το API του Figma

Μόλις γνωρίσετε το μοναδικό κλειδί ενός σχεδίου Figma - το οποίο περιλαμβάνεται στη διεύθυνση URL - μπορείτε να εξαγάγετε ένα ζωντανό στιγμιότυπο του δέντρου των σχημάτων, του κειμένου, των εξαρτημάτων, των πρωτότυπων συνδέσμων, των μεταβάσεων, των περιορισμών κλπ που καθορίζουν τον τρόπο εμφάνισης ενός σχεδίου Figma συμπεριφέρεται. Μπορείτε επίσης να εκτελέσετε ping ένα τελικό σημείο για να δημιουργήσετε ένα JPG, PNG ή SVG οποιουδήποτε υπογράμματος αρχείου ή αρχείου.

Έχουμε σχεδιάσει το API ώστε να είναι όσο το δυνατόν πιο εργονομικό, ώστε να είναι γρήγορο και εύκολο να δημιουργήσετε βελτιώσεις στις εσωτερικές ροές εργασιών της εταιρείας ή να ενσωματώσετε το Figma με άλλα εργαλεία. Επειδή είναι web-based, δεν χρειάζεται να μάθετε εσωτερικές γλώσσες δέσμης ενεργειών για να το κάνετε αυτό. Μπορείτε να βασιστείτε στα πλαίσια προγραμματισμού που εξοικειώνεστε και να διασυνδέσετε απευθείας με ένα καλά καθορισμένο API web αντί να δεσμεύεστε άσκοπα σε ένα άλλο ιδιόκτητο plugin. (Αυτό θα διευκολύνει την ενημέρωση των ενσωματώσεων - και ως εκ τούτου λιγότερο buggy!)

Ξέρουμε ότι αναρωτιέστε τι έρχεται σύντομα. Εδώ είναι μια προεπισκόπηση:

  1. Webhooks. Στη συνέχεια σχεδιάζουμε να απελευθερώσουμε τα Webhooks που ανακαλούν τα ρέματα σε γεγονότα στο Figma. Μπορείτε να επισυνάψετε ένα Webhook σε ένα αρχείο ή μια ομάδα. Θα λάβετε επιστροφή γεγονότων που αντιστοιχούν στις ενημερώσεις αρχείων.
  2. Γράψτε API. Παρόλο που το API Σχόλιό μας επιτρέπει στους πελάτες να γράφουν στο Figma, η σημερινή απελευθέρωση αφορά κυρίως τις περιπτώσεις ανάγνωσης και το άνοιγμα του Figma μέχρι τον έξω κόσμο. Σχεδιάζουμε να εισαγάγουμε ένα API Write σύντομα φέτος ... είναι κάτι που είμαστε εξαιρετικά ενθουσιασμένοι!
  3. Επεκτάσεις. Αν είχαμε $ 1 για κάθε φορά που ζητήσατε από πελάτες σε επεκτάσεις εφαρμογών, ίσως να μην χρειαζόταν να αυξήσουμε τον τελευταίο γύρο χρηματοδότησης. Τούτου λεχθέντος, είδαμε ότι οι ανταγωνιστές μας προστέθηκαν μοντέλα επέκτασης που έδωσαν στους προγραμματιστές την ελευθερία σε βάρος της ποιότητας, της ευρωστίας και της προβλεψιμότητας. Είμαστε πρόθυμοι να εκμεταλλευτούμε την απίστευτη συλλογική νοημοσύνη της κοινότητας Figma για να κάνουμε το εργαλείο μας καλύτερο, αλλά δεν πρόκειται να εισαγάγουμε επεκτάσεις μέχρι να είμαστε σίγουροι ότι το μοντέλο μας επέκτασης είναι γερό. Δεν υπάρχει ακόμα ETA, αλλά διερευνούμε ενεργά πώς να το κατασκευάσουμε με έναν συνεπή τρόπο.

Πάρτε έμπνευση ροής εργασίας από: Uber & GitHub

Καθώς ο σχεδιασμός διαδραματίζει έναν αυξανόμενο ρόλο σε μεγάλες εταιρείες, όλο και περισσότερα τμήματα το αγγίζουν. Δεν είναι μόνο το πρόσωπο του UI που αλληλεπιδρά με mockups και οπτικές αντιλήψεις ιδεών - έτσι και οι συντάκτες αντιγράφων, οι μηχανικοί, οι ερευνητές, οι έμποροι, τα στελέχη και οι αμέτρητες άλλες.

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

Για πραγματική συνεργασία σε κλίμακα, οι επιχειρήσεις χρειάζονται έναν καλύτερο τρόπο για να μοιράζονται, να αναζητούν και να βλέπουν σχέδια σε πραγματικό χρόνο σε ολόκληρο τον οργανισμό. Γι 'αυτό είμαστε τόσο ενθουσιασμένοι με την υπόσχεση προσαρμοσμένων ροών εργασίας που τροφοδοτούνται από το API του Figma.

Ένας σχεδιαστής Uber εργάζεται στο Figma

Uber

Η υπηρεσία on-demand ridesharing μπορεί να υπερηφανεύεται για μια ομάδα σχεδιαστών που απλώνεται σε 4 διαφορετικές πόλεις και εργάζεται σε μια ποικιλία προϊόντων από την Uber Eats έως την Uber Freight. Η νέα της VP of Design ήθελε έναν εύκολο τρόπο να περιηγηθεί σε αυτά τα έργα, έτσι ώστε να δημιουργούν εσωτερικά εργαλεία για προβολή με την τεχνολογία μας στο διαδίκτυο.

"Το API της Figma βοήθησε να φέρουμε τις ιδέες που έχουμε ονειρευτεί για όλη την ηλικία", δήλωσε ο Erik Klimczak, Διευθυντής Σχεδίασης της Advanced Technology Group της Uber.

Η Uber προγραμματίζει να εκπέμπει σχέδια σε εξέλιξη σε τηλεοράσεις γύρω από το γραφείο, να τα μετατρέπει σε ένα χώρο αποθήκευσης ιστότοπου τύπου Dribbble και να σχεδιάζει φορτία σε μια επέκταση προγράμματος περιήγησης Chrome για τους υπαλλήλους. Οι σχεδιαστές θα έχουν την αυτονομία να αποφασίζουν πότε θα μοιραστούν - το API δεν θα πάρει το έργο τους μέχρι να το σύρετε σε ένα συγκεκριμένο πλαίσιο στο Figma.

"Το API του Figma βοήθησε να φέρουμε τις ιδέες που έχουμε ονειρευτεί για αιώνες στη ζωή." - Erik Klimczak, Sr. Διευθυντής Σχεδίασης, Uber

Άλλες εταιρείες έχουν κάνει παρόμοια προϊόντα για να διευκολύνουν την ανταλλαγή έργων σχεδιασμού, αλλά αυτή είναι η πρώτη φορά που έχουμε δει κάποιον να δημιουργεί μια ροή πραγματικού χρόνου βασισμένη σε μια πηγή αλήθειας σε απευθείας σύνδεση αντί για ακατάλληλη ροή εξαγωγής. Βρήκαμε το μέγεθος της προσπάθειας του Uber να εμπνέει και ελπίζουμε να δούμε περισσότερες ομάδες να διερευνήσουν παρόμοιες έννοιες.

GitHub

Το GitHub Octicon που βρίσκεται στο Figma (αριστερά) και το GitHub (δεξιά)

Με το νέο API του Figma, το GitHub μπορεί να προωθήσει αλλαγές στο σύστημα εικονιδίων τους - Octicons - από ένα ενιαίο αρχείο σχεδίασης. Όταν κάποιος πρέπει να αλλάξει ένα εικονίδιο, μπορεί απλά να επεξεργαστεί το αρχείο Figma, το οποίο χρησιμεύει ως πηγή αλήθειας. Ένας σχεδιαστής ή μηχανικός μπορεί στη συνέχεια να υποβάλει ένα αίτημα έλξης με αναφορά στο ενημερωμένο σχέδιο Figma. Αυτό ενεργοποιεί μια νέα κατασκευή μέσω του Travis CI που χρησιμοποιεί το API του Figma για να εξαγάγει αυτόματα εικονίδια από το αρχείο Figma και δημοσιεύει το ενημερωμένο σύνολο εικονιδίων σε κάθε μορφή.

Η οδήγηση των αλλαγών από ένα μοναδικό αρχείο σχεδιασμού μειώνει το εμπόδιο για τη συμβολή των εν λόγω αλλαγών. Επιτρέπει επίσης στο GitHub να τρέχει τα πάντα μέσω κοινών συνεχών υπηρεσιών ενσωμάτωσης και όχι στη δημιουργία διακομιστών Mac. Στο μέλλον, όταν το Figma απελευθερώνει το Write API, το GitHub σχεδιάζει να κάνει τη ροή δεδομένων αμφίδρομα, έτσι ώστε το αρχείο αποθετηρίου και το αρχείο σχεδιασμού να είναι πάντα συγχρονισμένα. Με αυτόν τον τρόπο ο καθένας θα μπορεί να κάνει αλλαγές στο εικονίδιο του Octicons με τον τρόπο που αισθάνεται πιο άνετα, είτε αυτό είναι σχεδιασμός ή κώδικας!

Ένας νέος κόσμος ολοκλήρωσης

Εκτός από την παροχή βοήθειας σε εταιρείες όπως το Uber και το Github να προσαρμόσουν τις δικές τους ροές εργασίας, το API μας θα διευκολύνει τα τρίτα μέρη να δημιουργήσουν και να διατηρήσουν τις δημόσιες ενσωματώσεις των Figma. Η Zeplin μόλις εξέδωσε μια αναμόρφωση της ενσωμάτωσής τους με το νέο μας API και τρία άλλα προϊόντα εισήγαγαν τη λειτουργία Figma για πρώτη φορά:

  1. Haiku - ένα εργαλείο για τη δημιουργία διαδραστικών στοιχείων διαμέσου πλατφόρμας (που διατίθενται σήμερα)
  2. Pagedraw - μια γεννήτρια κώδικα React UI (διαθέσιμη σήμερα)
  3. Avocode - εργαλείο μεταβίβασης προγραμματιστών (σύντομα)

Οι ενσωματώσεις όπως αυτές είναι πιο σημαντικές από ποτέ για το σχεδιασμό. Ζούμε σε έναν κόσμο με μυριάδες ροές εργασίας, όπου κάθε ομάδα έχει διαφορετικές διαδικασίες για να κάνει πράγματα. Στο Figma, είναι φανερό σε μας ότι καμία εταιρεία δεν πρόκειται να λύσει κάθε πρόβλημα, έτσι τα εργαλεία πρέπει να δουλέψουν καλά μαζί. Συνεργαζόμενοι με υπηρεσίες όπως Haiku, Pagedraw, Avocode και Zeplin, μπορούμε να ξεκλειδώσουμε νέες περιπτώσεις χρήσης για την κοινότητά μας και να ξεμπλοκάρουμε ομάδες με άλλες ανάγκες.

"Το Figma είναι από καιρό ένα από τα αγαπημένα μας εργαλεία σχεδιασμού." - Zack Brown, Διευθύνων Σύμβουλος της Haiku

"Το Figma είναι από καιρό ένα από τα αγαπημένα μας εργαλεία σχεδιασμού", δήλωσε ο Zack Brown, Διευθύνων Σύμβουλος της Haiku. "Με αυτήν την ολοκλήρωση, συνδυάζουμε τη δύναμη της πλατφόρμας συνεργασίας με το σχεδιασμό της σχεδίασης με την παραγωγική δύναμη εφαρμογών του Haiku".

Παραδείγματα έργων

Για να σας βοηθήσουμε να ξεκινήσετε, η ομάδα του Figma (και οι φίλοι της οικογένειας) πέρασε λίγες μέρες δημιουργώντας έργα διασκέδασης πάνω από το API του Web. Όλα τα παρακάτω είναι ανοιχτά από το GitHub. Εάν έχετε ήδη ιδέες για το τι θέλετε να χτίσετε, ελπίζουμε ότι αυτά τα παραδείγματα θα είναι χρήσιμα ως υλικό αναφοράς. Εάν δεν είστε σίγουροι για το τι πρέπει να κάνετε ακόμα, σας ενθαρρύνουμε να πετάξετε αυτά τα έργα και να τα οδηγήσετε σε νέες κατευθύνσεις που δεν μπορούμε ποτέ να ονειρευτούμε!

(1) Γενική γεννήτρια γεννήτριας Figma

Γεννήτρια προσαρμοσμένου mockup της Figma σε δράση

Δείτε τι θα εμφανιστεί ένα σχέδιο σε διαφορετικά περιβάλλοντα του πραγματικού κόσμου - όπως ένα iPhone, μια στάση λεωφορείου ή μια πινακίδα. Δοκιμάστε το με πρόσβαση στο δημόσιο χώρο αποθήκευσης στο GitHub, κατεβάστε τον κώδικα και εκτελέστε τον ως σελίδα HTML.

(2) Έλεγχος ορθογραφικού σχήματος Figma

Η επίδειξη ελέγχου ορθογραφίας του Figma χρησιμοποιεί το API Σχόλιό μας για να σημειώσει λέξεις με λάθος λεξικό σε ένα σχέδιο

Με το Demo ορθογραφικού ελέγχου Figma, μπορείτε να εκτελέσετε ένα εργαλείο γραμμής εντολών που θα σαρώσει κείμενο σε ένα σχέδιο. Όταν τα λόγια είναι εσφαλμένα, αφήνει αυτόματα ένα σχόλιο που υποδηλώνει εναλλακτικές λύσεις. Είμαστε ενθουσιασμένοι που βλέπουμε τα διαφορετικά πράγματα που οι άνθρωποι δημιουργούν με το API των σχολίων μας, και αυτή είναι μια μόνο ιδέα.

(3) Καλειδοσκόπιο Figma

Ένα φωτομοζωικό φεγγάρι που έγινε με το demo του Καλειδοσκοπίου μας

Έχετε δει μια εικόνα που αποτελείται από εκατοντάδες ή χιλιάδες μικρότερες εικόνες (πιστεύω ότι ο επίσημος όρος είναι φωτομοναϊκός); Τώρα μπορείτε να το κάνετε αυτό στο Figma. Επιλέξτε μια φωτογραφία (η "μεγάλη εικόνα"), στη συνέχεια ανοίξτε το Figma και σχεδιάστε τα εικονίδια που θα χρησιμεύσουν ως τα μικρότερα ψηφιδωτά κομμάτια. Μπορείτε να αποκτήσετε πρόσβαση στο δημόσιο χώρο αποθήκευσης του GitHub και να χρησιμοποιήσετε το API μας για να αποδώσετε τα σχήματα αυτά σε ένα μοναδικό κομμάτι pixelated τέχνης.

Τέλος, η μηχανική υποστήριξης Airbnb Elena Nadolinski δημιούργησε αυτό το σύντομο βίντεο φροντιστήριο σχετικά με τον τρόπο χρήσης του API του Figma. Μάθετε πώς μπορείτε να δημιουργήσετε τα δικά σας μάρκες Ethereum που αντιπροσωπεύουν την τέχνη του emoji χρησιμοποιώντας ένα αρχείο Figma και το Web API του Figma.

Ξεκινώντας

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

Σε περίπτωση που δεν μπορείτε να πείτε, είμαστε πολύ ενθουσιασμένοι που βλέπουμε τι δημιουργεί η κοινότητά μας με αυτήν την τεχνολογία. Αν δημιουργήσετε κάτι με την πλατφόρμα μας, θέλουμε να το ακούσουμε. Δώστε μας μια φωνή στο κανάλι "Show and Tell" του φόρουμ χρηστών του Spectrum.