آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma – قسمت سوم

آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma – قسمت سوم
آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma – قسمت سوم

در قسمت سوم سری آموزش های جامع فیگما Figma به سراغ ساخت پروتوتایپ و استفاده از ویژگی Constraints که برای طراحی ریسپانسیو یا واکنش گرا نیز استفاده می شود می پردازم.

در ابتدا با معرفی و استفاده از ویژگی Constraints در فیگما به شما آموزش می دهم که چطور یک عنصر یا یک دکمه را در سایز های مختلف صفحه نمایش تغییر اندازه بدهید.

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

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

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

پایان این فیلم به ویژگی های بولین یا Boolean یا همان Path Finder را در فیگما بررسی می کنم که شما بوسیله آن قادر هستید شکل های مختلف را به هم اضافه یا کم کنید و یک شکل جدید ایجاد کنید.


به دلیل اینکه فیلم بر روی یوتیوب قرار دارد، برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید تا بتوانید آن را مشاهده کنید.
آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma – قسمت سوم


در آموزش جامع فیگما – ساخت پروتوتایپ و Constraints در Figma 2021 – قسمت سوم چه مواردی آموزش داده می شود؟

از جمله مواردی که در این فیلم به آن می پردازم:

  1. 00:42 | کار با Constraints در فیگما
  2. 02:24 | ساخت اشکال دقیق و پایه دایره، مربع و مثلث در Figma
  3. 03:26 | ویژگی Arc برای درست کردن کمان در شکل ها
  4. 04:11 | ساخت چارت دایره ای در فیگما
  5. 04:35 | حفظ نسبت اشکال و گرد کردن گوشه ها در Figma
  6. 04:46 | کار با ابزار Pen در فیگما
  7. 06:00 | ساخت پروتوتایپ در Figma فیگما
  8. 09:06 | کدها در پنل Inspect در فیگما
  9. 09:33 | ساخت اشکال جدید و آیکان ها با ویژگی Boolean در فیگما


شما می توانید از طریق لینک زیر در کانال یوتیوب یا خبرنامه وبلاگ شخصی من عضو شوید تا از جدیدترین آموزش ها سریع مطلع گردید.

لینک های مفید + ارتباط با من + آموزش های رایگان طراحی و بهبود فردی و شغلی
این پست اولین بار در وبلاگ شخصی من منتشر شده است.