Figma για Αρχάριους: Πλήρης Οδηγός Σχεδιασμού UI/UX 2026

Το Figma έχει γίνει το #1 εργαλείο σχεδιασμού διεπαφών χρήστη παγκοσμίως. Εταιρείες όπως η Google, η Microsoft, η Spotify, και η Airbnb το χρησιμοποιούν ως βασικό εργαλείο για κάθε ψηφιακό προϊόν που δημιουργούν. Σε αγγελίες εργασίας για γραφίστες και σχεδιαστές στην Ελλάδα, η γνώση Figma εμφανίζεται ολοένα και πιο συχνά ως απαραίτητο προσόν, συχνά δίπλα-δίπλα με Photoshop και Illustrator.

Αλλά τι κάνει ακριβώς το Figma; Σε τι διαφέρει από το Photoshop ή το Illustrator; Και πώς ξεκινάει κάποιος από το μηδέν;

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

Τι Είναι το Figma και Γιατί Όλοι Μιλούν Γι’ Αυτό

Το Figma είναι ένα εργαλείο σχεδιασμού που λειτουργεί απευθείας στον φυλλομετρητή. Δεν χρειάζεται εγκατάσταση, δεν χρειάζεται ακριβό υπολογιστή, και δεν χρειάζεται να στέλνετε αρχεία με email. Όλοι δουλεύουν στο ίδιο αρχείο, ταυτόχρονα, σε πραγματικό χρόνο.

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

Για Ποιους Είναι το Figma

Σχεδιαστές UI/UX: Αυτό είναι το βασικό κοινό του Figma. Αν θέλετε να σχεδιάσετε εφαρμογές για κινητά ή ιστοσελίδες, το Figma είναι το εργαλείο που χρησιμοποιεί σχεδόν ο κάθε επαγγελματίας του χώρου.

Γραφίστες που θέλουν να μπουν στο digital design: Αν ξέρετε Photoshop ή Illustrator, το Figma θα σας φανεί γνώριμο σε πολλά σημεία, αλλά έχει εργαλεία ειδικά φτιαγμένα για ψηφιακά προϊόντα.

Προγραμματιστές: Το Figma επιτρέπει στους προγραμματιστές να βλέπουν τον κώδικα CSS, να κατεβάζουν εικαστικά, και να μετράνε αποστάσεις χωρίς να ρωτούν τον σχεδιαστή για κάθε λεπτομέρεια.

Επιχειρηματίες και product managers: Για να δημιουργήσετε wireframes και πρωτότυπα ιδεών χωρίς να χρειάζεστε σχεδιαστή για κάθε βήμα.

Κόστος

Το Figma προσφέρει δωρεάν πλάνο για μεμονωμένους χρήστες που καλύπτει τις ανάγκες των περισσότερων αρχάριων. Το επαγγελματικό πλάνο (Figma Professional) κοστίζει περίπου €14/μήνα και χρειάζεται κυρίως για ομάδες και προχωρημένα χαρακτηριστικά.

Για να μάθετε πώς το Figma συγκρίνεται με άλλα εργαλεία σχεδιασμού, το άρθρο “Canva ή Photoshop: Ποιο να Διαλέξω;” σας βοηθά να κατανοήσετε το ευρύτερο οικοσύστημα εργαλείων.

Βήμα 1: Η Πρώτη σας Σύνδεση

Πηγαίνετε στο figma.com και δημιουργήστε δωρεάν λογαριασμό. Μπορείτε να συνδεθείτε με τον λογαριασμό Google σας.

Μόλις μπείτε, θα δείτε το αρχικό περιβάλλον (home screen) με τα αρχεία σας. Πατήστε “New design file” για να ξεκινήσετε.

Το Περιβάλλον Εργασίας

Το Figma χωρίζεται σε τέσσερα βασικά τμήματα:

Εργαλειοθήκη (πάνω αριστερά): Τα εργαλεία σχεδιασμού: επιλογή, πλαίσιο, σχήματα, κείμενο, εικόνες. Αυτό που θα χρησιμοποιείτε συνεχώς.

Λίστα στρωμάτων (αριστερά): Όλα τα στοιχεία του σχεδίου σας οργανωμένα σε ιεραρχία, όπως τα layers στο Photoshop.

Χώρος εργασίας (κέντρο): Ο καμβάς όπου σχεδιάζετε. Ανοιχτόγκριζο φόντο με άπειρη επιφάνεια.

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

Βασικές Συντομεύσεις που Πρέπει να Μάθετε Αμέσως

