منو اصلی
  صفحه اصلی
  تبلیغات
  تماس با ما
تبلیغات
موسیقی بی کلام
ابزار وب مسترها
  ابزار مجله در وبلاگ
  گوگل پلاس در وبلاگ
  شمارنده مطالب
  پازل وبلاگ
  تولبار حرفه ای
  ابزار پرش به بالا
  ذکر ایام هفته
  استخاره آنلاین
  سخنان بزرگان
  نمایش رتبه گوگل
  وضعیت آب و هوا
  اوقات شرعی
  فونت های زیباسازی
  کدهای زیباسازی فلش
  فال روزانه
  فال حافظ
  فال کلیکی
  فال انبیا
  طالع بینی ازدواج
  طالع بینی هندی
  عشق سنج آنلاین
  موسیقی لایت در وبلاگ
  ساخت موسیقی آنلاین
  ساعت های فلش
  ابزار فرم تماس با ما
  چت روم
  تصاویر تصادفی
  تصاویر زیباسازی
  لودینگ وبلاگ
  جستجوگر گوگل
  تعیین وضعیت یاهو
  ساخت ایمیل آیکون
  تقویم رومیزی
  تغییر شکل موس
  نمایشگر آی پی
  تعبیر خواب
  نمایش تاریخ
  بارش برف در وبلاگ
  پرواز بادکنک در وبلاگ
  پرواز حباب در وبلاگ
  قطرات شبنم در وبلاگ
  ابزار مبدل تاریخ ها
  جملات عاشقانه تصادفی
  جملات تصادفی شریعتی
  حدیث تصادفی
  اس ام اس تصادفی
  دانستنی های تصادفی
  مترجم گوگل
  معرفی وبلاگ به دوستان
  سرویس whois دامنه
  ابزار ار اس اس ریدر
  کد آپلود عکس
  دیکشنری آنلاین
  ساخت صفحات پاپ آپ
  ساخت تصاویر ثابت
  روزنما با مناسبت ها
  لحظه شمار غیبت امام زمان
  کدهای کاربردی
آرشیو قالب ها
لوگو اسپانسر
رپورتاژ ها
  کامپوزیت ونیر
  مکمل رشد مو و ناخن و مکمل جوانساز و ضد پیری ؛ دو مکمل برای حفظ زیبایی شما
  6 راه ساده برای انتخاب بهترین دستگاه تصفیه آب خانگی با تصفیه آب ایلیا گستر
  آزمایش زگیل تناسلی
  بهترین کتاب گرامر و لغت انگلیسی
  مشخصات انواع دستگاه تصفیه آب خانگی
  خرید مطمئن و ارزان تور چابهار از لحظه آخر
  چرا تتر محبوب ترین استیبل کوین است
  رزرو تور قشم از اصفهان با آفرهای ویژه لحظه آخر
  تزریق بوتاکس چگونه باعث درمان میگرن می شود؟
  بهترین پروژه های لایه دوم اتریوم برای سرمایه گذاری کدامند؟
  راهنمای استفاده از پستانک ارتودنسی و دندانگیر نوزاد
  فواید کره بادام زمینی برای خانمها
  ویژگی های یک فروشگاه آنلاین لوازم خودرو و مزایای خرید آنلاین
  دانلود آهنگ های جدید از سایت موزیک وی
  مزایای خرید عمده لباس به صورت اینترنتی
  نقش اوکی اکسچنج در رسیدن به سود در بازار‌های آنلاین مالی
  هر آنجه در رابطه با کاشت مو، کاشت ابرو و جراحی پلک باید بدانید!
  کاشت ناخن در پردیس تهران (سالن زیبایی بورگ) هنگامه رویین تن



پنل اس م اس رایگان
صفحه اصلی » وبلاگ » فیگما چیست و چگونه می توان با فیگما طراحی سایت کرد؟

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

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

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

فیگما چیست؟

برنامه فیگما یک نرم ­افزار برای طراحی UI و UX است. به­‌طور عمومی این برنامه یک نرم ­افزار رایگان و مبتنی بر فضای ابری است که قابلیت نصب بر روی سیستم ­عامل­های ویندوز و مک را دارد و همچنین قابل اجرا بر روی مرورگر نیز می­باشد. تشکیل تیم‌­های چندمنظوره طراحی یکی از قابلیت­هایی است که وجود فضای ابری در این برنامه ایجاد کرده است.

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

نصب فیگما و شروع طراحی با آن

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

پلاگین های فیگما چیست؟

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

آشنایی با محیط کار و ابزارهای فیگما

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

  • منو (Menu)

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

  • ابزارها (tools)

در قسمت tools می توانید به ابزارهایی که احتمالا بیشتر استفاده می کنید دسترسی داشته باشید. ( قالب ها، اشکال، متن و …)

  • قابلیت ها (Options)

این قسمت قابلیت های اضافی را برای هر ابزاری که انتخب کرده اید نشان می دهد. اما زمانی که هیچ ابزاری را انتخاب نکرده باشید، مانند تصویر زیر، تنها نام فایل نشان داده می شود.

  • لایه ها (Layers)

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

  • بوم (Canvas)

بوم جایی است که شما کار طراحی خود را در آن انجام داده و مشاهده می کنید.

  • مسئول فنی (Inspector)

