جلسه ی 31 آموزش فیگما / دیزاین سیستم | Design System

درود به شما همراهان گرامی. در این ویدئو از دوره رایگان آموزش طراحی رابط و تجربه کاربری، قصد داریم قصد داریم مبحث دیزاین سیستم در ui را مورد بررسی قرار دهیم. پس از شما دعوت می‌کنیم تا پایان این قسمت ما را همراهی کنید. در این جلسه، دیزاین سیستم‌های مطرح انگلیسی و فارسی را معرفی خواهیم کرد و همچنین با دیزاین سیستم متریال دیزاین، آشنا خواهیم شد. همان طور که در هنر نقاشی سبک و ساختارهای مختلفی برای خلق یک اثر وجود دارد، در طراحی سایت یا محصولات دیجیتالی نیز این موضوع حائز اهمیت است. هر شرکت یا کسب‌وکاری متناسب با نیاز خود از سبک خاصی برای طراحی استفاده می‌کند. تعریف دیزاین سیستم دیزاین‌سیستم یک ساختار یکپارچه و مستقلی از المان‌های طراحی رابط کاربری است. شرکت‌های بزرگ دنیا دیزاین سیستم‌های اختصاصی دارند. در واقع آن‌ها به سبک خاصی از طراحی اعتقاد داشته و مطابق با آن سبک، المان‌های متوع ui را می‌سازند و گاهی در اختیار طراحان برای طراحی سایت یا اپلیکیشن نیز قرار می‌دهند. مفهوم دیزاین‌سیستم از UIKit کلی‌تر است. مانند مقایسه پوشش رسمی به کت و شلوار. در واقع uikit می‌تواند یک یا بخشی از آن المان‌ها باشد. درست است که دیزاین سیستم قبل از اجرای پروتوتایپ پروژه ساخته می‌شود. اما این به این مفهوم نیست که در طول پروژه نمی‌توان آن را تغییر داد. بدیهی است که در گذر زمان ممکن است نظر کارفرما عوض شود، دانش ما بروز شود و یا هر دلیل دیگری. بنابراین ممکن است دیزاین سیستم در گذر زمان تغییر کند و بروز بشود. چه چیزهایی در دیزاین سیستم وجود دارد؟ استایل‌گاید یا راهنمای طراحی و اضافه کردن استایل‌ها به فیگما (که اگر خاطرتان باشد، شامل رنگ‌ها، تایپوگرافی، گریدسیستم، افکت‌ها می‌شود). طراحی uikitهای مورد نیاز پروژه مانند: دکمه‌ها، چک‌باکس، دکمه‌های رادیویی، سوئیچ‌باتن، فرم‌ها، تقویم و هر المان دیگری که در آن پروژه ممکن است آن را لازم داشته باشیم. آیکن‌ها نیز عضو دیگری از دیزاین سیستم هستند. ممکن است آن‌ها را اختصاصی طراحی کنیم، ممکن است از یک پکیج آماده استفاده کنیم و یا حتی از پلاگین‌های فیگما. در هر حالت، باید در دیزاین سیستم وجود داشته باشند. چرا باید دیزاین سیستم طراحی کنیم؟‌ البته شاید طراحی دیزاین سیستم برای همه پروژه‌ها انجام نشود. خصوصا پروژه‌های کوچک که با ساختن یک استایل‌گاید ساده و چند uikit ممکن است مشکل ما حل بشود. اما در پروژه‌های بزرگتر، خصوصا پروژه‌هایی که به صورت تیمی جلو می‌رود، این مقوله بسیار مهم است. حتی اگر پروژه تیمی هم نباشد، بالاخره ممکن است شما روزی از آن شرکت بروید و شخص دیگری بیاید. اگر دیزاین سیستم متناسب با برندبوک و پرسونای آن شرکت ساخته شده باشد، کارشناس جدید به سهولت می‌تواند کار را پیش ببرد. تحویل کار آسان‌تر شده و حتی سرعت اجرا نیز به صورت محسوسی، افزایش خواهد یافت. فرض کنید شما برای دکمه‌ها بخواهید 4 پیکسل radius یا انحنا بگذارید. اگر دیزاین سیستم و uikit در کار نباشد، ممکن است سایر هم‌تیمی‌ها به خوبی آن را رعایت نکنند و این متفاوت شدن مقادیر، مشکلات بسیاری را برای کارفرما و برنامه‌نویسان، ایجاد کند. مطابق قاعده طراحی اتمی که در جلسات قبل توضیح داده شد، ابتدا باید عناصر کوچک را طراحی کنیم تا بتوانیم پروژه را به سهولت پیش ببریم. مثال ساخت آپارتمان با تجهیزات پیش‌ساخته را به یاد بیاورید. دلیل آنکه این ساختمان‌ها در چین، شاید در چند روز ساخته می‌شود این بود که آن‌ها عناصر مورد نیاز خود را از قبل فراهم کرده بودند. از کجا دیزاین سیستم ‌دریافت کنیم‌ وب سایتی تحت عنوان designsystemsforfigma.com وجود دارد که شما با استفاده از آن، می‌توانید دیزاین سیستم‌های معروف فیگما را مشاهده و آن‌ها را به فیگما اضافه کنید. البته توجه کنید که این وب‌سایت صرفا لینک دیزاین سیستم‌ها را در سایت خود گذاشته و لینک‌ها همه در خود سایت فیگما هستند. بنابراین، شما آن‌ها را از community خود فیگما و جستجو در گوگل نیز می‌توانید بیابید. برای یادگیری بهتر این برنامه می‌توانید به آموزش رایگان نرم افزار فیگما در آژانس نوآوری رسام مراجعه کنید. یک سایت ایرانی نیز وجود دارد که می‌توانید در آن دیزاین‌سیستم فارسی و انگلیسی دریافت کنید. همچنین از سایت ایرانی designsystems.ir نیز می‌توانید نسخه اصلی و چپ‌چین دیزاین سیستم‌های مدنظر خود را مشاهده و یا لینک آنها در فیگما را بردارید و به فیگمای خودتان اضافه کنید. ✅ هر سوالی داشتید در بخش کامنت ها بپرسید و این آموزش را برای دوستان علاقمند خود ارسال کنید. موفق باشید🌹 uiux uiux design uiuxfigma uiux tutorial for beginners figma figma tutorial figma tutorial for beginners figma tutorial step by step figma course figma 2025 figma color style فیگما آموزش فیگما آموزش uiux آموزش uiux با فیگما رابط کاربری تجربه ی کاربری طراحی سایت آموزش رایگان uiux آموزش رایگان فیگما آموزش فیگما پروژه محور آموزش فیگما برای طراحی سایت آموزش فیگما 2025 آموزش فیگما فارسی آموزش کامل فیگما و uiux ✅ جلسه ی قبل👇    • جلسه ی 30 آموزش فیگما / طراحی کامپوننت تعا...   #فیگما #رابط_کاربری #تجربه_کاربری #دوره_رایگان_ui #دوره_رایگان_ux #آژانس_نوآوری_رسام #علیرضا_حمداللهی #آموزش_فیگما #کاربردپذیری #طراحی_سایت #کامپوننت #واریانت #دیزاین_سیستم #figma #uiux #uiuxdesign #ui_design #ux_design #Alireza_Hamdollahi #ui #ux #usability #typography #autolayout #constraints #component #variant #design_system