آموزش فیگما – یادگیری کامل نرم افزار Figma

تعداد جلسه

80 جلسه

پیش نیاز

عدم نیاز

دانشجویان

368+

محمد قاسمی
محمد قاسمی

مدیرعامل سایت “وبنوس” ارائه دهنده کلیه خدمات طراحی سایت و طراحی گرافیکی در ایران

آموزش فیگما (Figma) - یادگیری کامل نرم افزار Figma

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

5,900,000

هر بار خرید محصول برای یک دامنه قابل استفاده است. (قوانین)

پرداخت امندانلود آنیپشتیبانی محصول
توجه : این دوره در سیستم اسپات پلیر خدمتتان ارایه می گردد.

معرفی آموزش Figma – آموزش فیگما به صورت جامع و کاربردی

با گسترش روز افزون اینترنت و ارایه انواع خدمات بر بستر آن، شغل های جدیدی ایجاد شده است که یکی از محبوب ترین آنها حوزه کاری طراحی رابط و تجربه کاربری یا همان UI/Ux می باشد، که افراد زیادی را از سرتاسر دنیا به خود جذب کرده و در ایران نیز هر روز افراد زیادی در این حوزه مشغول می شوند.

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

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

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

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

آموزش Figma - برترین ابزار طراحی رابط کاربری

فیگما چیست؟

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

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

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

فیگما برترین ابزار طراحی رابط و تجربه کاربری!

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

برخی از مباحثی که در آموزش Figma به آنها پرداختیم

  • آشنایی با یکسری تعاریف در حوزه طراحی
  • معرفی نرم افزار فیگما
  • آشنایی با روش های استفاده از فیگما
  • نصب و راه اندازی نرم افزار فیگما به صورت کامل
  • اجرای فیگما و معرفی محیط کاربری
  • معرفی ابزارهای اولیه در فیگما
  • آشنایی با ابزار Move در فیگما
  • معرفی ابزار Scale در فیگما
  • آشنایی با ابزار Frame در فیگما
  • معرفی ابزار Section در فیگما
  • آشنایی با ابزار Slice در فیگما
  • طراحی اشکال مختلف در فیگما
  • کار با Pen Tools در فیگما
  • کار با متون و تایپوگرافی در فیگما
  • آشنایی با بخش کامنت ها در فیگما
  • ترازبندی، جابجایی، موقعیت در فیگما
  • گروه بندی عناصر در فیگما
  • درج تصویر، Fill و Stroke در فیگما
  • آشنایی با بخش افکت ها در فیگما
  • تنظیمات رنگ در فیگما
  • ویژگی های کپی و پست المان ها در فیگما
  • ماسک ها در فیگما
  • آشنایی با عملیات Boolean در فیگما
  • معرفی ویژگی Constraints در فیگما
  • معرفی بخش Layout Grid در فیگما
  • آشنایی با ویژگی Auto layout در فیگما
  • معرفی کامل ویژگی های Wrap, Min/Max و Auto layout Suggestion
  • ساخت کامپوننت ها در فیگما
  • آشنایی با ورینت ها در فیگما
  • معرفی خصوصیات کامپوننت ها در فیگما
  • ساخت کامپوننت های کاملا پویا در فیگما
  • معرفی بخش استایل ها در فیگما
  • معرفی وریبل ها در فیگما
  • نحوه تعریف Variables در فیگما
  • آشنایی با Tokenization در فیگما
  • Scope کردن وریبل ها
  • آشنایی با تفاوت های استایل و وریبل ها
  • ترکیب استایل ها و وریبل ها در فیگما
  • معرفی Mode ها در بخش وریبل ها فیگما
  • نحوه ارتقا حساب Free به نسخه پرو به صورت رایگان در فیگما
  • آشنایی با مفهوم و کارایی پروتوتایپ در فیگما
  • کامپوننت اینتراکشن ها
  • معرفی تنظیمات بخش پروتوتایپ در فیگما
  • استفاده از وریبل ها در بخش پروتوتایپ فیگما
  • آشنایی با فلوها
  • ارایه چندین مثال مختلف در طراحی پروتوتایپ ها
  • نحوه اشتراک و ارایه پروژه به توسعه دهندگان
  • آشنایی با بخش DevMode در فیگما
  • طراحی وایرفریم با فیگما
  • آشنایی با واحدهای REM و PX و EM و کاربرد آنها
  • انجام پروژه طراحی صفحه اصلی فروشگاه در فیگما
  • انجام پروژه طراحی صفحه واکنشگرا در فیگما
  • آشنایی با طراحی واکنشگرا و روش های پیاده سازی آن در فیگما
  • آشنایی با کارکرد بخش لایبراری ها در فیگما
  • آشنایی با بخش FigJam در فیگما
  • طراحی پست و استوری اینستاگرام در فیگما
  • نحوه برون بری و درون ریزی طرح به صورت دستی در فیگما
  • معرفی کلیدهای میانبر در فیگما
  • آشنایی گزینه های مختلف موجود در منوهای فیگما
  • معرفی پلاگین های محبوب و کاربردی در فیگما
  • آشنایی با بخش کامیونیتی در فیگما
  • آشنایی با بخش Version History و نحوه مدیریت آن
  • کار با انیمیشن ها در فیگما
  • نحوه اشتراک گذاری پروژه ها
  • استفاده از Ui Kit ها
  • و بسیاری موارد دیگر …

