Πώς να εξάγετε το Adobe xd σε html

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

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

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

Επίσης στην

Καλύτερα 3 εργαλεία σχεδιασμού για τη δημιουργία Mockups και Wireframes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Επίσης στην

#σχέδιο

Κάντε κλικ εδώ για να δείτε τη σελίδα άρθρων σχεδίασης

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

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

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