Πώς να εξάγετε το Adobe XD σε HTML

Το Adobe XD είναι ένα εκπληκτικό εργαλείο σχεδίασης που σας επιτρέπει να δημιουργείτε εύκολα φανταστικά σχέδια ιστοτόπων χωρίς προηγούμενη εμπειρία ανάπτυξης ιστού. Μπορείτε απλώς να εισάγετε αρχεία PSD του σχεδίου σας από Photoshop και δημιουργήστε μια εντυπωσιακή διεπαφή ιστότοπου.

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

Μπορείτε είτε να επιλέξετε να τα αποθηκεύσετε ως αρχείο XD και να ελπίζετε ότι ο προγραμματιστής έχει ήδη εγκατεστημένο το λογισμικό στο σύστημά του ή να εξαγάγει κάθε πίνακα τέχνης ως άτομο PNG αρχείο που μπορεί να είναι λίγο άβολο στη χρήση.

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

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

Εξαγωγή αρχείων Adobe XD σε HTML με χρήση προσθηκών

Τώρα που το έχουμε ξεμπερδέψει, απλώς ακολουθήστε αυτά τα απλά βήματα για να κάνετε λήψη της απαιτούμενης προσθήκης και, στη συνέχεια, να εξαγάγετε τα αρχεία Adobe XD σε HTML:

Βήμα 1: Κάντε κλικ στο κουμπί μενού χάμπουργκερ στην επάνω αριστερή γωνία του λογισμικού.

Βήμα 2: Κάντε κύλιση μέχρι κάτω και μετά κάντε κλικ στην επιλογή Προσθήκες. Αυτό θα ανοίξει ένα νέο πλαίσιο Plugins στα δεξιά του κύριου μενού.

Βήμα 3: Επιλέξτε την επιλογή Discover Plugins από τον πίνακα Plugins.

Βήμα 4: Στην επόμενη σελίδα, πραγματοποιήστε αναζήτηση για HTML και, στη συνέχεια, κάντε κλικ στο κουμπί Εγκατάσταση δίπλα στην προσθήκη Web Export.

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

Βήμα 5: Επιλέξτε το artboard που θέλετε να εξαγάγετε κάνοντας κλικ πάνω του.

Βήμα 6: Τώρα κάντε κλικ στο κουμπί μενού, πλοηγηθείτε στον πίνακα Προσθηκών και, στη συνέχεια, επιλέξτε την επιλογή Εξαγωγή Artboard από τις νέες ρυθμίσεις της προσθήκης εξαγωγής Web.

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

Βήμα 7: Στο αναδυόμενο παράθυρο Εξαγωγή Artboard, προσθέστε ένα όνομα για το αρχείο και, στη συνέχεια, επιλέξτε το φάκελο στον οποίο θέλετε να αποθηκεύσετε το αρχείο κάνοντας κλικ στο μικροσκοπικό εικονίδιο φακέλου δίπλα στην επιλογή Εξαγωγή φακέλου.

Βήμα 8: Τώρα, εάν θέλετε να προσθέσετε ένα εξωτερικό σενάριο, φύλλο στυλ ή εναλλακτικές γραμματοσειρές στο εξαγόμενο αρχείο, μπορείτε να τις προσθέσετε στο ίδιο παράθυρο.

Βήμα 9: Στη συνέχεια, μπορείτε να επιλέξετε τις διαστάσεις του αρχείου HTML εξόδου πληκτρολογώντας τις τιμές στον κενό χώρο δίπλα στην επιλογή Μέγεθος.

Βήμα 10: Για να διασφαλίσετε ότι το έργο κλιμακώνεται σωστά, μπορείτε επίσης να επιλέξετε διάφορες ρυθμίσεις κλίμακας από το ίδιο παράθυρο επιλέγοντας το πλαίσιο δίπλα σε κάθε επιλογή.

Βήμα 11: Επιπλέον, μπορείτε να επιλέξετε τυχόν πρόσθετες ρυθμίσεις όπως Πλοήγηση πληκτρολογίου, Αυτόματη ανανέωση κ.λπ. τσεκάροντας τα πλαίσια δίπλα στις επιλογές.

Βήμα 12: Αφού ολοκληρώσετε όλες τις ρυθμίσεις, απλώς κάντε κλικ στο μπλε κουμπί Εξαγωγή και τελειώσατε. Το artboard σας θα εμφανιστεί ως αρχείο HTML στον φάκελο προορισμού που επιλέξατε προηγουμένως.

Από το ίδιο παράθυρο, θα μπορείτε επίσης να αντιγράψετε το CSS και τη σήμανση του artboard σας, εάν θέλετε επίσης να μοιραστείτε αυτές τις πληροφορίες με τον προγραμματιστή σας.

Για άλλη μια φορά, σημειώστε ότι το εξαγόμενο HTML δεν μπορεί σε καμία περίπτωση να χρησιμοποιηθεί για την ανάπτυξη ενός πλήρως λειτουργικού ιστότοπου. Προς το παρόν, δεν υπάρχει τρόπος να δημοσιεύσετε απευθείας ένα έργο Adobe XD στον ιστό και σύμφωνα με αρκετούς συζητήσεις στα φόρουμ της Adobe, δεν θα υπάρξει σύντομα.

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

Εξαγωγή του αρχείου Adobe XD σε HTML

Έτσι, τώρα που ξέρετε πώς να εξάγετε το αρχείο Adobe XD σε HTML, είμαι βέβαιος ότι θα μπορείτε να μοιράζεστε εύκολα τους πίνακες τέχνης σας με έναν προγραμματιστή ή έναν πελάτη. Και δεν θα χρειάζεται να ανησυχείτε για προβλήματα συμβατότητας. Εγκαταστήστε το πρόσθετο αμέσως και ξεκινήστε να εξάγετε τους πίνακες τέχνης σας με ευκολία.

Επόμενο: Ρίξτε μια ματιά στο παρακάτω άρθρο για μερικούς δωρεάν διαδραστικούς ιστότοπους στους οποίους μπορείτε να μάθετε πώς να κωδικοποιείτε και να γράφετε τον δικό σας ιστότοπο HTML.