V: Εργαλείο επιλογής F: Δημιουργία πλαισίου (Frame) R: Ορθογώνιο T: Κείμενο Ctrl/Cmd + D: Αντιγραφή στοιχείου Ctrl/Cmd + G: Ομαδοποίηση στοιχείων Ctrl/Cmd + Z: Αναίρεση Spacebar + Drag: Μετακίνηση στον καμβά Ctrl/Cmd + Scroll: Μεγέθυνση/σμίκρυνση

Βήμα 2: Frames, όχι Artboards

Η πρώτη μεγάλη διαφορά που θα παρατηρήσετε σε σχέση με άλλα εργαλεία είναι ότι στο Figma δουλεύετε με Frames (πλαίσια), όχι με artboards.

Ένα Frame είναι το “κοντέινερ” που ορίζει μια οθόνη ή ένα τμήμα σχεδίου. Για παράδειγμα, αν σχεδιάζετε μια εφαρμογή για κινητό, κάθε οθόνη (αρχική σελίδα, σελίδα προφίλ, σελίδα ρυθμίσεων) είναι ένα ξεχωριστό Frame.

Πώς να δημιουργήσετε Frame:

1. Πατήστε F
2. Σύρετε στον καμβά για να ορίσετε το μέγεθος
3. Ή επιλέξτε από τα έτοιμα μεγέθη στα δεξιά (iPhone 15, Desktop 1440px, κλπ.)

Γιατί Frames και όχι απλά ορθογώνια; Τα Frames έχουν ιδιότητες που τα απλά σχήματα δεν έχουν: μπορείτε να ορίσετε πώς θα συμπεριφέρονται τα περιεχόμενά τους όταν αλλάξει το μέγεθος, να προσθέσετε σκιά ή γωνίες, και να χρησιμοποιήσετε auto layout (που θα δούμε παρακάτω).

Βήμα 3: Σχήματα, Κείμενο, και Βασικός Σχεδιασμός

Σχήματα

Πατήστε R για ορθογώνιο, O για κύκλο. Σύρετε στον καμβά για να σχεδιάσετε. Στα δεξιά, ρυθμίζετε:

• Πλάτος/Ύψος: Ακριβείς διαστάσεις σε εικονοστοιχεία
• Χρώμα πλήρωσης (Fill): Κλικ στο έγχρωμο τετράγωνο
• Περίγραμμα (Stroke): Χρώμα και πάχος
• Γωνίες (Corner radius): Για στρογγυλεμένες γωνίες

Κείμενο

Πατήστε T, κλικ στον καμβά, και γράψτε. Στα δεξιά επιλέγετε γραμματοσειρά, μέγεθος, στυλ, και χρώμα.

Σημαντικό: Το Figma έχει πρόσβαση σε όλες τις γραμματοσειρές Google Fonts δωρεάν, χωρίς να χρειάζεται να τις εγκαταστήσετε.

Ευθυγράμμιση και Κατανομή

Επιλέξτε δύο ή περισσότερα στοιχεία και χρησιμοποιήστε τα εργαλεία ευθυγράμμισης στα δεξιά για να τα τακτοποιήσετε άψογα. Το “Distribute spacing” κατανέμει τα στοιχεία με ίσες αποστάσεις αυτόματα, εξοικονομώντας ώρες χειροκίνητης ευθυγράμμισης.

Βήμα 4: Components, το Μυστικό της Αποδοτικότητας

Αν μάθετε μόνο ένα πράγμα από αυτόν τον οδηγό, ας είναι τα Components.

Ένα Component είναι ένα επαναχρησιμοποιήσιμο στοιχείο. Φανταστείτε ότι σχεδιάζετε ένα κουμπί “Αγορά τώρα” που εμφανίζεται 50 φορές στην εφαρμογή σας. Αν δεν χρησιμοποιήσετε Component, πρέπει να αλλάξετε και τα 50 κουμπιά χειροκίνητα όταν αποφασίσετε να αλλάξετε το χρώμα. Με Component, αλλάζετε το πρωτότυπο και όλα τα αντίγραφα ενημερώνονται αυτόματα.

Πώς να δημιουργήσετε Component:

1. Σχεδιάστε το στοιχείο σας (π.χ. ένα κουμπί)
2. Επιλέξτε το
3. Πατήστε Ctrl/Cmd + Alt + K ή δεξί κλικ → “Create component”
4. Το πρωτότυπο εμφανίζεται με μοβ πλαίσιο στη λίστα στρωμάτων