نکته مهم : این دوره براساس آخرین تغییرات فیگما ضبط و ارایه شده است و براساس UI3 می باشد.

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

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

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

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

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

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

برخی از موارد طراحی شده در آموزش فیگما

تمرین شماره یک – طراحی رابط کاربری سایت در فیگما

طراحی رابط کاربری سایت در figma

طراحی پست و استوری اینستاگرام در فیگما

طراحی استوری و پست اینستاگرام در فیگما

طراحی اپلیکیشن و نسخه موبایل در فیگما

طراحی اپلیکیشن و نسخه موبایل در figma

نحوه طراحی وایرفریم ها در فیگما

طراحی وایرفریم در فیگما

نمونه ای از تدریس در آموزش فیگما

در پایان آموزش فیگما چه دستاوردی خواهیم داشت؟

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

زمان آموزش Figma چقدر است؟

این دوره بیش از 32 ساعت است و در طول آن با ابزار فیگما آشنا خواهید شد، در آموزش فیگما پروژه و مثال های مختلفی خدمتتان ارایه شده است تا فهم مطالب راحت تر باشد.

آیا تغییرات جدید فیگما در آموزش لحاظ شده است؟

فیگما در سال 2024 رابط کاربری خود را به UI3 تغییر داد و در این آموزش تمام جلسات و بخش ها براساس رابط کاربری جدید فیگما ضبط و تقدیم حضورتان شده است.

تجربه کاربران

دیدگاه‌ها و پرسش‌ها

101 دیدگاه

