دسترسی سریع:

مسیر:

صفحه اصلی

🔔 با توجه به بهبود نسبی اینترنت، آماده‌سازی دوره‌ها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دوره‌ها ممکن است با کمی تأخیر انجام شود. مدت اشتراک‌های تهیه‌شده محفوظ است.

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

آموزش طراحی حرفه‌ای: توکن‌های فیگما برای سیستم‌های طراحی مؤثر - آخرین آپدیت

دانلود Design Like a Pro: Figma Tokens for Effective Design Systems

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

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

دوره آموزشی تسلط بر Figma Tokens: ساخت سیستم‌های طراحی منسجم و مقیاس‌پذیر برای همکاری بی‌نقص و افزایش راندمان

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

آنچه در این دوره یاد خواهید گرفت:

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

سرفصل‌های دوره:

توکن‌های پایه (Primitive Tokens)
جابجایی توکن‌ها
توکن‌های معنایی (Semantic Tokens)
تمرین توکن‌های معنایی
نام‌گذاری design tokens
توکن‌های تایپوگرافی
توکن‌های فاصله‌گذاری
مدیریت توکن‌ها
توکن‌های شعاع (Radius Tokens)
توکن‌های کامپوننت
ایجاد توکن‌های کامپوننت

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

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

مواد لازم: دسترسی به Figma و همچنین هر ابزار طراحی اولیه که در حال حاضر استفاده می‌کنید، مورد نیاز است. تمام مواد و قالب‌ها در طول دوره ارائه می‌شوند.

مدیریت Design Tokens

استفاده از Primitive Tokens

بررسی Semantic Tokens

ساختار و سازماندهی توکن‌ها

توکن‌های تایپوگرافی و فاصله‌گذاری

قراردادهای نام‌گذاری توکن‌ها

توکن‌های شعاع و کامپوننت

اعمال Design Tokens در گردش کار شما

**توضیحات و نکات کلیدی برای سئو:** * **کلمات کلیدی:** این ترجمه شامل کلمات کلیدی اصلی مانند "Figma Tokens"، "سیستم‌های طراحی"، "یکپارچگی"، "مقیاس‌پذیری"، "تایپوگرافی"، "رنگ‌ها"، "فاصله‌گذاری" و "UI/UX" است. این کلمات کلیدی در عنوان‌ها، توضیحات و متن اصلی گنجانده شده‌اند. * **ساختار HTML:** استفاده از تگ‌های <p>، <ul> و <li> برای ساختاردهی محتوا، خوانایی و درک بهتر توسط موتورهای جستجو را بهبود می‌بخشد. * **عنوان‌های واضح:** عنوان‌ها (که در اینجا در قالب <p><b>...</b></p> شبیه‌سازی شده‌اند) برای دسته‌بندی محتوا و برجسته‌سازی موضوعات مهم استفاده شده‌اند. * **تراکم کلمات کلیدی:** کلمات کلیدی به طور طبیعی در متن استفاده شده‌اند. زیاده‌روی در استفاده از کلمات کلیدی (Keyword stuffing) خودداری شده است. * **خوانایی:** متن به زبان ساده و قابل فهم نوشته شده است و برای خوانندگان مختلف (از مبتدی تا حرفه‌ای) مناسب است. * **تجربه کاربری:** ساختاردهی مناسب (استفاده از لیست‌ها و پاراگراف‌ها) خوانایی را افزایش داده و تجربه کاربری را بهبود می‌بخشد، که این امر بر سئو نیز تاثیر مثبت دارد. * **بهینه‌سازی محتوا:** متن در مورد فواید یادگیری Figma Tokens، نحوه استفاده از آن و مخاطبان هدف توضیح می‌دهد. این اطلاعات باعث می‌شود که محتوا برای کاربرانی که به دنبال یادگیری این موضوع هستند، جذاب باشد و رتبه بهتری در نتایج جستجو کسب کند. * **ترجمه دقیق:** ترجمه وفادار به متن اصلی است و اطلاعات مهم را به درستی منتقل می‌کند. * **متن جایگزین (alt text):** به دلیل محدودیت‌های درخواستی، امکان استفاده از تگ‌های تصویر و متن جایگزین وجود نداشت. در یک صفحه وب واقعی، استفاده از تصاویر مرتبط و متن جایگزین برای آن‌ها نیز می‌تواند سئو را بهبود بخشد. **نکته:** این خروجی با توجه به محدودیت‌های اعمال شده در سوال (عدم استفاده از تگ‌های عنوان و سایر تگ‌های HTML) ارائه شده است. در یک وب‌سایت واقعی، استفاده از تگ‌های عنوان (<h1>، <h2> و غیره) برای سرفصل‌ها، استفاده از تگ‌های <meta> برای توضیحات صفحه و کلمات کلیدی، و بهینه‌سازی تصاویر ضروری است.

سرفصل ها و درس ها

Figma Design Tokens-نشانه های طراحی Figma Figma Design Tokens

Introduction-مقدمه Introduction
Practice Files-فایل‌های تمرین Practice Files
What is Design Tokens-نشانه های طراحی چیست؟ What is Design Tokens
Primitive Tokens-نشانه های اولیه Primitive Tokens
Move Primitive Tokens Workaround-راه حل برای جابجایی نشانه های اولیه Move Primitive Tokens Workaround
Move any Tokens-جابجایی هر نشانه Move any Tokens
Semantic Token-نشانه معنایی Semantic Token
Semantic Token Practice-تمرین نشانه معنایی Semantic Token Practice
Token Naming-نامگذاری نشانه Token Naming
Variant and Sizing-متغیرها و اندازه ها Variant and Sizing
Typography Tokens-نشانه های تایپوگرافی Typography Tokens
Spacing Tokens-نشانه های فاصله گذاری Spacing Tokens
Token Management-مدیریت نشانه Token Management
Radius Tokens-نشانه های شعاع Radius Tokens
Component Design Tokens-نشانه های طراحی کامپوننت Component Design Tokens
Create Component Tokens-ایجاد نشانه های کامپوننت Create Component Tokens
Bulk Rename-تغییر نام دسته ای Bulk Rename
Thank you-متشکرم Thank you