”طراحی سایت با فیگما“

طراحی سایت فیگما چیست؟

طراحی سایت با فیگما: Figma  یک نرم افزار بسیار آسان برای استفاده است. ابزارهایی دارد که اکثر طراحان با آن آشنا هستند و یادگیری آن را آسان می کند.و به شما کمک می کند تا در کمترین زمان طراحی کنید. برخی از ابزارهای رایجی که با آنها روبرو خواهید شد عبارتند از ابزار قلم، قاب (یا تابلوی هنری برای کاربران Adobe)، برش، متن و موارد دیگر.  هر طراح که با ابزارهای طراحی به روز باشد، از Figma و قابلیت های آن اطلاع دارد. اما اگر تازه وارد صحنه طراحی شده اید یا فقط می خواهید تجربه طراحی وب سایت خود را به Figma تغییر دهید، این پست وبلاگ می تواند به شما کمک کند.

اگر نمی خواهید طراحی وب Figma خود را از ابتدا شروع کنید، از یک سایت موجود الهام بگیرید. ما به شما خواهیم گفت که می توانید از HTML یک طرح بسازید.

Figma  یک ابزار عالی است که به سرعت در بین UX/UI و طراحان وب مورد علاقه قرار می گیرد. با استفاده از این ابزار رایگان مبتنی بر مرورگر، می توانید طراحی های وب واکنش گرا را به سرعت و به راحتی ایجاد کنید.

در حالی که اکثر مردم طرح های خود را از ابتدا در Figma ایجاد می کنند، شما می توانید از وب سایت های واقعی الهام بگیرید و به راحتی یک طرح Figma را مستقیماً از یک صفحه HTML موجود ایجاد کنید. در اینجا نحوه انجام آن آمده است.

اگر از ابزارهای طراحی رابط کاربری دیگری مانند Adobe Photoshop یا Adobe XD استفاده کرده اید، می توانید به راحتی فیگما و ابزارهای آن را در یک لحظه انتخاب کنید.  فیگما یکی از ابزارهای طراحی رابط است که به همه افراد درگیر در پروژه کمک می کند تا در فرآیند طراحی بتوانند از آن ایده بگیرند.

شما اگر در زمینه طراحی سایت تخصص ندارید می توانید طراحی وبسایت حرفه ای خود را به افراد متخصص بسپارید برای اطلاع از قیمت طراحی سایت و دریافت مشاوره با ما تماس بگیرید 02166928787

Figma  در مقابل  Adobe

اگر تا به حال از یک محصول Adobe استفاده کرده باشید، شباهت های زیادی خواهید دید. بارزترین آنها Adobe XD  است که هر دو یک ابزار طراحی رابط هستند. بنابراین، چگونه Figma در مقابل Adobe XD قرار می گیرد؟

در حالی که هر دو پلتفرم نرم افزار مبتنی بر برداری هستند، تفاوت در جزئیات است. تفاوت اصلی در قیمت است. Figma برای کاربران فردی رایگان است. شما فقط باید برای ویژگی هایی مانند کار مشترک هزینه کنید. در Adobe، قبل از اینکه بتوانید از آن استفاده کنید، باید هزینه پرداخت کنید. Figma همچنین تمام کارهای شما را در فضای ابری ذخیره می‌کند و سریع‌تر از Adobe همگام‌سازی می‌شود، در حالی که به شما امکان می‌دهد تا زمانی که به مرورگر دسترسی دارید، از آن در هر مکانی استفاده کنید. Figma همچنین ویژگی های همکاری و همچنین جامعه گسترده ای را برای طراحان ارائه می دهد.

وایرفریم روی Figma 

Wireframe به طراح این امکان را می دهد که با یک مشتری یا توسعه دهنده کار کند و در ساختار وب سایت بدون رد شدن توسط عناصر دیگر مانند رنگ ها، تصاویر یا تصاویر قدم بزند. هنگام کار با سایت‌های بزرگ، Wireframing به طراح کمک می‌کند تا تعیین کند کدام عناصر باید در صفحه گنجانده شود و کدام عملکرد باید برای هر بخش تنظیم شود.

در حالی که هیچ قانون سخت و سریعی برای ایجاد وایرفریم وجود ندارد، خواه یک وایرفریم با کیفیت پایین روی کاغذ یا یک وایرفریم با کیفیت بالا در نرم افزار، در Figma، می توانید با استفاده از ابزارهای از قبل موجود، وایرفریم ایجاد کنید. تا وب سایت نهایی خود را بسازید. می توانید از ابزار فریم استفاده کنید که دارای پیش تنظیم اندازه های دسکتاپ و موبایل است یا ابعاد خود را ایجاد کنید. می‌توانید شبکه‌هایی (ستون‌ها و ردیف‌ها) را به وایرفریم خود اضافه کنید و مستطیل‌هایی ایجاد کنید تا مشخص کنید که عناصر در صفحه کجا قرار می‌گیرند. این اساساً نقشه شما برای وب سایت شما است. برای Productive Shop، Wireframe را ایجاد کردیم، عناصر و متغیرهای تصویر را در نتیجه نهایی قرار دادیم تا محصول نهایی را ایجاد کنیم.