Πώς να χρησιμοποιήσετε αντίγραφο (Instance): Σύρετε το component από τη λίστα στοιχείων (Assets panel) στον καμβά. Κάθε φορά που το σύρετε, δημιουργείτε ένα νέο αντίγραφο που παραμένει συνδεδεμένο με το πρωτότυπο.

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

Βήμα 5: Auto Layout, το Πιο Ισχυρό Χαρακτηριστικό

Το Auto Layout είναι αυτό που κάνει τα σχέδια Figma να “ζωντανεύουν” και να συμπεριφέρονται όπως πραγματικές ιστοσελίδες.

Χωρίς Auto Layout, αν προσθέσετε κείμενο σε ένα κουμπί, το κουμπί δεν αλλάζει μέγεθος αυτόματα. Πρέπει να το μεγαλώσετε χειροκίνητα. Με Auto Layout, το κουμπί μεγαλώνει και συρρικνώνεται ανάλογα με το περιεχόμενό του, ακριβώς όπως στο πραγματικό CSS.

Πώς να ενεργοποιήσετε Auto Layout:

1. Επιλέξτε ένα Frame ή ένα Component
2. Πατήστε Shift + A
3. Ρυθμίστε κατεύθυνση (οριζόντια ή κατακόρυφη), κενά μεταξύ στοιχείων, και εσωτερική απόσταση (padding)

Πρακτικό παράδειγμα: Δημιουργήστε ένα κουμπί:

1. Δημιουργήστε ορθογώνιο με μπλε χρώμα
2. Προσθέστε λευκό κείμενο “Αγορά τώρα” πάνω του
3. Επιλέξτε και τα δύο, ομαδοποιήστε σε Frame
4. Ενεργοποιήστε Auto Layout (Shift + A)
5. Ορίστε padding: 12px πάνω-κάτω, 24px αριστερά-δεξιά

Τώρα αλλάξτε το κείμενο σε “Αγορά τώρα με 20% έκπτωση”. Το κουμπί μεγαλώνει αυτόματα. Αυτό είναι Auto Layout.

Για να δείτε πώς ο σχεδιασμός UI/UX συνδέεται με την επαγγελματική γραφιστική, το άρθρο “Γραφίστας Μισθοί Ελλάδα 2026” σας δείχνει γιατί η γνώση Figma αυξάνει σημαντικά τις αμοιβές.

Βήμα 6: Prototyping, Κάντε το Σχέδιο να Κινείται

Ένα από τα πιο εντυπωσιακά χαρακτηριστικά του Figma είναι η δυνατότητα να δημιουργείτε διαδραστικά πρωτότυπα χωρίς να γράψετε ούτε μία γραμμή κώδικα.

Τι είναι το Prototyping; Είναι η διαδικασία σύνδεσης οθονών μεταξύ τους ώστε το σχέδιο να λειτουργεί σαν πραγματική εφαρμογή. Πατάτε ένα κουμπί και “μεταβαίνετε” στην επόμενη οθόνη, ακριβώς όπως θα γινόταν αν ήταν εγκατεστημένη στο κινητό σας.

Πώς να δημιουργήσετε Prototype:

1. Πηγαίνετε στην καρτέλα Prototype (πάνω δεξιά, δίπλα στο “Design”)
2. Επιλέξτε ένα στοιχείο (π.χ. κουμπί)
3. Θα δείτε έναν κύκλο στη δεξιά πλευρά του στοιχείου. Σύρετέ τον στην οθόνη προορισμού
4. Ρυθμίστε την κίνηση μετάβασης (Dissolve, Slide, Push, κλπ.)
5. Πατήστε Play (πάνω δεξιά) για να δείτε το αποτέλεσμα

Το πρωτότυπο μπορείτε να το στείλετε σε πελάτες ή συνεργάτες με έναν σύνδεσμο. Μπορούν να το δουν στον φυλλομετρητή τους χωρίς να έχουν λογαριασμό Figma.

Βήμα 7: Συνεργασία και Σχόλια

Αυτό είναι όπου το Figma ξεχωρίζει από κάθε άλλο εργαλείο.

Πρόσκληση συνεργατών: Πατήστε “Share” (πάνω δεξιά) και εισάγετε τη διεύθυνση email. Μπορείτε να δώσετε δικαίωμα επεξεργασίας ή μόνο προβολής.

Σχόλια: Πατήστε C για να μπείτε στη λειτουργία σχολίων. Κλικ οπουδήποτε στον καμβά για να αφήσετε σχόλιο. Ο συνεργάτης σας θα λάβει ειδοποίηση και μπορεί να απαντήσει απευθείας στο αρχείο, χωρίς email ή Slack.

