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

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

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

سیستم طراحی رابط کاربریسیستم طراحی رابط کاربریسیستم طراحی رابط کاربری
این سیستم طراحی رابط کاربری نمونه ای از این است که چگونه یک سیستم طراحی در Figma می تواند شبیه باشد.

1. ساختار سیستم طراحی خود را تعریف کنید

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

ساختار اصلی یک سیستم طراحی شامل عناصر سبک (اما نه محدود به) است مانند:

  • رنگ ها
  • شبکه و فاصله
  • تایپوگرافی
  • اشکال و الگوها
  • دکمه ها
  • کارت ها
  • نمادها
  • برچسب ها
  • تشکیل می دهد
  • نمودارها و نوارهای پیشرفت

همچنین می تواند دارای عناصر فنی و ارتباطی مانند:

  • مستندات راهنما
  • فلسفه برند
  • لحن صدا
  • واژگان
  • بهترین شیوه ها
  • دستورالعمل های بصری

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

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

2. رنگ ها را تعریف کنید

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

مرحله 1: رنگ های خود را به دسته ها تقسیم کنید

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

پیروی از دستورالعمل هایی که آدی پوردیلا در خود به اشتراک گذاشته است مقدمه ای بر سیستم های طراحی، ما رنگ ها را به سه دسته اصلی تقسیم می کنیم:

  • چیدمان: حاشیه ها، سرصفحه ها، پاورقی ها و غیره
  • UI: متن، دکمه ها و فرم ها
  • معنایی: موفقیت، خطا، اطلاعات

این سه دسته را در قاب خود قرار دهید و رنگ اصلی خود را اضافه کنید. در این حالت BLUE رنگ اصلی Layout من خواهد بود.

اولین رنگ خود را اضافه کنید.  در این مورد BLUE رنگ اصلی طرح من خواهد بود.  اولین رنگ خود را اضافه کنید.  در این مورد BLUE رنگ اصلی طرح من خواهد بود.  اولین رنگ خود را اضافه کنید.  در این مورد BLUE رنگ اصلی طرح من خواهد بود.
اولین رنگ خود را اضافه کنید. در این مورد BLUE رنگ اصلی طرح من خواهد بود.

من شکل را ده بار تکرار می کنم و شفافیت را 10٪ کاهش می دهم تا محدوده کنتراست داشته باشم. این یک راهنمای بصری از اینکه هر رنگ یک رنگ خاص چگونه به نظر می رسد ارائه می دهد.

مرحله 2: رنگ های خود را نام ببرید

مطمئن شوید که نام‌های خاصی را به هر رنگ اضافه می‌کنید تا شناسایی آن‌ها آسان باشد. در این حالت، هر ته رنگ Layout من “BLUE” + درصد تیرگی که نشان می دهد نامیده می شود.

هر رنگ از رنگ Layout من نامگذاری خواهد شد هر رنگ از رنگ Layout من نامگذاری خواهد شد هر رنگ از رنگ Layout من نامگذاری خواهد شد
به هر رنگی که استفاده می کنید نام های خاصی اضافه کنید.

مرحله 3: رنگ های خود را نمونه برداری کنید

نمونه‌برداری، اختصاص دادن رنگی به هر رنگ را در سیستم طراحی و حتی در طراحی واقعی وب شما آسان می‌کند.

رنگ خود را انتخاب کنید، روی علامت مثبت در منوی سمت راست کلیک کنید.

رنگ خود را انتخاب کنید، روی علامت مثبت در منوی سمت راست کلیک کنید. رنگ خود را انتخاب کنید، روی علامت مثبت در منوی سمت راست کلیک کنید. رنگ خود را انتخاب کنید، روی علامت مثبت در منوی سمت راست کلیک کنید.
سبک رنگ خود را نام ببرید و آن را به کتابخانه خود اضافه کنید.

همین کار را با تمام رنگ های خود تکرار کنید و کتابخانه رنگ پروژه خود را خواهید داشت.

مرحله 4: بخش طرح بندی تکراری برای UI و رنگ های معنایی

بیایید رنگ های UI و Semantic را تعریف کنیم. برای این کار می توانیم از کارهایی که برای خود انجام دادیم استفاده کنیم چیدمان رنگ ها به عنوان پایه فقط بخش را کپی کنید و مقادیر HEX را جایگزین کنید تا نشان داده شود UI و معنایی رنگ برای عناصر بصری مانند:

  • متن
  • پیوندها
  • دکمه ها
  • ایالات (فعال/غیرفعال)
  • موفقیت
  • هشدار
  • خطا

هنگامی که این کار را انجام دادید، فریم شما باید چیزی شبیه به این باشد:

بخش Duplicate Layout برای رنگ های UI و Semantic.بخش Duplicate Layout برای رنگ های UI و Semantic.بخش Duplicate Layout برای رنگ های UI و Semantic.
راهنمای تصویری برند شما برای رنگ می تواند اینگونه باشد.

3. Grid و Spacing را تعریف کنید

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

در مثال زیر یک حاشیه 16 پیکسل وجود دارد.در مثال زیر یک حاشیه 16 پیکسل وجود دارد.در مثال زیر یک حاشیه 16 پیکسل وجود دارد.
در مثال زیر یک حاشیه 16 پیکسل وجود دارد.

4. تایپوگرافی را تعریف کنید

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

مرحله 1: فونت های خود را انتخاب کنید

من با دو فونت رایگان از Google Fonts کار خواهم کرد.من با دو فونت رایگان از Google Fonts کار خواهم کرد.من با دو فونت رایگان از Google Fonts کار خواهم کرد.

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

مرحله 2: اندازه و مقیاس قلم را تعریف کنید

شما باید موارد زیر را در نظر بگیرید:

  • عنوان 1: عناوین اصلی
  • عنوان 2: زیرنویس
  • عنوان 3: نکات برجسته
  • عنوان 4: دکمه ها
  • لینک منظم
  • متن پاراگراف یا متن
  • زیرنویس ها
اندازه و مقیاس فونت را تعریف کنید.اندازه و مقیاس فونت را تعریف کنید.اندازه و مقیاس فونت را تعریف کنید.

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

ما اکنون ساختار بسیار اساسی و عناصر سبک سیستم طراحی شما را داریم.

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

این می تواند اولین قدم سیستم طراحی شما باشد. این می تواند اولین قدم سیستم طراحی شما باشد. این می تواند اولین قدم سیستم طراحی شما باشد.
این می تواند اولین قدم سیستم طراحی شما باشد.

کار بر روی نمادها، کارت ها و دکمه های خاص برای برند خود را به عنوان گام بعدی در نظر بگیرید. همچنین به انیمیشن ها و رفتار دکمه ها فکر کنید.

به دنبال نمونه‌های سیستم طراحی Figma باشید تا سبک‌های جدید را در سبک خود اعمال کنید. به بهبود سیستم طراحی خود ادامه دهید تا همه به روز رسانی های طراحی شما منسجم و منسجم به نظر برسند!

منابع و الهام بیشتر Figma را دریافت کنید

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

شما در حال حاضر یک طراح وب بهتر هستید!

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

تمام منابع الهام بخش و خلاق مورد نیاز خود را پیدا کنید عناصر Envato.