Figma הוא כלי נהדר שהופך במהירות למועדף בקרב מעצבי UX/UI ומעצבי אתרים. אתה יכול ליצור עיצובי אינטרנט רספונסיביים במהירות ובקלות באמצעות כלי חינמי זה מבוסס דפדפן.
בעוד שרוב האנשים יוצרים את העיצובים שלהם מאפס ב-Figma, אתה יכול לקבל השראה מאתרים אמיתיים וליצור בקלות עיצוב של Figma ישירות מדף HTML קיים. הנה איך לעשות את זה.
מדוע כדאי ליצור עיצובי Figma מ-HTML
ישנן סיבות רבות שאולי תרצה לשכפל עיצוב אינטרנט קיים כעיצוב Figma. פעולה זו באמצעות תוסף Figma חוסכת זמן, ומאפשרת לך להתמקד בכוונון עדין של העיצוב שלך.
תרגול עיצוב אתרים על ידי יצירה מחדש של דפי אינטרנט קיימים היא דרך מצוינת ללמוד מהמאסטרים. אתה יכול גם להשתמש בכלי העיצוב HTML ל- Figma אם עיצבת ופרסמת בעבר דף אינטרנט שאיבדת גישה אליו. במקום לעצב אותו מחדש מאפס, אתה יכול לחסוך זמן על ידי המרתו בחזרה ל- Figma כדי לעבוד עליו שוב.
עכשיו כשאתה יודע למה הכלי הזה יכול להיות שימושי, הגיע הזמן ללמוד איך הוא עובד.
כיצד להמיר כל אתר לעיצוב Figma
כדי להתחיל כל עבודת עיצוב מבוססת Figma, עליך לפתוח את Figma ולהיכנס או להירשם. אתה יכול להשתמש בגרסת הדפדפן, פיגמה, או הורד את אפליקציית שולחן העבודה; שניהם עובדים באותו אופן עבור הפרויקט הזה.
פתח א קובץ עיצוב חדש כדי להתחיל את פרויקט העיצוב של HTML ל- Figma.
שלב 1: הורד את הפלאגין html.to.design
כדי להיות מסוגל להמיר אתר אינטרנט חי לעיצוב של Figma, תצטרך תוסף. ישנם אינספור תוספים ב-Figma שיעזרו בעיצובים שלך, כולל תוספים ליצירת מוקאפים לטלפונים ומכשירים. תוכל להוסיף את עיצוב האתר שהומר שלך לדגם מאוחר יותר אם תרצה בכך.
כדי להוריד את התוסף, בחר את תפריט Figma (לוגו Figma) > תוספים > מצא תוספים נוספים. לחלופין, אתה יכול לבחור אֶמְצָעִי > תוספים. מכל אחת מהאפשרויות, הקלד בסרגל החיפוש html.to.design.
מצא את האפשרות שמסופקת על ידי divRIOTS ובחר לָרוּץ. זה פותח את התוסף כתיבת דו-שיח על בד Figma שלך.
שלב 2: הדבק את כתובת האתר
התוסף html.to.design הוא חינמי, אך הוא מציע גרסה מקצועית. אתה יכול להשלים את תהליך העיצוב שלך לחלוטין עם הגרסה החינמית.
מצא את האתר שאתה רוצה לעשות ממנו עיצוב Figma. עליך להשתמש באתר ציבורי - לא בדף אינטרנט שניתן לגשת אליו רק על ידי התחברות. אנחנו הולכים להשתמש בדף הבית שלנו, MakeUseOf.com.
העתק את כתובת האתר המלאה והדבק אותה בתיבת הייבוא ב- Figma, תוך החלפת מציין המיקום של אתר Apple.
שלב 3: טען את העיצוב שלך
לאחר הדבקת כתובת האתר, פתח הגדרות מתחת לתיבת הייבוא כדי לבחור את גודל העיצוב. אתה יכול לייבא את העיצוב למגוון מכשירים, אבל תהיה לך הצלחה טובה יותר בבחירת מכשיר שולחני אם השתמשת בכתובת אתר למחשב שולחני והצלחה טובה יותר בשימוש בכתובת URL לנייד עבור מכשירים ניידים.
יש גם אפשרויות מותאמות אישית עבור מכשירים או גדלים שאינם זמינים כאפשרויות ברירת מחדל. אנחנו בוחרים MacBook Pro 14 אינץ' עם אוֹר נושא.
לאחר שציינת את המכשיר שלך והצגת הגדרות, בחר יְבוּא להחיות את עיצוב ה-HTML שלך ב-Figma. המתן עד שסרגל הטעינה יושלם כדי שהעיצוב של Figma יאוכלס.
תלוי באיזה אתר השתמשת, ייתכן שתבחין בתיבה קופצת המסבירה שיש להחליף כמה גופים. זה יהיה בשל זכויות יוצרים עבור גופנים מורשים. Figma תחליף אותם בגופנים שיש לך גישה אליהם.
צא מכל חלונות קופצים, ואז צא מתיבת הדו-שיח של הפלאגין כדי לראות את העיצוב החדש שלך בצורתו המלאה.
שלב 4: ערוך את עיצוב Figma שלך
מכאן, אתה יכול להתחיל לערוך את דף האינטרנט של Figma שלך בכל דרך שתרצה. כאמור, פונקציית HTML ל- Figma הזו מאפשרת לך ללמוד כיצד דפי אינטרנט קיימים תוכננו כדי לעורר אותך ליצור משלך מאפס. אתה יכול להשתמש בעיצוב הבסיס מהאתר ו ליצור מצגת באמצעות מעברים ב- Figma, או פשוט למד כיצד דפי אינטרנט מוגדרים על ידי מעצבים אחרים.
בתפריט השמאלי, תמצא את השכבות. מכיוון שזה הומר ישירות מ-HTML, השכבות עשויות להיות מפורטות יותר - או אפילו מבלבלות - ממה שהורגלת אליו כשאתה מעצב את עצמך. בחר קטע בעיצוב כדי למצוא את השכבות המודגשות בתפריט השמאלי.
אתה יכול להחליף תמונות, להקליד מחדש כותרות וטקסט גוף, או להעביר דברים בתוך הפריסה על ידי לחיצה כפולה על היבט העיצוב. התוסף html.to.figma אינו משכפל הגדרות הנפשה או מעבר בעת לחיצה על קישורים או שינוי דפים. אתה יכול להוסיף אותם לבד.
כיצד להמיר דף אינטרנט פרטי
רוב התהליך של יצירת אתר פרטי - כזה שדורש חשבון כדי לגשת אליו - לעומת דף אינטרנט ציבורי זהה. עם זאת, במקום להדביק את כתובת האתר, עליך להשתמש בסיומת Chrome שיוצר קובץ.
כדי להתחיל, פתח את Figma ואת התוסף html.to.figma באותו אופן כמו קודם.
שלב 1: הורד והפעל את תוסף Chrome
אתה יכול להשתמש בתוסף זה רק עם Google Chrome, אז פתח את Chrome כדי להתחיל. מתיבת הדו-שיח של תוסף Figma, בחר תוסף Chrome-אוֹ פתח את ההרחבה כאן בדפדפן Chrome שלך.
בחר להוסיף לכרום > הוסף הרחבה כדי להוסיף את התוסף לדפדפן שלך.
עם התוסף נוספה, נווט לאתר הפרטי או הדף שברצונך לשכפל את העיצוב שלו - אנו משתמשים בעמוד אינסטגרם - ובחר את התוסף. תוספים מכווצים נמצאים מתחת לסמל חלק הפאזל בדפדפן שלך.
זה ישאל אם אתה רוצה ללכוד את כל העמוד או רק את מה שמוצג. בצע את הבחירה שלך ואז הלכידה יופיע בהורדות שלך כקובץ .h2d.
שלב 2: גרור את הקובץ שנוצר אל תוסף Figma
עבור לאפליקציית Figma שלך או לאתר Figma בדפדפן וגרור את קובץ ה-.h2d שהורדת לתוך התיבה. הקובץ ייטען ויוצר באותו אופן כמו אפשרות האתר הציבורי.
כמו בגרסת דף האינטרנט הציבורי, אתה יכול ללחוץ פעמיים על היבטים של העיצוב כדי לערוך אותם או ללחוץ על התפריט הימני כדי לראות היכן הם מופיעים בפריסה.
אולי תרצה להוסיף אלמנטים עיצוביים חדשים לעיצוב דף האינטרנט, כמו אפקט זכוכית חלבית Figma, או שאתה יכול אפילו לשכפל חלקים מעיצוב דף האינטרנט בתור א תבנית מאסטר למצגות Figma. בשנת 2022, אדובי רכשה את Figma, כך שנוכל לצפות לדרכים מהנות יותר להשתמש ב- Figma בעתיד.
השתמש בכל אתר אינטרנט להשראה בעיצובי Figma שלך
בעוד ש-Figma מיועדת בעיקר לעיצוב אתרים או דפי UX/UI מאפס, זו הזדמנות מצוינת לאכלס דפי אינטרנט קיימים כדי לראות כיצד הם נבנו. אתה יכול גם להפוך את עיצוב האינטרנט שלך להעתק של אתר קיים אם אינך בטוח מאיפה להתחיל מלוח ריק.
סיבה מצוינת נוספת מדוע כדאי להשתמש בתוסף html.to.figma היא אם כבר עיצבת אתר שאיבדת גישה אליו. אתה יכול לאכלס את הדף ב-Figma ולהתחיל מחדש בלי צורך להתחיל ממש מחדש.