دیدگاه یا پرسش خود را بنویسید

  1. مرضیه نفری
    سلام، وقتتون بخیر. می‌خواستم بدونم توی دوره فیگما، طراحی سایت رو از صفر تا صد آموزش می‌دید؟
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

  2. مشتری مشتری
    وقت بخیر. استاد گرامی من طراحی وردپرس را یاد گرفتم و نمیخواهم طراح ux/ui بشوم. فقط میخواهم که حالت dev mode را یاد بیگرم که بتوانم طرح فیگما را پیاده کنم و . این اموزش این موضوع را پوشش میده؟ اگر اموزش دیگری هست لطفا لینکش را اینجا بگذارید . با تشکر از شما
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

      از همراهی شما بسیار ممنونیم، در این دوره بخش dev mode آموزش داده شده است

      با تشکر.

  3. فراز حسینیان
    باسلام وقتون بخیر من یک جوان ۲۰ ساله هستم که با تمام وجود به طراحی ui/ux  علاقه دارم و همیشه تلاش کرده‌ام با وجود تمام سختی‌ها، مسیر رشد و یادگیری خودم را ادامه دهم. متأسفانه شرایط مالی بسیار دشواری دارم، حمایت خانوادگی ندارم و خودم سرپرست خانواده هستم. در کنار تحصیل، همیشه سعی کرده‌ام با یادگیری مهارت‌های جدید، آینده‌ای بهتر برای خودم و عزیزانم بسازم. دوره طراحی ui/ux جامع استاد قاسمی  را با دقت بررسی کردم و بدون شک، یکی از بهترین آموزش‌های این حوزه است. یادگیری از شما برای من افتخار بزرگی خواهد بود، اما در حال حاضر، هزینه دوره برایم سنگین است و توانایی پرداخت آن را ندارم. و با اینکه تخفیف خورده قیمت دوره شده 2950 هزینه دوره برام سنگینه نمیتونم تهیه کنم تو این وضعیت واقعا شرایطم خیلی سخته ممنون میشم کمکم کنید  می‌دانم که موفقیت در این مسیر تنها با تلاش، پشتکار و بهره‌گیری از آموزش‌های باکیفیت ممکن است. اگر امکان دارد، لطفاً شرایطی فراهم کنید که بتوانم در این دوره شرکت کنم. حمایت شما در این مقطع حساس زندگی‌ام، نه‌تنها یک فرصت آموزشی، بلکه قدمی بزرگ در مسیر تحقق رؤیاهایم خواهد بود. بی‌نهایت سپاسگزار خواهم بود اگر مرا در این مسیر همراهی کنید. با احترام و قدردانی🙏🌹
    1. شیما شیما
      دوست گرامی الان تخفیف 90 درصد گذاشتن. پکیج را بخرید
    2. محمد قاسمی

      سلام وقت شما بخیر،

       

      از همراهی و حضور شما در ابزار وردپرس بسیار ممنونیم ، بزودی تخفیفات ویژه‌ای روی سایت فعال خواهد شد که میتوانید با هزینه بسیار اندکی خریدتان را انجام دهید

      با تشکر.

  4. عرفان حسنخانی
    سلام وقتتون بخیر پیش نیازه دوره فیگما چیست
    1. محسن ملکی
      سلام وقت بخیر آقا قاسمی من میخوام اسلاید و بنر و عکس های سایتمو خودم طراحی کنم باید دوره فتوشاپ رو آموزش ببینم یا فیگما آخه میگن فیگما یه برنامه تحت وب خیلیا با این برنامه عکس ها و بنراشون رو طراحی میکنن میشه راهنماییم کنید لطفا؟ 🌹🙏
      1. محمد قاسمی

        سلام وقت شما بخیر،

         

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

        با تشکر.

    2. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

  5. زهرا مختاری
    سلام وقت بخیر از فیگما برای طراحی کاتالوگ محصولات هم میتوان استفاده کرد یا فقط برای طراحی سایت و اپلیکیشن هست؟
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

  6. الهه محمدی
    جناب قاسمی در این دوره که فیگما آموزش مدید میتونیم کار بگیریم؟ ممنون میشم سریع جواب بدید تا دوررو بخرم؟!!!!!!
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

      در این دوره نرم افزار فیگما و ویژگی های آن خدمتتان معرفی خواهد شد و چند نمونه نیز اجرا می‌شود که میتوانید در پایان بخوبی با این نرم افزار انواع پروژه ها را اجرا فرمایید.

      با تشکر.

  7. علی موسوی
    سلام وقتتون بخیر / در دوره آموزش دادین که در پروتوتایپ از set variable استفاده کردی ولی الان من میخوام از این گزینه طیق آموزش ها استفاده کنم میگه باید اکانت پریمیوم تهیه کنی الان باید چیکار کنم و لطفا خودتون تست کنید ببنید برای شما هم همینطوره آقای قاسمی
    1. محمد قاسمی

      سلام وقت شما بخیر،

       

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

      با تشکر.

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

          سلام وقت شما بخیر،

           

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

          با تشکر.