در این قسمت اطلاعات و تنظیمات برای هر ابزاری که انتخاب شده، نشان داده می شود. فیگما در این بخش تب یا برگه های جداگانه ای را ایجاد می کند مانند Design، Prototype و Code.

آموزش شروع کار طراحی سایت با فیگما

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

1- ایجاد قاب یا بدنه (Frame)

در فیگما، فریم، اساسا دربرگیرنده ی المان های دیگر است. کلید F را فشار دهید تا ابزار فریم انتخاب شود. همچنین می توانید روی نماد Frame Tool در گزینه های بالای پنجره کلیک کنید تا فعال شود. برای ایجاد فریم چند راه دارید هم می توانید در یک قسمت از بوم کلیک کنید و بکشید یا می توانید از قسمت Inspector یک اندازه ی فریم از پیش تعیین شده را انتخاب کنید.

2- افزایش و کاهش بزرگنمایی

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

  • Shift ⇧2 : بزرگنمایی انتخاب فعلی
  • Shift ⇧1: بزرگنمایی برای نمایش کل صفحه ی بوم

برای اجرای این دستورات فریم موردنظر را با کلیک روی نام آن انتخاب کنید. همچنین برای حرکت بین فریم ها دو کلید میانبر را یاد بگیرید:

  • N به فریم بعدی زوم می کند
  • Shift ⇧N به فریم قبلی زوم می کند

3- حرکت در اطراف بوم

یکی دیگر از ابزارهای مفید، به ویژه هنگامی که بزرگنمایی می کنید یا روی یک فایل بزرگ کار می کنید، ابزار دستی است. کلید spacebar در صفحه کلید را فشار دهید، یک نماد دست روی بوم ظاهر می شود. کلیک کنید و بکشید تا کل بوم به اطراف حرکت کند.

4- ایجاد لایه متنی در فیگما

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

5- ایجاد یک مستطیل و مرتب کردن لایه ها

کلید R را فشار دهید تا ابزار Rectangle را انتخاب کنید. یک مستطیل را در اطراف متنی که ایجاد کرده اید بکشید.

در حال حاضر، متن زیر مستطیل پنهان است. برای رفع این مشکل، باید از دستورات Arrange در فیگما استفاده کنیم. به پنل لایه ها در سمت چپ پنجره بروید. روی لایه ی متن راست کلیک کنید تا لیستی از گزینه ها ظاهر شود. روی “Bring to front” کلیک کنید، اکنون متن روی مستطیل قرار می گیرد.

6- تراز کردن متن و مستطیل

می خواهیم متن و مستطیل نسبت به یکدیگر در مرکز قرار بگیرند. Figma مجموعه‌ای از دستورات “Align” را دارد که به ما این امکان را می‌دهد. با فشردن کلید Escape یا V ابزار Move را انتخاب کنید سپس یک فضای مستطیلی شکل را در اطراف متن و مستطیل بکشید. دستورات Align در سمت راست در دسترس شما هستند. می توانید هر کدام که نیاز دارید را انتخاب کنید.

7- اضافه گردن گوشه ی گرد به مستطیل و تغییر رنگ آن

شکل مستطیلی را که ایجاد کردید انتخاب کنید. در Inspector تنظیماتی به نام “Corner Radius” وجود دارد که به ما امکان می دهد گوشه های هر شکلی را گرد کنیم. در اینجا مقدار پیکسلی که می خواهید هر گوشه گرد شود را تایپ کنید.

تنظیمات رنگ را نیز می توان در Inspector یافت. روی مستطیل کلیک کنید در سمت راست و از قسمت Fill می توانید به پالت رنگ دسترسی داشته باشید. هر رنگی را که می خواهید از این طریق انتخاب کنید.

8- تغییر فونت در فیگما

با انتخاب لایه متن، می توانید به تنظیمات در Inspector برای تغییر فونت و همچنین اندازه و رنگ فونت دسترسی داشته باشید.

ذخیره پروژه

آخرین کاری که باید انجام دهید انتخاب نام برای فایل است. برای این کار با فشار دادن کلید Escape تمامی ابزارها را از حالت انتخاب خارج کنید. در بالای پنجره روی Untitled کلیک کنید، سپس یک نام برای پروژه انتخاب و تایپ کنید. فیگما تمام فایل های شما را در فضای ابری ذخیره می کند.


نوشته شده توسط : نسترن مردانی | در تاریخ ۱۴۰۱/۰۶/۰۵ ساعت ۱۷ :۴۳ : ۴۷


دسترسی سریع
قالب های 3 ستونه
قالب های 2 ستونه
ابزار وبلاگ نویسان
آموزش وبلاگ نویسی
گالری عکس
آپلود عکس
بازی آنلاین
موسیقی لایت
بازی آنلاین

بازی آنلاین 660 بازی
بازی های دخترانه 16 بازی
بازی های ورزشی 97 بازی
بازی های تیراندازی 124 بازی
بازی های فکری 209 بازی
بازی های اکشن 126 بازی
بازی های مسابقه ای 50 بازی
بازی های متفرقه 38 بازی
بازی های محبوب

لینک ها
بک لینک شما در این مکان
کلیه حقوق متعلق به سایت نایت اسکین می باشد © Night-Skin.com 2004 - 2022