[{"data":1,"prerenderedAt":191},["ShallowReactive",2],{"blog:design-mirror-for-figma:el":3},{"id":4,"title":5,"body":6,"cover":174,"description":175,"draft":176,"extension":177,"locale":178,"meta":179,"navigation":180,"path":181,"publishedAt":182,"seo":183,"stem":184,"tags":185,"__hash__":190},"blog\u002Fblog\u002Fdesign-mirror-for-figma.el.md","Πέτυχε Pixel-Perfect Υλοποίηση με το Design Mirror for Figma",{"type":7,"value":8,"toc":162},"minimark",[9,13,16,19,24,27,30,34,42,45,49,84,87,91,94,121,125,128,132,135,139,153],[10,11,12],"p",{},"Έχω χάσει το μέτρημα του πόσες φορές έκανα αυτόν τον χορό: γράφω λίγο CSS, κάνω refresh τον browser, βγάζω ένα screenshot, το κάνω paste στο Figma, το βάζω πάνω από το design, εντοπίζω τις διαφορές, γυρνάω στο VS Code, διορθώνω, ξανά από την αρχή.",[10,14,15],{},"Είναι κουραστικό. Είναι αργό. Και παρά την προσπάθεια, πάλι μου ξέφευγαν πράγματα — ένα padding που ήταν 12px αντί για 16px, ένα font weight λίγο εκτός.",[10,17,18],{},"Χρειαζόμουν έναν καλύτερο τρόπο.",[20,21,23],"h2",{"id":22},"το-πρόβλημα-του-workflow","Το Πρόβλημα του Workflow",[10,25,26],{},"Όταν υλοποιείς ένα design, αλλάζεις διαρκώς context. Το Figma σε ένα παράθυρο, ο code editor σου σε άλλο, ο browser κάπου αλλού. Προσπαθείς να κρατήσεις το design στο μυαλό σου ενώ γράφεις κώδικα, και μετά να συγκρίνεις οπτικά.",[10,28,29],{},"Το νοητικό κόστος συσσωρεύεται. Και οι λεπτομέρειες σε επίπεδο pixel; Αυτές ξεφεύγουν.",[20,31,33],{"id":32},"κι-αν-το-design-μπορούσε-να-επιπλέει-από-πάνω","Κι Αν το Design Μπορούσε να Επιπλέει από Πάνω;",[10,35,36,37,41],{},"Η ιδέα ήταν απλή: κι αν μπορούσα να δω το design του Figma ",[38,39,40],"em",{},"ακριβώς πάνω"," από την υλοποίησή μου; Ένα διαφανές overlay που θα μπορούσα να τοποθετήσω πάνω από τον browser μου, αφήνοντάς με να δω ακριβώς πού δεν ταιριάζουν τα πράγματα.",[10,43,44],{},"Αυτό είναι το Design Mirror for Figma.",[20,46,48],{"id":47},"πώς-λειτουργεί","Πώς Λειτουργεί",[50,51,52,60,66,72,78],"ol",{},[53,54,55,59],"li",{},[56,57,58],"strong",{},"Συνδέσου στο Figma"," μέσω ασφαλούς OAuth — τα πραγματικά σου αρχεία Figma, όχι screenshots",[53,61,62,65],{},[56,63,64],{},"Διάλεξε οποιοδήποτε frame"," από τα projects σου",[53,67,68,71],{},[56,69,70],{},"Τοποθέτησε το overlay"," πάνω από το παράθυρο του browser σου",[53,73,74,77],{},[56,75,76],{},"Ρύθμισε το opacity και την κλίμακα"," για να βλέπεις και το design και την υλοποίησή σου",[53,79,80,83],{},[56,81,82],{},"Γράψε κώδικα με ακρίβεια"," — οι διαφορές γίνονται αμέσως προφανείς",[10,85,86],{},"Τέλος με το να αλλάζεις παράθυρα. Τέλος με το «μήπως αυτό φαίνεται σωστό;». Απλά άμεση οπτική σύγκριση.",[20,88,90],{"id":89},"λειτουργίες-γεννημένες-από-πραγματική-ανάπτυξη","Λειτουργίες Γεννημένες από Πραγματική Ανάπτυξη",[10,92,93],{},"Κάθε λειτουργία προήλθε από το δικό μου front-end workflow:",[95,96,97,103,109,115],"ul",{},[53,98,99,102],{},[56,100,101],{},"Υποστήριξη πολλαπλών οθονών"," επειδή γράφω κώδικα σε μία οθόνη και κάνω preview στον browser σε άλλη",[53,104,105,108],{},[56,106,107],{},"Συντομεύσεις πληκτρολογίου"," επειδή το να πιάνεις διαρκώς το ποντίκι σπάει τη ροή",[53,110,111,114],{},[56,112,113],{},"Έλεγχοι ακριβείας"," επειδή μερικές φορές χρειάζεται να μετακινήσεις το overlay κατά 1px κάθε φορά",[53,116,117,120],{},[56,118,119],{},"Αυτόματη διαστασιοδότηση"," — το overlay ταιριάζει με τις ακριβείς διαστάσεις του frame σου στο Figma, οπότε το preview στον browser σου έχει πάντα το σωστό μέγεθος",[20,122,124],{"id":123},"σεβασμός-στην-ιδιωτικότητα","Σεβασμός στην Ιδιωτικότητα",[10,126,127],{},"Η εφαρμογή έχει πρόσβαση μόνο στα αρχεία Figma που εσύ επιλέγεις ρητά. Κανένα tracking, καθόλου analytics. Οι ρυθμίσεις αποθηκεύονται τοπικά και στο iCloud σου. Το έφτιαξα για τη δική μου δουλειά design — δεν με ενδιαφέρει να ξέρω οτιδήποτε για τη δική σου.",[20,129,131],{"id":130},"το-αποτέλεσμα","Το Αποτέλεσμα",[10,133,134],{},"Πλέον βγάζω πιο γυαλισμένα websites. Εκείνες οι διακριτικές λεπτομέρειες που μου ξέφευγαν — τα margins, τα spacing, η στοίχιση — τις πιάνω πριν κάνω commit. Το εργαλείο αποπληρώθηκε την πρώτη φορά που έπιασα ένα κακοστοιχισμένο στοιχείο πριν από μια review πελάτη.",[20,136,138],{"id":137},"απαιτήσεις","Απαιτήσεις",[95,140,141,144,147,150],{},[53,142,143],{},"macOS 15.5 ή νεότερο",[53,145,146],{},"Λογαριασμός Figma",[53,148,149],{},"Σύνδεση στο internet για την ενσωμάτωση με το Figma",[53,151,152],{},"Ειλικρινά, αρκεί και ένα export του design",[10,154,155],{},[156,157,161],"a",{"href":158,"rel":159},"https:\u002F\u002Flostendfound.com\u002Fdesign-mirror-for-figma",[160],"nofollow","Κατέβασέ το από το Mac App Store →",{"title":163,"searchDepth":164,"depth":164,"links":165},"",3,[166,168,169,170,171,172,173],{"id":22,"depth":167,"text":23},2,{"id":32,"depth":167,"text":33},{"id":47,"depth":167,"text":48},{"id":89,"depth":167,"text":90},{"id":123,"depth":167,"text":124},{"id":130,"depth":167,"text":131},{"id":137,"depth":167,"text":138},null,"Έχω χάσει το μέτρημα του πόσες φορές έκανα αυτόν τον χορό: γράφω λίγο CSS, κάνω refresh τον browser, βγάζω ένα screenshot, το κάνω paste στο Figma. Χρειαζόμουν έναν καλύτερο τρόπο.",false,"md","el",{},true,"\u002Fblog\u002Fdesign-mirror-for-figma.el","2026-02-07",{"title":5,"description":175},"blog\u002Fdesign-mirror-for-figma.el",[186,187,188,189],"apple-apps","figma","web-development","design-mirror","QZy8bf7Z9vxTdvgGi3lGVrPyfDGwkdrGppY9mx7IdQw",1783603483266]