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>
67 lines
5.2 KiB
Plaintext
67 lines
5.2 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. **Access the shared link:** You can access the project's Figma file [here](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. כך הם מאורגנים:
|
||
|
||
- **דף הרכיבים:** זהו הדף הראשון. המעצב משתמש בו ליצירה וארגון של רכיבי עיצוב חוזרים ונשנים המשמשים לאורך כל קובץ העיצוב. לדוגמה, כפתורים, אייקונים, סמלים או כל רכיב חוזר אחר. הוא משמש לשמירה על עקביות בעיצוב.
|
||
- **דף ראשי:** הדף השני הוא הדף הראשי, המציג את ממשק המשתמש המלא של הפרויקט. תוכל ללחוץ על _**נגן**_ כדי להשתמש בפרוטוטייפ האפליקציה המלא.
|
||
- **דפי תכונות:** הדפים האחרים מוקדשים בדרך כלל לתכונות בתהליך. הם מכילים את העיצוב של תכונות או מודולים ספציפיים של האפליקציה או האתר. הם בדרך כלל עדיין בתהליך.
|
||
|
||
## טיפים שימושיים
|
||
|
||
עם גישה לקריאה בלבד, אינך יכול לערוך את העיצוב, אך תוכל לגשת לכל התכונות שיהיו שימושיות להמרת העיצובים לקוד.
|
||
|
||
### השתמש במצב פיתוח
|
||
|
||
מצב הפיתוח של Figma משפר את הפרודוקטיביות של המפתחים על ידי מתן ניווט קל בעיצוב, ניהול נכסים אפקטיבי, כלי תקשורת יעילים, אינטגרציות עם תיבת כלים, קטעי קוד מהירים ומידע מרכזי על שכבות, ובכך מגשרים את הפער בין עיצוב ופיתוח. אתה יכול ללמוד עוד על מצב פיתוח [כאן](https://www.figma.com/dev-mode/).
|
||
|
||
עבור למצב "מפתח" בחלק הימני של סרגל הכלים כדי לראות את המפרטים של העיצוב, להעתיק CSS ולגשת לנכסים.
|
||
|
||
### השתמש בפרוטוטייפ
|
||
|
||
לחץ על כל רכיב על הבד ולחץ על כפתור ה"נגן" בקצה העליון הימני של הממשק כדי לגשת לתצוגת פרוטוטייפ. מצב פרוטוטייפ מאפשר לך ליצור אינטראקציה עם העיצוב כאילו היה המוצר הסופי. הוא מציג את הזרימה בין המסכים ואת האופן שבו רכיבי ממשק כמו כפתורים, קישורים או תפריטים מתנהגים בעת אינטראקציה איתם.
|
||
|
||
1. **הבנת מעברים ואנימציות:** במצב פרוטוטייפ, תוכל לצפות בכל המעברים או האנימציות שצורפו על ידי המעצב בין המסכים או רכיבי הממשק, ומספקים הנחיות ויזואליות ברורות למפתחים על ההתנהגות והסגנון המיועדים.
|
||
2. **הבהרת יישום:** פרוטוטייפ יכול גם לעזור להקטין אי הבנות. מפתחים יכולים ליצור איתו אינטראקציה כדי לקבל הבנה טובה יותר של הפונקציונליות או ההופעה של רכיבים מסוימים.
|
||
|
||
לקבלת פרטים והנחיות נוספות על פלטפורמת Figma, תוכל לבקר ב-[תיעוד הרשמי של Figma](https://help.figma.com/hc/en-us).
|
||
|
||
### מדידת מרחקים
|
||
|
||
בחר רכיב, החזק את מקש `Option` (Mac) או `Alt` (Windows), ואז רחף מעל רכיב אחר כדי לראות את המרחק ביניהם.
|
||
|
||
### הרחבה של Figma ל-VSCode (מומלץ)
|
||
|
||
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
||
מאפשרת לך לנווט ולבדוק קבצי עיצוב, לשתף פעולה עם מעצבים, לעקוב אחר שינויים ולהאיץ יישום - הכל מבלי לעזוב את עורך הטקסט שלך.
|
||
זהו חלק מההרחבות המומלצות שלנו.
|
||
|
||
## שיתוף פעולה
|
||
|
||
1. **שימוש בהערות:** תוכל להשתמש בתכונת ההערות על ידי לחיצה על הסמל הבועתי בחלק השמאלי של סרגל הכלים.
|
||
2. **צ'אט עם הסמן:** תכונה נחמדה של Figma היא הצ'אט עם הסמן. פשוט לחץ `;` ב-Mac ו-`/` ב-Windows כדי לשלוח הודעה אם אתה רואה מישהו אחר המשתמש ב-Figma באותו הזמן כמוך.
|