Cursor presence: Όταν ένας συνεργάτης είναι ταυτόχρονα στο αρχείο, βλέπετε τον κursor του σε πραγματικό χρόνο. Είναι η ίδια εμπειρία με το Google Docs, αλλά για σχέδια.

Βήμα 8: Plugins, Επεκτείνετε τις Δυνατότητές σας

Το Figma έχει μια τεράστια βιβλιοθήκη plugins που επεκτείνουν τις λειτουργίες του.

5 Plugins που Πρέπει να Εγκαταστήσετε:

Unsplash: Εισάγετε δωρεάν επαγγελματικές φωτογραφίες απευθείας στο σχέδιό σας χωρίς να βγείτε από το Figma.

Lorem Ipsum: Δημιουργεί αυτόματα κείμενο πλαστού περιεχομένου για να γεμίσετε τις οθόνες σας κατά τη φάση του σχεδιασμού.

Iconify: Πρόσβαση σε εκατοντάδες χιλιάδες δωρεάν εικονίδια από πολλαπλές βιβλιοθήκες (Material Icons, Feather, Font Awesome) χωρίς να φύγετε από το Figma.

Figmotion: Για πιο προχωρημένες κινούμενες εικόνες και animation μέσα στο Figma.

Contrast: Ελέγχει αν τα χρώματα κειμένου και φόντου πληρούν τα πρότυπα προσβασιμότητας (WCAG), κάτι απαραίτητο για επαγγελματικά έργα.

Εγκατάσταση Plugin: Δεξί κλικ στον καμβά → Plugins → Browse plugins in Community.

Βήμα 9: Developer Handoff, Η Γέφυρα με τους Προγραμματιστές

Ένα από τα μεγάλα προβλήματα στις ομάδες ανάπτυξης είναι η επικοινωνία μεταξύ σχεδιαστών και προγραμματιστών. “Τι γραμματοσειρά είναι αυτή; Πόσο padding έχει αυτό το κουτί; Τι χρώμα ακριβώς είναι αυτό το μπλε;”

Το Figma λύνει αυτό με τη λειτουργία Dev Mode (Λειτουργία Προγραμματιστή). Ο προγραμματιστής μπορεί να δει το αρχείο Figma και να πάρει αυτόματα:

• Τον κώδικα CSS για κάθε στοιχείο
• Τις ακριβείς αποστάσεις μεταξύ στοιχείων
• Τα χρώματα σε hex, RGB, ή HSL
• Τις γραμματοσειρές, τα μεγέθη, και τα styles
• Τα εικαστικά σε μορφή PNG, SVG, ή WebP

Χωρίς Dev Mode, αυτές οι πληροφορίες απαιτούσαν πολλές ώρες επικοινωνίας. Τώρα ο προγραμματιστής τα βρίσκει μόνος του σε δευτερόλεπτα.

Πόσος Χρόνος Χρειάζεται για να Μάθετε Figma

Βασική επάρκεια (frames, shapes, text, components): 1-2 εβδομάδες

Ενδιάμεσο επίπεδο (auto layout, prototyping, plugins): 1-2 μήνες

Προχωρημένο (design systems, variables, advanced prototyping): 3-6 μήνες

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

Για δομημένη εκπαίδευση στο Figma με instructor feedback, τα σεμινάρια γραφιστικής του TeachMe.gr προσφέρουν structured learning paths.

Figma vs Sketch vs Adobe XD

Οι αρχάριοι συχνά ρωτούν γιατί Figma και όχι Sketch ή Adobe XD.

Sketch: Διαθέσιμο μόνο σε Mac, συνδρομή €99/χρόνο. Δεν υπάρχει πραγματική συνεργασία σε πραγματικό χρόνο. Η κοινότητά του μικραίνει.

Adobe XD: Η Adobe σταμάτησε την ενεργή ανάπτυξη του XD το 2023. Εξακολουθεί να υπάρχει αλλά δεν λαμβάνει σημαντικές ενημερώσεις.

Figma: Διαθέσιμο σε όλα τα λειτουργικά συστήματα, δωρεάν για αρχάριους, ανοικτή συνεργασία, συνεχής ανάπτυξη. Χρησιμοποιείται από τις μεγαλύτερες εταιρείες τεχνολογίας στον κόσμο.

Η επιλογή δεν είναι δύσκολη το 2026. Το Figma έχει κερδίσει αυτή τη μάχη.

