Συμβουλές για Διανυσματικά Στοιχεία στο Figma

Συμβουλές για Διανύσματα στο FigmaΤα διανύσματα είναι ένα σημαντικό μέρος οποιασδήποτε εφαρμογής σχεδιασμού UI ή προτυποποίησης και το Figma έχει το δικό της ισχυρό και μοναδικό σύνολο από εργαλεία για διανύσματα. Εδώ είναι μερικές γρήγορες συμβουλές και κόλπα για να σας βοηθήσουν να τα χρησιμοποιήσετε πιο αποτελεσματικά.

Παρακολουθήστε τις Συμβουλές

1. Χρησιμοποιήστε Δίκτυα Διανυσμάτων για Πολύπλοκα Σχήματα

To Figma έχει ορισμένα εξαιρετικά και μοναδικά χαρακτηριστικά για διανύσματα, ένα από τα οποία είναι τα "δίκτυα διανυσμάτων" του.

Για παράδειγμα, αν έχετε ένα σύνθετο πολύγωνο σαν ένα αστέρι, επιλέξτε το, στη συνέχεια, πατήστε το κουμπί Edit Object για να επεξεργαστείτε τους κόμβους και μονοπάτια του. Κανονικά, σε όλες τις άλλες εφαρμογές σχεδίασης διανυσμάτων, ένας κόμβος μπορεί να έχει όχι περισσότερο από δύο γραμμές που προέρχονται από αυτό. Το Figma, ωστόσο, μας επιτρέπει να χρησιμοποιήσουμε το εργαλείο Pen για να σχεδιάσουμε επιπλέον γραμμές από κάθε σημείο, ίσως ακόμη και να ενώσουμε δύο σημεία. Ρίξτε μια ματιά στο screenshot παρακάτω για να δείτε πώς κάθε ένας από τους εσωτερικούς κόμβους έχει τρεις γραμμές που προέρχονται από αυτό, δημιουργώντας ουσιαστικά ένα πρόσθετο σχήμα εντός του αρχικού πολυγώνου.

2. Επικολλήστε Κώδικα SVG Άμεσα

Αυτό το χαρακτηριστικό γνώρισμα είναι πραγματικά χρήσιμο. Το Figma θα σας επιτρέψει να αντιγράψετε SVG κώδικα από ένα εξωτερικό αρχείο προέλευσης και, στη συνέχεια, να το επικολλήσετε στο Figma-αυτό θα δημιουργήσει ένα διανυσματικό επίπεδο για σας που θα περιέχει τα SVG.

3. Αντιγράψτε Διανύσματα ως Κώδικα SVG

Επιλέξτε οποιοδήποτε διανυσματικό στοιχείο μέσα στο σχέδιό σας και, στη συνέχεια, κάντε δεξί κλικ για να εμφανιστεί ένα αναδυόμενο μενού. Πηγαίνετε στο Copy as > Copy as SVG και, στη συνέχεια, θα έχετε τον κώδικα SVG στο πρόχειρο σας, έτοιμο να τον επικολλήσετε σε οποιοδήποτε web project σας.

Πόροι Μάθησης για το Figma

Αυτές ήταν μερικές γρήγορες συμβουλές για να δουλέψετε με διανυσματικά στοιχεία στο Figma. Για να σας βοηθήσουμε να πάτε τις γνώσεις σας στο επόμενο επίπεδο έχουμε μια σειρά μαθημάτων για το Figma στο Tuts+:

• Σχεδιασμός UI
  Εισαγωγή στο Figma
  Adi Purdila
• Figma
  Πέρα από τα Βασικά: Figma
  Ένας οδηγός για την Δημιουργία Προτύπων σε Figma
• Figma
  Ένας οδηγός για την Δημιουργία Προτύπων σε Figma
  Adi Purdila

• Συγχαρητήρια στους Carmel DeAmicis και Valerie Veteto για τις τακτικές συμβουλές τους στην κοινότητα - βρείτε και δείτε τη δουλειά τους!
• blog.figma.com
  
• www.figma.com
• SVG Αμάξι από Yorksel στο CodePen