استفاده از پلاگین ها و انجمن  Figma

یکی از مزایای Figma جامعه گسترده است . انجمن Figma یک فضای عمومی است که در آن می توانید فایل های طراحی خود را به صورت آنلاین منتشر کنید تا دیگران بتوانند از آن استفاده کنند، بازآفرینی کنند و با آن آزمایش کنند. این امر کار طراحان را آسان‌تر و سریع‌تر می‌کند تا عناصر طراحی رایج را وارد کرده و آن‌ها را در طرح‌های خود ادغام کنند تا اینکه آنها را از ابتدا ایجاد کنند که اغلب زمان‌بر است.

پلاگین ها توسط انجمن ایجاد شده و توسط Figma مدیریت می شوند. آیا نیاز به اضافه کردن چند نماد در طراحی خود دارید؟ پلاگین ها آن را دارند. آیا باید تصاویر را مستقیماً به کادر اضافه کنید؟

متن ساختگی برای طرح های شما؟  افزونه هایی که در اینجا می توانید پیدا کنید بسیار گسترده هستند و برای کمک به طراحی موثرتر به شما کمک می کنند. در زیر برخی از موارد محبوبی که استفاده می کنم آورده شده است.

لورم اپیسوم

این افزونه متن ساختگی را به طرح شما اضافه می کند و به شما امکان می دهد تعداد جملات پرکننده، کلمات یا پاراگراف های مورد نیاز خود را تنظیم کنید یا خیر. ژنراتور Lorem Ipsum به شما ایده بهتری از نحوه ظاهر سایت شما با متن می دهد.

نمادها و آیکون  

نماد Google برای آیتم های رابط کاربری کاربردی مانند فلش ها، چک باکس ها، سوئیچ های جابجایی، دکمه های رادیویی و غیره است. این افزونه به Figma متصل می شود و شما می توانید وزن، پر کردن و اندازه نوری را انتخاب کنید. اگر می‌خواهید نماد مشخص، گرد یا واضح باشد یا می‌خواهید رنگ را از طریق Figma تنظیم کنید، مجموعه آیکون‌های Google برای نمادهای سریع عناصر رابط کاربری عالی است.

حالت ارائه: وارد حالت Prototype شوید

ابزار Prototype در Figma مانند یک ابزار ارائه عصر جدید است. این یک راه عالی برای نشان دادن به همکاران خود است که وب سایت ممکن است چگونه باشد و کاربر چگونه با آن تعامل خواهد داشت. می توانید یک مدل از دستگاه اضافه کنید و یک تجربه واقعی به آن بدهید. همچنین یک راه عالی برای ایجاد یک طرح اولیه برای توسعه دهنده شما است. این به آنها کمک می کند تا تعاملات را بهتر تجسم کنند و آن را در CSS کدگذاری کنند.

در این حالت، می‌توانید انیمیشن‌های سفارشی را به طراحی خود اضافه کنید، آن را به دلخواه شخصی‌سازی کنید، GIF اضافه کنید، آن را به راحتی به فریم‌های دیگر پیوند دهید و با زدن دکمه پخش، تجربه‌ای بی‌نظیر ایجاد کنید. همچنین می توانید یک موضوع آزمایشی را در جلسات تحقیق مشاهده کنید، اسلایدهای ارائه ایجاد کنید و با ابزارهای نمونه سازی شخص ثالث ادغام کنید.

هنگامی که یک نمونه اولیه برای طراحی خود ایجاد می کنید، اساساً به همکاران خود نشان می دهید که انیمیشن شما چگونه است و سپس در مورد آن بحث و اصلاح می کنید. این به نوبه خود باعث صرفه جویی در ساعت های بی شماری در زمان توسعه می شود. اگر در یک شرکت سریع کار می‌کنید و دائماً آزمایش می‌کنید، تکرار می‌کنید و طراحی می‌کنید، این ابزار عالی برای استفاده است.

ایجاد الگوهای اصلی در Figma

قالب های وب طرح های از پیش طراحی شده ای هستند که به شما امکان می دهند مطالب را در یک صفحه وب مرتب کنید. یک وب سایت دارای چندین صفحه و بخش است. ایجاد یک الگو به شما کمک می‌کند تا به راحتی در وب‌سایت و صفحه وب خود یکنواخت کنید. الگوها می‌توانند شامل دستورالعمل‌هایی برای سبک‌های فونت، دکمه‌ها، بخش‌ها و عناصر رایج باشند.

در Figma می توانید با کلیک بر روی نماد + شروع به اضافه کردن صفحه جدید کنید. هنگامی که صفحه خود را با شبکه مورد نظر تنظیم کردید، می توانید شروع به اضافه کردن عناصر به صفحه مانند عنوان، دکمه یا نوع فونت و اندازه های مختلف کنید. پانل ابزار در سمت راست به شما کمک می‌کند رنگ‌هایی را که می‌توانید از پیش تنظیم کنید و فونت‌ها و اندازه‌های مختلف را برای سرفصل‌های مختلف یا کپی متن اضافه کنید، تغییر دهید.

