Έχω χάσει το μέτρημα του πόσες φορές έκανα αυτόν τον χορό: γράφω λίγο CSS, κάνω refresh τον browser, βγάζω ένα screenshot, το κάνω paste στο Figma, το βάζω πάνω από το design, εντοπίζω τις διαφορές, γυρνάω στο VS Code, διορθώνω, ξανά από την αρχή.
Είναι κουραστικό. Είναι αργό. Και παρά την προσπάθεια, πάλι μου ξέφευγαν πράγματα — ένα padding που ήταν 12px αντί για 16px, ένα font weight λίγο εκτός.
Χρειαζόμουν έναν καλύτερο τρόπο.
Το Πρόβλημα του Workflow
Όταν υλοποιείς ένα design, αλλάζεις διαρκώς context. Το Figma σε ένα παράθυρο, ο code editor σου σε άλλο, ο browser κάπου αλλού. Προσπαθείς να κρατήσεις το design στο μυαλό σου ενώ γράφεις κώδικα, και μετά να συγκρίνεις οπτικά.
Το νοητικό κόστος συσσωρεύεται. Και οι λεπτομέρειες σε επίπεδο pixel; Αυτές ξεφεύγουν.
Κι Αν το Design Μπορούσε να Επιπλέει από Πάνω;
Η ιδέα ήταν απλή: κι αν μπορούσα να δω το design του Figma ακριβώς πάνω από την υλοποίησή μου; Ένα διαφανές overlay που θα μπορούσα να τοποθετήσω πάνω από τον browser μου, αφήνοντάς με να δω ακριβώς πού δεν ταιριάζουν τα πράγματα.
Αυτό είναι το Design Mirror for Figma.
Πώς Λειτουργεί
- Συνδέσου στο Figma μέσω ασφαλούς OAuth — τα πραγματικά σου αρχεία Figma, όχι screenshots
- Διάλεξε οποιοδήποτε frame από τα projects σου
- Τοποθέτησε το overlay πάνω από το παράθυρο του browser σου
- Ρύθμισε το opacity και την κλίμακα για να βλέπεις και το design και την υλοποίησή σου
- Γράψε κώδικα με ακρίβεια — οι διαφορές γίνονται αμέσως προφανείς
Τέλος με το να αλλάζεις παράθυρα. Τέλος με το «μήπως αυτό φαίνεται σωστό;». Απλά άμεση οπτική σύγκριση.
Λειτουργίες Γεννημένες από Πραγματική Ανάπτυξη
Κάθε λειτουργία προήλθε από το δικό μου front-end workflow:
- Υποστήριξη πολλαπλών οθονών επειδή γράφω κώδικα σε μία οθόνη και κάνω preview στον browser σε άλλη
- Συντομεύσεις πληκτρολογίου επειδή το να πιάνεις διαρκώς το ποντίκι σπάει τη ροή
- Έλεγχοι ακριβείας επειδή μερικές φορές χρειάζεται να μετακινήσεις το overlay κατά 1px κάθε φορά
- Αυτόματη διαστασιοδότηση — το overlay ταιριάζει με τις ακριβείς διαστάσεις του frame σου στο Figma, οπότε το preview στον browser σου έχει πάντα το σωστό μέγεθος
Σεβασμός στην Ιδιωτικότητα
Η εφαρμογή έχει πρόσβαση μόνο στα αρχεία Figma που εσύ επιλέγεις ρητά. Κανένα tracking, καθόλου analytics. Οι ρυθμίσεις αποθηκεύονται τοπικά και στο iCloud σου. Το έφτιαξα για τη δική μου δουλειά design — δεν με ενδιαφέρει να ξέρω οτιδήποτε για τη δική σου.
Το Αποτέλεσμα
Πλέον βγάζω πιο γυαλισμένα websites. Εκείνες οι διακριτικές λεπτομέρειες που μου ξέφευγαν — τα margins, τα spacing, η στοίχιση — τις πιάνω πριν κάνω commit. Το εργαλείο αποπληρώθηκε την πρώτη φορά που έπιασα ένα κακοστοιχισμένο στοιχείο πριν από μια review πελάτη.
Απαιτήσεις
- macOS 15.5 ή νεότερο
- Λογαριασμός Figma
- Σύνδεση στο internet για την ενσωμάτωση με το Figma
- Ειλικρινά, αρκεί και ένα export του design