آموزش ساخت Design System در Figma؛ از Foundation تا Component

در این آموزش ساخت Design System در Figma، با Foundationهای تایپوگرافی و رنگ، Atomic Design، Componentها و اصول مستندسازی یک سیستم طراحی قابل توسعه آشنا میشوید.
آموزش طراحی رابط و تجربه کاربری (UI/UX)، اصول طراحی محصول، پروتوتایپ، تحقیقات کاربر، تست کاربردپذیری و مسیر حرفهای شدن در طراحی محصولات دیجیتال.

در این آموزش ساخت Design System در Figma، با Foundationهای تایپوگرافی و رنگ، Atomic Design، Componentها و اصول مستندسازی یک سیستم طراحی قابل توسعه آشنا میشوید.

تفاوت Design System، Pattern Library و Style Guide چیست؟ این راهنما نقش هرکدام، اجزای اصلی، Governance و انتخاب مناسب برای تیمهای کوچک و بزرگ را توضیح میدهد.

یاد بگیرید چطور با Interactive Components و Variants در Figma حالتهای مختلف کامپوننتها را بدون ساخت فریمهای اضافی به یک پروتوتایپ تعاملی تبدیل کنید.

برای شروع پروژه طراحی محصول و UX از چه روشهایی استفاده کنیم؟ 8 روش کاربردی شامل تحلیل رقبا، ارزش پیشنهادی، Brainstorming، Heuristic Evaluation، Cultural Probes، مصاحبه، استراتژی محصول و Kickoff Meeting.

معرفی 7 پلاگین کاربردی Figma برای موکاپ سهبعدی، Accessibility، انیمیشن، Redline، لوگو برندها، تغییر نام لایهها و مرتبسازی فریمها؛ همراه با توضیح کاربرد هر ابزار.

Accessibility یا دسترسپذیری یعنی طراحی محصول دیجیتال برای طیف گستردهتری از کاربران. با فناوریهای کمکی، Inclusive Design و اصول پایه طراحی دسترسپذیر آشنا شوید.

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

FigJam وایتبرد آنلاین Figma برای Brainstorming، User Flow، Wireframe، Workshop، Feedback و همکاری تیمی است. در این آموزش با کاربردها و Workflow اصلی آن آشنا میشوید.

آموزش آرشیوی Adobe XD از صفر با طراحی یک اپلیکیشن سفارش غذا؛ شامل Artboard، دکمه، رنگ، سایه، Mask و چیدمان عناصر. Adobe XD دیگر توسعه فعال ندارد، اما مفاهیم پایه طراحی رابط همچنان قابل استفادهاند.

آموزش آرشیوی ساخت Prototype در Adobe XD؛ شامل Component State، Drag، Overlay، Voice، Keyboard، Time و Auto-Animate. برای مسیر امروزیتر پروتوتایپ، Figma انتخاب مناسبتری است.