همچنین می‌توانید به سرعت اجزایی را برای عناصری ایجاد کنید که در طراحی مورد استفاده قرار می‌گیرند و می‌توانید به سرعت از برگه Assets در سمت چپ صفحه خود به آنها دسترسی پیدا کنید. به این ترتیب، می توانید به راحتی یک الگوی موجود را کپی کرده و آن را در جایی که لازم است در یک صفحه قرار دهید.

وب سایت ها معمولا دارای صفحات متعدد هستند و باید یکدست به نظر برسند. اینجاست که یک سیستم طراحی وارد عمل می شود.

ایجاد سیستم های طراحی بر روی Figma

طبق تعریف، یک سیستم طراحی مجموعه ای از استانداردها برای مدیریت طراحی در مقیاس با کاهش افزونگی و ایجاد یک زبان مشترک و سازگاری بصری در صفحات و کانال های مختلف است. اما از نظر عملی، چگونه کار می کند؟ سیستم های طراحی اساسا مجموعه ای از اجزای قابل استفاده مجدد هستند که می توانند در چندین برنامه کاربردی یا صفحات وب سایت استفاده شوند.

به عنوان مثال، اگر یک وب سایت با بیش از 10 صفحه ایجاد می کنید، مدت زمانی که طراح برای ایجاد یک عنصر در هر صفحه نیاز دارد، نجومی خواهد بود و احتمال خطا و ناهماهنگی بالایی دارد. اینجاست که یک سیستم طراحی وارد عمل می شود.

در یک سیستم طراحی، طراحان می‌توانند مجموعه‌ای از عناصر رایج مانند دکمه‌ها، اندازه فونت‌ها، فیلدهای فرم، عناصر تزئینی، پالت‌های رنگی و کدهای هگز آن را ایجاد کنند. این استاندارد به ثابت نگه داشتن طراحی روی وب سایت یا اپلیکیشن کمک می کند. همچنین واگذاری یا همکاری با دیگر طراحان را از طریق اشتراک گذاری یا انتشار آسان می کند.

Figma یک نرم افزار رابط کاربری است که ساخت چنین اجزایی را آسان می کند. به لطف ویژگی‌های آن، یک سیستم طراحی می‌تواند مشارکتی، به‌روز، هم‌تراز با کد و آسان برای تکامل باشد. هنگامی که یک دارایی ایجاد می شود، می توان آن را از بخش دارایی آن وارد کرد. این مولفه ها را می توان به انواع مختلفی تبدیل کرد.

مثلاً به یک دکمه با چهار رنگ نیاز دارید، در Figma، می‌توانید به راحتی تغییری از دکمه اصلی ایجاد کنید، آن را با اندازه، پد، فونت‌ها و غیره مطابقت دهید. آیا نیاز به تغییر شکل یا فلش در دکمه دارید؟ آسان. فقط روی مولفه والد کلیک کنید و تغییرات خود را انجام دهید. Figma به طور خودکار تغییرات شما را در طول طراحی به روز می کند. استفاده از سیستم های طراحی در Figma به شما کمک می کند تا وب سایت خود را به راحتی طراحی، ساخت و نگهداری کنید.

چرا باید طرح های Figma را از HTML ایجاد کنید؟

دلایل زیادی وجود دارد که ممکن است بخواهید یک طراحی وب موجود را به عنوان طرح Figma تکرار کنید. انجام این کار از طریق پلاگین Figma باعث صرفه جویی در زمان می شود و به شما این امکان را می دهد که روی تنظیم دقیق طراحی خود تمرکز کنید.

تمرین طراحی وب با ایجاد مجدد صفحات وب موجود راهی عالی برای یادگیری از اساتید است. همچنین اگر قبلاً صفحه وب را طراحی و منتشر کرده اید که دسترسی به آن را از دست داده اید، می توانید از ابزار طراحی HTML به Figma استفاده کنید. به‌جای طراحی مجدد آن از ابتدا، می‌توانید با تبدیل آن به Figma در زمان صرفه‌جویی کنید تا دوباره روی آن کار کنید.

از هر وب سایتی برای الهام گرفتن در طرح های Figma خود استفاده کنید

در حالی که Figma در درجه اول برای طراحی وب سایت ها یا صفحات UX/UI از ابتدا است، فرصتی عالی برای پر کردن صفحات وب موجود برای مشاهده نحوه ساخت آنها است. همچنین اگر مطمئن نیستید که از یک صفحه خالی شروع کنید، می توانید طراحی وب خود را شبیه به یک سایت موجود بسازید.

یکی دیگر از دلایل عالی برای استفاده از افزونه html.to.figma این است که قبلاً وب سایتی را طراحی کرده اید که دسترسی به آن را از دست داده اید. می‌توانید صفحه را در Figma پر کنید و دوباره بدون نیاز به شروع دوباره ایجاد کنید.