github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
66 lines
8.1 KiB
Plaintext
66 lines
8.1 KiB
Plaintext
---
|
|
title: Εργασία με Figma
|
|
info: Learn how you can collaborate with Twenty's Figma
|
|
image: /images/user-guide/objects/objects.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Το Figma είναι ένα συνεργατικό εργαλείο σχεδιασμού διεπαφής που βοηθά στη γεφύρωση του επικοινωνιακού χάσματος μεταξύ σχεδιαστών και προγραμματιστών.
|
|
Αυτός ο οδηγός εξηγεί πώς μπορείτε να συνεργαστείτε με το Figma.
|
|
|
|
## Πρόσβαση
|
|
|
|
1. **Πρόσβαση στον κοινό σύνδεσμο:** Μπορείτε να αποκτήσετε πρόσβαση στο αρχείο σχεδίασης του έργου [εδώ](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
|
2. **Σύνδεση:** Αν δεν είστε ήδη συνδεδεμένοι, το Figma θα σας προτρέψει να το κάνετε.
|
|
Βασικά χαρακτηριστικά είναι διαθέσιμα μόνο σε συνδεδεμένους χρήστες, όπως η λειτουργία προγραμματιστή και η δυνατότητα επιλογής ενός συγκεκριμένου πλαισίου.
|
|
|
|
<Warning>
|
|
|
|
Δεν θα μπορέσετε να συνεργαστείτε αποτελεσματικά χωρίς λογαριασμό.
|
|
|
|
</Warning>
|
|
|
|
## Δομή Figma
|
|
|
|
On the left sidebar, you can access the different pages of Twenty's Figma. This is how they're organized:
|
|
|
|
- **Σελίδα Εξαρτημάτων:** Αυτή είναι η πρώτη σελίδα. Ο σχεδιαστής τη χρησιμοποιεί για να δημιουργήσει και να οργανώσει τα επαναχρησιμοποιούμενα στοιχεία σχεδίασης που χρησιμοποιούνται σε όλο το αρχείο σχεδίασης. Για παράδειγμα, κουμπιά, εικονίδια, σύμβολα, ή οποιοδήποτε άλλο επαναχρησιμοποιούμενο στοιχείο. Υπηρετεί στη διατήρηση της συνέπειας σε ολόκληρο το σχέδιο.
|
|
- **Κύρια σελίδα:** Η δεύτερη σελίδα είναι η κύρια σελίδα, η οποία δείχνει την πλήρη διεπαφή χρήστη του έργου. Μπορείτε να πατήσετε _**Play**_ για να χρησιμοποιήσετε το πλήρες πρωτότυπο της εφαρμογής.
|
|
- **Features pages:** The other pages are typically dedicated to features in progress. Περιέχουν τον σχεδιασμό συγκεκριμένων χαρακτηριστικών ή μονάδων της εφαρμογής ή ιστοσελίδας. Συνήθως βρίσκονται σε εξέλιξη.
|
|
|
|
## Χρήσιμες Συμβουλές
|
|
|
|
Με πρόσβαση μόνο για ανάγνωση, δεν μπορείτε να επεξεργαστείτε τον σχεδιασμό, αλλά μπορείτε να αποκτήσετε πρόσβαση σε όλα τα χαρακτηριστικά που θα είναι χρήσιμα για τη μετατροπή των σχεδίων σε κώδικα.
|
|
|
|
### Χρησιμοποιήστε τη λειτουργία Dev
|
|
|
|
Η Λειτουργία Ανάπτυξης του Figma αυξάνει την παραγωγικότητα των προγραμματιστών παρέχοντας εύκολη πλοήγηση στο σχέδιο, αποτελεσματική διαχείριση πόρων, αποδοτικά εργαλεία επικοινωνίας, ενσωματώσεις εργαλειοθήκης, γρήγορους κωδικούς αποσπάσματα και βασικές πληροφορίες επιπέδου, γεφυρώνοντας το χάσμα μεταξύ σχεδίασης και ανάπτυξης. Μπορείτε να μάθετε περισσότερα σχετικά με τη Λειτουργία Ανάπτυξης [εδώ](https://www.figma.com/dev-mode/).
|
|
|
|
Μεταβείτε στη "Λειτουργία Προγραμματιστή" στο δεξί μέρος της γραμμής εργαλείων για να δείτε τις προδιαγραφές σχεδιασμού, να αντιγράψετε CSS και να αποκτήσετε πρόσβαση σε πόρους.
|
|
|
|
### Χρησιμοποιήστε το Πρωτότυπο
|
|
|
|
Κάντε κλικ σε οποιοδήποτε στοιχείο στον καμβά και πατήστε το κουμπί “Play” στο δεξί πάνω άκρο της διεπαφής για να αποκτήσετε πρόσβαση στην προβολή πρωτοτύπου. Η λειτουργία Πρωτότυπου σας επιτρέπει να αλληλεπιδράσετε με το σχέδιο σαν να ήταν το τελικό προϊόν. Δείχνει τη ροή μεταξύ των οθονών και πώς τα στοιχεία της διεπαφής όπως κουμπιά, σύνδεσμοι ή μενού συμπεριφέρονται όταν αλληλεπιδρούνται.
|
|
|
|
1. **Κατανόηση μεταβάσεων και κινήσεων:** Στη λειτουργία Πρωτοτύπου, μπορείτε να δείτε οποιεσδήποτε μεταβάσεις ή κινήσεις που προστέθηκαν από έναν σχεδιαστή μεταξύ οθονών ή στοιχείων διεπαφής, παρέχοντας σαφείς οπτικές οδηγίες στους προγραμματιστές σχετικά με την προβλεπόμενη συμπεριφορά και το στυλ.
|
|
2. **Αποσαφήνιση υλοποίησης:** Ένα πρωτότυπο μπορεί επίσης να βοηθήσει στη μείωση των ασαφειών. Οι προγραμματιστές μπορούν να αλληλεπιδράσουν με αυτό για να αποκτήσουν μια καλύτερη κατανόηση της λειτουργικότητας ή της εμφάνισης συγκεκριμένων στοιχείων.
|
|
|
|
Για πιο αναλυτικές λεπτομέρειες και οδηγίες για την εκμάθηση της πλατφόρμας Figma, μπορείτε να επισκεφθείτε το επίσημο [Τεκμηρίωση Figma](https://help.figma.com/hc/en-us).
|
|
|
|
### Μέτρηση αποστάσεων
|
|
|
|
Επιλέξτε ένα στοιχείο, κρατήστε πατημένο το `Option` πλήκτρο (Mac) ή το `Alt` πλήκτρο (Windows), στη συνέχεια τοποθετήστε τον κέρσορα πάνω από ένα άλλο στοιχείο για να δείτε την απόσταση μεταξύ τους.
|
|
|
|
### Επέκταση Figma για VSCode (Συνιστάται)
|
|
|
|
[Figma για VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) σας επιτρέπει να πλοηγηθείτε και να επιθεωρήσετε αρχεία σχεδίασης, να συνεργαστείτε με σχεδιαστές, να παρακολουθήσετε αλλαγές και να επιταχύνετε την υλοποίηση - όλα χωρίς να αφήσετε τον επεξεργαστή κειμένου σας.
|
|
Είναι μέρος των συνιστώμενων επεκτάσεων μας.
|
|
|
|
## Συνεργασία
|
|
|
|
1. **Χρησιμοποιώντας σχόλια:** Μπορείτε να χρησιμοποιήσετε τη λειτουργία σχολίων κάνοντας κλικ στο εικονίδιο φούσκας στην αριστερή πλευρά της γραμμής εργαλείων.
|
|
2. **Συνομιλία Δρομέα:** Ένα ωραίο χαρακτηριστικό του Figma είναι η Συνομιλία Δρομέα. Απλώς πατήστε `;` σε Mac και `/` στα Windows για να στείλετε ένα μήνυμα αν δείτε κάποιον άλλο να χρησιμοποιεί το Figma την ίδια ώρα με εσάς.
|