اگر نمی خواهید طراحی وب Figma خود را از ابتدا شروع کنید، از یک سایت موجود الهام بگیرید. ما به شما نشان خواهیم داد که چگونه از HTML یک طرح بسازید.
Figma یک ابزار عالی است که به سرعت در بین UX/UI و طراحان وب مورد علاقه قرار می گیرد. با استفاده از این ابزار رایگان مبتنی بر مرورگر، می توانید طراحی های وب واکنش گرا را به سرعت و به راحتی ایجاد کنید.
در حالی که اکثر مردم طرح های خود را از ابتدا در Figma ایجاد می کنند، شما می توانید از وب سایت های واقعی الهام بگیرید و به راحتی یک طرح Figma را مستقیماً از یک صفحه HTML موجود ایجاد کنید. در اینجا نحوه انجام آن آمده است.
چرا باید طرح های Figma را از HTML ایجاد کنید؟
دلایل زیادی وجود دارد که ممکن است بخواهید یک طراحی وب موجود را به عنوان طرح Figma تکرار کنید. انجام این کار از طریق پلاگین Figma باعث صرفه جویی در زمان می شود و به شما این امکان را می دهد که روی تنظیم دقیق طراحی خود تمرکز کنید.
تمرین طراحی وب با ایجاد مجدد صفحات وب موجود راهی عالی برای یادگیری از اساتید است. همچنین اگر قبلاً صفحه‌ای را طراحی و منتشر کرده‌اید که دسترسی به آن را از دست داده‌اید، می‌توانید از ابزار طراحی HTML به Figma استفاده کنید. به‌جای طراحی مجدد آن از ابتدا، می‌توانید با تبدیل آن به Figma در زمان صرفه‌جویی کنید تا دوباره روی آن کار کنید.
اکنون که می دانید چرا این ابزار می تواند مفید باشد، وقت آن رسیده است که نحوه کار آن را بیاموزید.
نحوه تبدیل هر وب سایت به طراحی Figma
برای شروع هر کار طراحی مبتنی بر Figma، باید Figma را باز کنید و وارد شوید یا ثبت نام کنید. می توانید از نسخه مرورگر، Figma، استفاده کنید یا برنامه دسکتاپ را دانلود کنید. آنها هر دو به یک روش برای این پروژه کار می کنند.
برای شروع پروژه طراحی HTML به Figma، یک فایل طراحی جدید باز کنید.
مرحله 1: افزونه html.to.design را دانلود کنید
برای اینکه بتوانید مستقیماً یک وب سایت زنده را به طرح Figma تبدیل کنید، به یک افزونه نیاز دارید. افزونه‌های بی‌شماری در Figma برای کمک به طراحی‌های شما وجود دارد، از جمله پلاگین‌هایی برای ساخت ماکت‌ها برای تلفن‌ها و دستگاه‌ها. در صورت تمایل می توانید بعداً طراحی وب سایت تبدیل شده خود را به یک مدل اضافه کنید.
برای دانلود افزونه، منوی Figma (نماگوی Figma) > Plugins > Find more plugins را انتخاب کنید. یا می توانید منابع > افزونه ها را انتخاب کنید. از هر گزینه، در نوار جستجو html.to.design تایپ کنید.
گزینه ارائه شده توسط divRIOTS را پیدا کرده و Run را انتخاب کنید. این افزونه را به عنوان یک کادر محاوره ای در بوم Figma شما باز می کند.
مرحله 2: آدرس وب سایت را جایگذاری کنید
افزونه html.to.design رایگان است، اما یک نسخه حرفه ای را ارائه می دهد. شما می توانید فرآیند طراحی خود را به طور کامل با نسخه رایگان کامل کنید.
وب‌سایتی را که می‌خواهید طراحی Figma از آن بسازید پیدا کنید. شما باید از یک وب سایت عمومی استفاده کنید – نه یک صفحه وب که فقط با ورود به سیستم قابل دسترسی است. ما از صفحه اصلی خود MakeUseOf.com استفاده خواهیم کرد.
URL کامل را کپی کرده و آن را در کادر import در Figma جایگذاری کنید و جایگزین مکان‌نمای وب‌سایت اپل کنید.
مرحله 3: طراحی خود را بارگیری کنید
پس از چسباندن آدرس وب سایت، تنظیمات را در زیر کادر واردات باز کنید تا اندازه طرح را انتخاب کنید. می‌توانید طرح را برای دستگاه‌های مختلفی وارد کنید، اما اگر از URL دسکتاپ استفاده کنید، موفقیت بهتری در انتخاب یک دستگاه رومیزی خواهید داشت و با استفاده از URL تلفن همراه برای دستگاه‌های تلفن همراه، موفقیت بهتری خواهید داشت.
همچنین گزینه های سفارشی برای دستگاه ها یا اندازه هایی وجود دارد که به عنوان گزینه های پیش فرض در دسترس نیستند. ما MacBook Pro 14 اینچی را با تم Light انتخاب می کنیم.
هنگامی که تنظیمات دستگاه و مشاهده را مشخص کردید، Import را انتخاب کنید تا طرح HTML خود را در Figma زنده کنید. صبر کنید تا نوار بار کامل شود تا طرح Figma پر شود.
بسته به وب‌سایتی که استفاده کرده‌اید، ممکن است متوجه یک کادر پاپ‌آپ شوید که در آن برخی از حروف نوشته باید جایگزین شوند. این به دلیل حق چاپ برای تایپ‌های دارای مجوز است. Figma آنها را با حروفی که شما به آنها دسترسی دارید جایگزین می کند.
از هر پاپ آپ خارج شوید، سپس از کادر گفتگوی افزونه خارج شوید تا طرح جدید خود را به شکل کامل ببینید.
مرحله 4: طراحی Figma خود را ویرایش کنید
از اینجا می‌توانید صفحه وب Figma خود را به هر شکلی که می‌خواهید ویرایش کنید. همانطور که گفته شد، این تابع HTML به Figma به شما امکان می دهد یاد بگیرید که چگونه صفحات وب موجود برای ایجاد الهام از شما برای ایجاد صفحات وب از ابتدا طراحی شده اند. می توانید از طراحی پایه وب سایت استفاده کنید و با استفاده از انتقال در Figma یک ارائه ایجاد کنید، یا به سادگی یاد بگیرید که چگونه صفحات وب توسط طراحان دیگر راه اندازی می شوند.
در منوی سمت چپ، لایه ها را پیدا خواهید کرد. از آنجایی که این به طور مستقیم از HTML تبدیل شده است، لایه‌ها ممکن است جزئی‌تر یا حتی گیج‌کننده‌تر از آن چیزی باشند که هنگام طراحی خودتان به آن عادت دارید. بخشی از طرح را انتخاب کنید تا لایه های برجسته شده را در منوی سمت چپ پیدا کنید.
می توانید تصاویر را جایگزین کنید، عناوین و متن اصلی را دوباره تایپ کنید، یا با دوبار کلیک کردن روی جنبه طراحی، چیزها را در طرح جابجا کنید. افزونه html.to.figma تنظیمات انیمیشن یا انتقال را هنگام کلیک کردن روی پیوندها یا تغییر صفحات تکرار نمی کند. شما می توانید آن ها را به تنهایی اضافه کنید.
نحوه تبدیل یک صفحه وب خصوصی
اکثر مراحل ایجاد یک وب سایت خصوصی – وب سایتی که برای دسترسی به آن نیاز به یک حساب کاربری دارد – در مقابل یک صفحه وب عمومی یکسان است. با این حال، به جای چسباندن URL، باید در عوض از یک پسوند کروم استفاده کنید که یک فایل را تولید می کند.
برای شروع، Figma و افزونه html.to.figma را به همان روش قبلی باز کنید.
مرحله 1: برنامه افزودنی کروم را دانلود و اجرا کنید
فقط می‌توانید از این افزونه با Google Chrome استفاده کنید، بنابراین برای شروع Chrome را باز کنید. از کادر گفتگوی افزونه Figma، افزونه Chrome را انتخاب کنید—یا افزونه را در اینجا در مرورگر کروم خود باز کنید.
Add to Chrome > Add Extension را انتخاب کنید تا افزونه را به مرورگر خود اضافه کنید.
با افزودن افزونه، به وب‌سایت یا صفحه خصوصی که می‌خواهید طرح آن را تکرار کنید بروید – ما از صفحه اینستاگرام استفاده می‌کنیم – و برنامه افزودنی را انتخاب کنید. افزونه‌های جمع‌شده در زیر نماد قطعه پازل در مرورگر شما یافت می‌شوند.
از شما می پرسد که آیا می خواهید کل صفحه را ضبط کنید یا فقط آنچه را که مشاهده می کنید. انتخاب خود را انجام دهید و سپس ضبط در دانلودهای شما به صورت یک فایل h2d ظاهر می شود.
مرحله 2: فایل تولید شده را به پلاگین Figma بکشید
به برنامه Figma یا سایت Figma در مرورگر خود بروید و فایل h2d. دانلود شده خود را داخل کادر بکشید. فایل به همان روشی که گزینه وب سایت عمومی است بارگیری و تولید می شود.
مانند نسخه عمومی صفحه وب، می‌توانید روی جنبه‌های طرح دوبار کلیک کنید تا آنها را ویرایش کنید یا از طریق منوی سمت چپ کلیک کنید تا ببینید در کجای طرح ظاهر می‌شوند.
ممکن است بخواهید عناصر طراحی جدیدی را به طراحی صفحه وب اضافه کنید، مانند یک افکت شیشه مات Figma، یا حتی می توانید بخش هایی از طراحی صفحه وب را به عنوان یک الگوی اصلی برای ارائه های Figma تکرار کنید. در سال 2022، Adobe Figma را تصاحب کرد، بنابراین می‌توانیم انتظار راه‌های سرگرم‌کننده‌تری برای استفاده از Figma در آینده داشته باشیم.
از هر وب سایتی برای الهام گرفتن در طرح های Figma خود استفاده کنید
در حالی که Figma در درجه اول برای طراحی وب سایت ها یا صفحات UX/UI از ابتدا است، فرصتی عالی برای پر کردن صفحات وب موجود برای دیدن نحوه ساخت آنها است. همچنین می‌توانید طراحی وب خود را شبیه به یک سایت موجود بسازید، اگر مطمئن نیستید از کجا شروع کنید.
یکی دیگر از دلایل عالی برای استفاده از افزونه html.to.figma این است که قبلاً وب سایتی را طراحی کرده اید که دسترسی به آن را از دست داده اید. می‌توانید صفحه را در Figma پر کنید و دوباره بدون نیاز به شروع دوباره شروع کنید.