Συνηθισμένα Λάθη Αρχαρίων

Δεν χρησιμοποιούν Components από την αρχή. Αρχίζουν να σχεδιάζουν και αντιγράφουν στοιχεία χειροκίνητα αντί να φτιάχνουν Components. Μετά από 50 οθόνες, οποιαδήποτε αλλαγή γίνεται εφιάλτης.

Αγνοούν το Auto Layout. Φτιάχνουν στατικά σχέδια που δεν ανταποκρίνονται σε αλλαγές περιεχομένου. Αποτέλεσμα: κάθε μικρή τροποποίηση απαιτεί χειροκίνητη αναδιάταξη.

Δεν οργανώνουν τη λίστα στρωμάτων. Στοιχεία με ονόματα “Rectangle 47”, “Frame 23”, “Group 8”. Σε έργα με πολλές οθόνες αυτό οδηγεί σε χάος.

Αρχίζουν να σχεδιάζουν χωρίς wireframe. Πηδούν απευθείας στα χρώματα και τα γραφικά χωρίς να έχουν σκεφτεί πρώτα τη δομή και τη ροή.

Πρακτικό Έργο για Αρχάριους

Ο καλύτερος τρόπος να μάθετε Figma είναι να φτιάξετε κάτι συγκεκριμένο. Ξεκινήστε με αυτό:

Σχεδιάστε 3 οθόνες για μια εφαρμογή καιρού:

1. Αρχική οθόνη: Θερμοκρασία, εικονίδιο καιρού, πρόβλεψη εβδομάδας
2. Οθόνη αναζήτησης: Πεδίο αναζήτησης, λίστα πρόσφατων πόλεων
3. Οθόνη λεπτομερειών: Ωριαία πρόβλεψη, υγρασία, ταχύτητα ανέμου

Σχεδιάστε πρώτα wireframes (μόνο γκρι σχήματα, χωρίς χρώματα). Μετά προσθέστε χρώματα και γραφικά. Στο τέλος, συνδέστε τις οθόνες με Prototype.

Αυτό το έργο καλύπτει όλα τα βασικά: Frames, Components, Auto Layout, και Prototyping.

Συμπεράσματα

Το Figma δεν είναι απλά ένα εργαλείο σχεδιασμού. Είναι η γλώσσα επικοινωνίας ανάμεσα σε σχεδιαστές, προγραμματιστές, και επιχειρήσεις στη σύγχρονη ψηφιακή οικονομία. Η γνώση του ανοίγει πόρτες σε καριέρες UI/UX σχεδιασμού, product design, και ψηφιακής γραφιστικής.

Τα βασικά που μάθατε σήμερα:

• Τι είναι το Figma και γιατί είναι το #1 εργαλείο του κλάδου
• Frames, Shapes, Text: τα θεμέλια κάθε σχεδίου
• Components: επαναχρησιμοποιήσιμα στοιχεία για συνέπεια και ταχύτητα
• Auto Layout: σχέδια που προσαρμόζονται αυτόματα
• Prototyping: διαδραστικά πρωτότυπα χωρίς κώδικα
• Συνεργασία: σχεδιασμός σε πραγματικό χρόνο με την ομάδα

Ξεκινήστε με το δωρεάν πλάνο σήμερα. Φτιάξτε το πρώτο σας Frame. Σε μία εβδομάδα θα έχετε ήδη ένα πρώτο πρωτότυπο. Και σε τρεις μήνες, το Figma θα είναι φυσικό κομμάτι του τρόπου που σκέφτεστε για τον ψηφιακό σχεδιασμό.

Συχνές Ερωτήσεις

Ετικέτες: figma για αρχάριους, figma tutorial, UI UX σχεδιασμός, figma ελληνικά, εκμάθηση figma, σχεδιασμός εφαρμογών, user interface design, figma components, figma prototyping, ψηφιακή γραφιστική

Εσωτερικοί Σύνδεσμοι:

• Graphic Design Master Collection
• Γραφίστας Μισθοί Ελλάδα 2026
• Canva ή Photoshop: Ποιο να Διαλέξω;
• InDesign για Αρχάριους
• Logo Design: Πώς να Σχεδιάσετε Επαγγελματικό Λογότυπο
• Σεμινάρια Γραφιστικής
• Όλα τα Online Σεμινάρια

Εξωτερικοί Σύνδεσμοι:

• Figma Official
• Figma Community (Plugins & Templates)
• Figma YouTube Channel