طراحی سایت با فیگما Figma

نویسنده:
بازدید: 878 بازدید
طراحی سایت با فیگما

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

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

FIGMA چیست؟

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

مزایا FIGMA

بارزترین مزیت Figma این است که نیازی به دانستن نحوه کدنویسی ندارید. شما به سادگی اشیاء را روی بوم بکشید و رها کنید تا نمونه اولیه خود را بسازید.

از آنجایی که هم از رایانه های رومیزی و هم از تلفن های همراه پشتیبانی می کند، می توانید به راحتی از هر کجا به فایل های خود دسترسی داشته باشید.

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

 Figma با چندین پلتفرم از جمله Windows، Mac OS X، iOS، Android و Linux سازگار است.

 پس از اتمام طراحی پروژه خود، می توانید آن را مستقیماً از پنجره مرورگر به اشتراک بگذارید. این امر ارسال طرح های خود را برای مشتریان آسان می کند بدون اینکه ابتدا آنها را ذخیره کنید.

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

 Figma به شما امکان می دهد پروژه های خود را به عنوان اسناد PDF صادر کنید.

از آنجایی که Figma مبتنی بر ابر است، می توانید با به اشتراک گذاری فایل های خود به صورت آنلاین با دیگران همکاری کنید.

 یادگیری Figma بسیار آسان است. حتی مبتدیان نیز می توانند در عرض چند دقیقه از آن استفاده کنند.طراحی سایت با فیگما

Figma با چندین ابزار قدرتمند همراه است. این ابزارها شامل ابزار قلم، ابزار شکل، ابزار متن و ابزار جادویی عصا هستند.

باFigma نیازی به ذخیره کار شما نیست. پس از اتمام ویرایش، می‌توانید فوراً تغییرات خود را در زمان واقعی پیش‌نمایش کنید.

Figma سریع بارگذاری می شود. باز کردن یک فایل جدید کمتر از دو ثانیه طول می کشد.

سازگار با مرورگرهای مختلف

چگونه با 10 مرحله آسان از Figma استفاده کنیم؟

1- ایجاد یک پروژه جدید: وقتی Figma را باز می کنید، متوجه خواهید شد که دو تب در بالای صفحه وجود دارد: Home و Projects. برای شروع کار بر روی یک پروژه، روی تب Projects کلیک کنید.

2- وارد کردن فایل ها: پس از ایجاد یک پروژه جدید، روی نماد علامت مثبت (+) در کنار منوی File کلیک کنید. با این کار مرورگر فایل ظاهر می شود که در آن می توانید تمام فایل هایی را که به صورت محلی در رایانه خود ذخیره کرده اید پیدا کنید. اگر هیچ فایلی را نمی بینید، مطمئن شوید که پوشه درست را باز کرده اید.

3- شروع به کار: اکنون که فایل های خود را وارد کرده اید، می توانید طراحی را شروع کنید! درست مانند سایر نرم افزارهای نمونه سازی، Figma راه های مختلفی را برای طراحی ارائه می دهد. چه ترجیح می دهید ایده خود را روی کاغذ ترسیم کنید، آن را مستقیماً در Figma ترسیم کنید یا مستقیماً آن را در کد تایپ کنید، Figma شما را تحت پوشش قرار می دهد.طراحی سایت با فیگما

4- کار خود را منتشر کنید: پس از اتمام طراحی، می توانید کار خود را منتشر کنید تا با دیگران به اشتراک بگذارید. برای انجام این کار کافیست از منوی File گزینه Publish را انتخاب کنید.

5- صادرات فایل ها: در هر مرحله از فرآیند طراحی، می توانید طرح نهایی خود را به صورت PNG یا PDF صادر کنید. این فایل‌ها را می‌توان به‌صورت آنلاین به اشتراک گذاشت یا چاپ کرد.

6- همکاری: Figma همچنین از ویرایش مشترک پشتیبانی می کند تا چندین نفر بتوانند به طور همزمان روی یک سند با هم کار کنند. به سادگی روی نماد مداد در کنار نام فایل کلیک کنید تا از همکاران دعوت شود تا به شما بپیوندند.

7- طرح ها را به اشتراک بگذارید: اگر نیاز دارید که آنچه طراحی کرده اید را به دیگران نشان دهید، می توانید به راحتی پیوند کار خود را برای او ارسال کنید. فقط روی نماد اشتراک گذاری در کنار نام روی فایل کلیک کنید.

8- ذخیره تغییرات: اگر می خواهید در حین همکاری تغییرات را در طرح خود ذخیره کنید، می توانید به راحتی با کلیک بر روی دکمه سبز رنگ کنار نام فایل خود این کار را انجام دهید.طراحی سایت با فیگما

9- پیش نمایش طرح ها: هنگامی که برای پیش نمایش طرح های خود آماده شدید، کافی است روی نماد ذره بین در کنار نام کلیک کنید. پنجره پیش نمایش ظاهر می شود که به شما امکان می دهد طرح خود را به گونه ای مشاهده کنید که گویی قبلاً منتشر شده است.

10- دانلود فایل ها: اگر می خواهید فایل های خود را دانلود کنید، می توانید با کلیک بر روی “دانلود” در کنار نام هر فایل این کار را انجام دهید.

نکاتی برای استفاده موثر از Figma

از Auto-Layout استفاده کنید. سعی کنید تا حد امکان از طرح بندی خودکار استفاده کنید و فریم های خود را در نظم و سلسله مراتب خوبی نگه دارید. به این ترتیب، کار طراحی شما می‌تواند به راحتی توسط هم تیمی‌ها، توسعه‌دهندگان و هر همکار دیگری در دسترس باشد. همچنین، قاب‌ها و لایه‌های خود را بر اساس آن و به شکلی قابل تشخیص نام‌گذاری کنید تا هر عضو تیم بتواند بفهمد کجا باید برود یا در مرحله بعد چه کاری باید انجام شود.طراحی سایت با فیگما.

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

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

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

سوالات متداول

Figma ابزاری عالی برای طراحی وب‌سایت است، استفاده از آن آسان است، یادگیری آن آسان است و با ابزارهای توسعه‌دهنده داخلی خود، واگذاری طرح‌ها به توسعه‌دهندگان را بسیار آسان می‌کند. Figma نمی تواند جایگزین استعداد خلاقانه یک طراح شود (هنوز باید طراحی UI را خودتان بسازید) اما فرآیند طراحی وب سایت را بسیار آسان می کند.

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

Figma اخیراً از دو عملکرد پشتیبانی کرده است، این توابع قابلیت‌های ویژگی طرح‌بندی خودکار را گسترش می‌دهند. با استفاده از این توابع جدید (Wrap و «Horizontal Gap — Auto» اکنون می‌توانید طرح‌هایی بسازید که کاملاً واکنش‌گرا هستند، زیرا المان‌های وب‌سایت اکنون به صورت پویا گسترش می‌یابند و منقبض می‌شوند و دقیقاً مانند یک وب‌سایت واکنش‌گرای معمولی روی هم قرار می‌گیرند.

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

Figma دارای یک تابع ‘Dev Mode’ است که به شما امکان می دهد به سرعت و به راحتی طرح ها را در قالب کد در زبان های برنامه نویسی مختلف و html و CSS صادر کنید. این به شما اجازه نمی دهد کد کامل وب سایت را صادر کنید، اما از افزونه های مختلفی پشتیبانی می کند که از این عملکرد پشتیبانی می کنند، اما قابلیت های آنها بسیار متفاوت است.

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