Το Figma είναι ένα εξαιρετικό εργαλείο που γίνεται γρήγορα αγαπημένο μεταξύ UX/UI και σχεδιαστών ιστοσελίδων. Μπορείτε να δημιουργήσετε αποκριτικά σχέδια ιστού γρήγορα και εύκολα χρησιμοποιώντας αυτό το δωρεάν εργαλείο που βασίζεται σε πρόγραμμα περιήγησης.
Ενώ οι περισσότεροι άνθρωποι δημιουργούν τα σχέδιά τους από την αρχή στο Figma, μπορείτε να εμπνευστείτε από πραγματικούς ιστότοπους και να δημιουργήσετε εύκολα ένα σχέδιο Figma απευθείας από μια υπάρχουσα σελίδα HTML. Δείτε πώς να το κάνετε.
Γιατί πρέπει να δημιουργείτε σχέδια Figma από HTML
Υπάρχουν πολλοί λόγοι για τους οποίους μπορεί να θέλετε να αντιγράψετε ένα υπάρχον σχέδιο ιστού ως σχέδιο Figma. Κάνοντας αυτό μέσω της προσθήκης Figma εξοικονομείτε χρόνο, επιτρέποντάς σας να εστιάσετε στην τελειοποίηση του σχεδίου σας.
Η εξάσκηση στο σχεδιασμό ιστοσελίδων αναδημιουργώντας υπάρχουσες ιστοσελίδες είναι ένας πολύ καλός τρόπος για να μάθετε από τους δασκάλους. Μπορείτε επίσης να χρησιμοποιήσετε το εργαλείο σχεδίασης HTML σε Figma εάν έχετε σχεδιάσει και δημοσιεύσει προηγουμένως μια ιστοσελίδα στην οποία δεν έχετε πρόσβαση. Αντί να το επανασχεδιάζετε από την αρχή, μπορείτε να εξοικονομήσετε χρόνο μετατρέποντάς το ξανά σε Figma για να το δουλέψετε ξανά.
Τώρα που ξέρετε γιατί αυτό το εργαλείο μπορεί να είναι εύχρηστο, ήρθε η ώρα να μάθετε πώς λειτουργεί.
Πώς να μετατρέψετε οποιονδήποτε ιστότοπο σε σχέδιο Figma
Για να ξεκινήσετε οποιαδήποτε εργασία σχεδίασης που βασίζεται στο Figma, πρέπει να ανοίξετε το Figma και να συνδεθείτε ή να εγγραφείτε. Μπορείτε να χρησιμοποιήσετε την έκδοση του προγράμματος περιήγησης, Figma, ή κατεβάστε την εφαρμογή για υπολογιστές; Και οι δύο λειτουργούν με τον ίδιο τρόπο για αυτό το έργο.
Ανοίξτε α Νέο αρχείο σχεδίασης για να ξεκινήσετε το έργο σχεδίασης HTML σε Figma.
Βήμα 1: Λήψη της προσθήκης html.to.design
Για να μπορέσετε να μετατρέψετε απευθείας έναν ζωντανό ιστότοπο σε σχέδιο Figma, θα χρειαστείτε ένα πρόσθετο. Υπάρχουν αμέτρητα πρόσθετα στο Figma για να σας βοηθήσουν με τα σχέδιά σας, συμπεριλαμβανομένων πρόσθετα για τη δημιουργία μακέτες για τηλέφωνα και συσκευές. Μπορείτε να προσθέσετε το σχέδιο του ιστότοπού σας που μετατράπηκε σε ένα μοντέλο αργότερα, εάν το θέλετε.
Για να κατεβάσετε το πρόσθετο, επιλέξτε το Μενού Figma (Λογότυπο Figma) > Πρόσθετα > Βρείτε περισσότερα πρόσθετα. Εναλλακτικά, μπορείτε να επιλέξετε Πόροι > Πρόσθετα. Από οποιαδήποτε επιλογή, πληκτρολογήστε στη γραμμή αναζήτησης html.to.design.
Βρείτε την επιλογή που παρέχεται από το divRIOTS και επιλέξτε Τρέξιμο. Αυτό ανοίγει την προσθήκη ως πλαίσιο διαλόγου στον καμβά Figma.
Βήμα 2: Επικολλήστε τη διεύθυνση URL του ιστότοπου
Η προσθήκη html.to.design είναι δωρεάν, αλλά προσφέρει μια επαγγελματική έκδοση. Μπορείτε να ολοκληρώσετε τη διαδικασία σχεδίασής σας εξ ολοκλήρου με τη δωρεάν έκδοση.
Βρείτε τον ιστότοπο στον οποίο θέλετε να σχεδιάσετε το Figma. Θα πρέπει να χρησιμοποιήσετε έναν δημόσιο ιστότοπο—όχι μια ιστοσελίδα στην οποία μπορείτε να έχετε πρόσβαση μόνο με τη σύνδεση. Θα χρησιμοποιήσουμε την αρχική μας σελίδα, MakeUseOf.com.
Αντιγράψτε την πλήρη διεύθυνση URL και επικολλήστε την στο πλαίσιο εισαγωγής στο Figma, αντικαθιστώντας το σύμβολο κράτησης θέσης ιστότοπου της Apple.
Βήμα 3: Φορτώστε το σχέδιό σας
Αφού επικολλήσετε τη διεύθυνση URL του ιστότοπου, ανοίξτε Ρυθμίσεις κάτω από το πλαίσιο εισαγωγής για να επιλέξετε το μέγεθος του σχεδίου. Μπορείτε να εισαγάγετε το σχέδιο για μια ποικιλία συσκευών, αλλά θα έχετε καλύτερη επιτυχία επιλέγοντας μια επιτραπέζια συσκευή εάν χρησιμοποιούσατε μια διεύθυνση URL επιτραπέζιου υπολογιστή και μεγαλύτερη επιτυχία χρησιμοποιώντας μια διεύθυνση URL για κινητά για κινητές συσκευές.
Υπάρχουν επίσης προσαρμοσμένες επιλογές για συσκευές ή μεγέθη που δεν είναι διαθέσιμες ως προεπιλεγμένες επιλογές. διαλέγουμε MacBook Pro 14" με Φως θέμα.
Αφού καθορίσετε τη συσκευή σας και τις ρυθμίσεις προβολής, επιλέξτε Εισαγωγή για να ζωντανέψει το σχέδιο HTML στο Figma. Περιμένετε μέχρι να ολοκληρωθεί η γραμμή φόρτωσης για να συμπληρωθεί το σχέδιο Figma.
Ανάλογα με τον ιστότοπο που έχετε χρησιμοποιήσει, μπορεί να παρατηρήσετε ένα αναδυόμενο πλαίσιο που εξηγεί ότι έπρεπε να αντικατασταθούν ορισμένες γραμματοσειρές. Αυτό θα οφείλεται σε πνευματικά δικαιώματα για γραμματοσειρές με άδεια χρήσης. Το Figma θα τις αντικαταστήσει με γραμματοσειρές στις οποίες έχετε πρόσβαση.
Βγείτε από τυχόν αναδυόμενα παράθυρα και, στη συνέχεια, πραγματοποιήστε έξοδο από το παράθυρο διαλόγου προσθήκης για να δείτε το νέο σας σχέδιο στην πλήρη του μορφή.
Βήμα 4: Επεξεργαστείτε το σχέδιο Figma σας
Από εδώ, μπορείτε να αρχίσετε να επεξεργάζεστε την ιστοσελίδα σας στο Figma με όποιον τρόπο θέλετε. Όπως αναφέρθηκε, αυτή η συνάρτηση HTML σε Figma σάς επιτρέπει να μάθετε πώς οι υπάρχουσες ιστοσελίδες σχεδιάστηκαν για να σας εμπνεύσουν να δημιουργήσετε τη δική σας από την αρχή. Θα μπορούσατε να χρησιμοποιήσετε το βασικό σχέδιο από τον ιστότοπο και δημιουργήστε μια παρουσίαση χρησιμοποιώντας μεταβάσεις στο Figma, ή απλώς μάθετε πώς δημιουργούνται οι ιστοσελίδες από άλλους σχεδιαστές.
Στο αριστερό μενού, θα βρείτε τα επίπεδα. Δεδομένου ότι αυτό έχει μετατραπεί απευθείας από HTML, τα επίπεδα μπορεί να είναι πιο λεπτομερή —ή ακόμα και να προκαλούν σύγχυση— από αυτό που έχετε συνηθίσει όταν σχεδιάζετε τον εαυτό σας. Επιλέξτε μια ενότητα στο σχέδιο για να βρείτε τα επισημασμένα επίπεδα στο αριστερό μενού.
Μπορείτε να αντικαταστήσετε εικόνες, να πληκτρολογήσετε ξανά τίτλους και κυρίως κείμενο ή να μετακινήσετε πράγματα εντός της διάταξης κάνοντας διπλό κλικ στην πτυχή σχεδίασης. Η προσθήκη html.to.figma δεν αναπαράγει κινούμενες εικόνες ή ρυθμίσεις μετάβασης όταν κάνετε κλικ σε συνδέσμους ή αλλάζετε σελίδες. Μπορείτε να τα προσθέσετε μόνοι σας.
Πώς να μετατρέψετε μια ιδιωτική ιστοσελίδα
Η πλειονότητα της διαδικασίας δημιουργίας ενός ιδιωτικού ιστότοπου — αυτός που απαιτεί πρόσβαση σε λογαριασμό — έναντι μιας δημόσιας ιστοσελίδας είναι η ίδια. Ωστόσο, αντί να επικολλήσετε τη διεύθυνση URL, πρέπει να χρησιμοποιήσετε μια επέκταση Chrome που δημιουργεί ένα αρχείο.
Για να ξεκινήσετε, ανοίξτε το Figma και το πρόσθετο html.to.figma με τον ίδιο τρόπο όπως πριν.
Βήμα 1: Λήψη και εκτέλεση της επέκτασης Chrome
Μπορείτε να χρησιμοποιήσετε αυτήν την επέκταση μόνο με το Google Chrome, επομένως ανοίξτε το Chrome για να ξεκινήσετε. Από το πλαίσιο διαλόγου προσθήκης Figma, επιλέξτε Επέκταση Chrome-ή ανοίξτε την επέκταση εδώ στο πρόγραμμα περιήγησής σας Chrome.
Επιλέγω Προσθήκη στο Chrome > Προσθήκη επέκτασης για να προσθέσετε την επέκταση στο πρόγραμμα περιήγησής σας.
Με την προσθήκη της επέκτασης, μεταβείτε στον ιδιωτικό ιστότοπο ή στη σελίδα που θέλετε να αναπαράγετε τη σχεδίαση—χρησιμοποιούμε μια σελίδα Instagram—και επιλέξτε την επέκταση. Οι συμπτυγμένες επεκτάσεις βρίσκονται κάτω από το εικονίδιο του κομματιού του παζλ στο πρόγραμμα περιήγησής σας.
Θα σας ρωτήσει εάν θέλετε να καταγράψετε ολόκληρη τη σελίδα ή απλώς αυτό που προβάλλεται. Κάντε την επιλογή σας και, στη συνέχεια, η λήψη θα εμφανιστεί στις λήψεις σας ως αρχείο .h2d.
Βήμα 2: Σύρετε το αρχείο που δημιουργήθηκε στο πρόσθετο Figma
Μεταβείτε στην εφαρμογή Figma ή στην τοποθεσία Figma στο πρόγραμμα περιήγησής σας και σύρετε το ληφθέν αρχείο .h2d στο πλαίσιο. Το αρχείο θα φορτωθεί και θα δημιουργηθεί με τον ίδιο τρόπο όπως η επιλογή δημόσιου ιστότοπου.
Όπως και με την έκδοση της δημόσιας ιστοσελίδας, μπορείτε να κάνετε διπλό κλικ σε πτυχές του σχεδίου για να τις επεξεργαστείτε ή να κάνετε κλικ στο αριστερό μενού για να δείτε πού εμφανίζονται στη διάταξη.
Ίσως θέλετε να προσθέσετε νέα στοιχεία σχεδίασης στο σχεδιασμό της ιστοσελίδας, όπως π.χ ένα εφέ παγωμένου γυαλιού Figma, ή θα μπορούσατε ακόμη και να αναπαράγετε τμήματα του σχεδιασμού της ιστοσελίδας ως α κύριο πρότυπο για παρουσιάσεις Figma. Το 2022, Η Adobe απέκτησε το Figma, ώστε να περιμένουμε πιο διασκεδαστικούς τρόπους χρήσης του Figma στο μέλλον.
Χρησιμοποιήστε οποιονδήποτε ιστότοπο για έμπνευση στα σχέδια Figma σας
Ενώ το Figma προορίζεται κυρίως για το σχεδιασμό ιστοτόπων ή σελίδων UX/UI από την αρχή, είναι μια εξαιρετική ευκαιρία να συμπληρώσετε υπάρχουσες ιστοσελίδες για να δείτε πώς κατασκευάστηκαν. Μπορείτε επίσης να κάνετε το σχέδιο ιστού σας αντίγραφο ενός υπάρχοντος ιστότοπου, εάν δεν είστε σίγουροι από πού να ξεκινήσετε από ένα κενό καρέ.
Ένας άλλος καλός λόγος για τον οποίο πρέπει να χρησιμοποιήσετε την προσθήκη html.to.figma είναι εάν έχετε ήδη σχεδιάσει έναν ιστότοπο στον οποίο έχετε χάσει την πρόσβαση. Μπορείτε να συμπληρώσετε τη σελίδα στο Figma και να ξεκινήσετε ξανά χωρίς να χρειάζεται να ξεκινήσετε ξανά.