دیزاین سیستم دیگیک زبان طراحی،
یک زبان طراحی،
برای تجربه‌ای یکپارچه
وقتی محصول رشد می‌کند، هماهنگی نباید به حافظهٔ افراد وابسته باشد. دیگ اجزا و قواعد طراحی را در یک مسیر مشترک نگه می‌دارد تا تیم‌ها سریع‌تر تصمیم بگیرند و تجربهٔ کاربر در هر صفحه آشنا بماند.
۰۱ / کامپوننت
یک بار طراحی کنید، همه‌جا درست استفاده کنید
دکمه، فیلد و پنجرهٔ گفتگو وقتی رفتار مشخصی داشته باشند، در هر صفحه قابل‌اعتماد می‌مانند. نمونه‌های زنده را امتحان کنید و ببینید یک تصمیم کوچک چگونه به تجربه‌ای هماهنگ تبدیل می‌شود.
components / dialog360px
عضویت در خبرنامه
از تازه‌های دیگ جا نمانید
خبرهای محصول و راهنماهای طراحی را در یک ایمیل کوتاه دنبال کنید.
یک نمونهٔ زنده از فرم عضویت دیگ Text Field
Switch
فعالغیرفعال
۰۲ / ویژگی‌های کامپوننت
طراح و توسعه‌دهنده، یک تعریف مشترک
وقتی حالت‌های فرم ورود و دکمه نام و رفتار روشنی داشته باشند، پیاده‌سازی از روی حدس پیش نمی‌رود. اختلاف‌های ریز میان فایل طراحی و محصول کمتر می‌شود و اصلاح‌ها سریع‌تر به نتیجه می‌رسند.
variables / component propertiesFIGMA
به دیگ خوش آمدیدبرای ادامه وارد حساب کاربری خود شوید.
یا
فراموشیِ رمز عبور
۰۳ / توکن‌های طراحی
تغییرهای بزرگ، از یک نقطهٔ قابل‌کنترل
فاصله‌ها، اندازه‌ها و گوشه‌ها را یک‌بار تعریف کنید تا در همهٔ اجزا هماهنگ بمانند. با تغییر نیاز محصول یا تم، لازم نیست هر فرم و کارت را جداگانه دوباره بسازید.
tokens / size & spacingAUTO LAYOUT
360px
جزئیات کارت خود را وارد کنید.
۵۰۳۳۲۹۱۰۶۱۸۸۹۳۹۷
شماره کارت را به صورت ۴ رقم، ۴ رقم وارد کنید.۱۳۹۶/۰۸/۲۴۱۴۰۴/۰۲/۱۲
20 · 16 · 24 · 48
۰۴ / تم و واکنش‌گرایی
یک تجربه، در هر اندازه و هر تم
بلاک سلامت اجزای دیگ را در روز و شب، روی موبایل و دسکتاپ ببینید. داده‌ها و جهت فارسی ثابت می‌مانند، اما چیدمان با فضای هر دستگاه هماهنگ می‌شود.
dashboard / healthDARK
دیگ داشبورد / سلامت اجزاا
۹:۴۱●●● ▰
اجزای به‌روز۳ از ۵
- buttonبه‌روز
- text-fieldنیازمند مهاجرت
- date-pickerبه‌روز
تصویر هیرو از فایل مرجع اصلی است؛ پنجره‌ها و پیش‌نمایش‌های بخش‌های بعدی با HTML، CSS و React ساخته شده‌اند.
۰۵ / کتابخانه‌ها
یک زبان مشترک، در ابزار دلخواه شما
تیم‌ها می‌توانند با ابزار آشنای خود کار کنند، بی‌آنکه در رنگ، رفتار یا جزئیات تجربهٔ نهایی از هم فاصله بگیرند.
01 / 03DIG / Figma
کتابخانهٔ طراحی
فیگما
برای تیم‌هایی که هر روز در فیگما طراحی می‌کنند؛ اجزای آماده و حالت‌های مشخص کمک می‌کنند از ایده تا تحویل، زبان مشترکی داشته باشند.
آنچه در اختیار تیم است
- متغیرها و تم‌های هماهنگ
- حالت‌های آمادهٔ اجزا
- کتابخانهٔ مشترک تیم
یک هسته، تجربه‌ای هماهنگ
02 / 03DIG / Sketch
کتابخانهٔ طراحی
اسکچ
برای تیم‌های وفادار به اسکچ؛ نمادها و سبک‌های مشترک، تغییرهای طراحی را در سراسر فایل‌ها قابل‌پیگیری‌تر می‌کنند.
آنچه در اختیار تیم است
- سبک‌های مشترک
- نمادها و جایگزینی‌ها
- به‌روزرسانی کنترل‌شده
یک هسته، تجربه‌ای هماهنگ
03 / 03DIG / Penpot
کتابخانهٔ طراحی
پن‌پات
برای همکاری روی بستری باز؛ اجزای مشترک و خروجی‌های نزدیک به وب، گفت‌وگوی طراح و توسعه‌دهنده را ساده‌تر می‌کنند.
آنچه در اختیار تیم است
- توکن‌های طراحی
- اجزای مشترک
- خروجی استاندارد وب
یک هسته، تجربه‌ای هماهنگ
۰۶ / مسیر کار
از تصمیم طراحی تا تجربهٔ واقعی
تغییر خوب فقط در فایل طراحی نمی‌ماند. یک مسیر روشن کمک می‌کند همان تصمیم، دقیق و قابل‌پیگیری به محصول برسد.
- ۰1
یک نقطه برای تصمیم‌های طراحی
رنگ، فاصله و رفتار اجزا از یک تعریف مشترک شروع می‌شوند؛ نه از انتخاب‌های پراکنده در هر فایل.
- ۰2
متناسب با ابزار هر تیم
همان تصمیم‌ها در قالب امکانات بومی فیگما، اسکچ و پن‌پات در دسترس تیم قرار می‌گیرند.
- ۰3
بررسی پیش از تحویل
ظاهر، خوانایی، حالت‌ها و رفتار راست‌به‌چپ بررسی می‌شوند تا جزئیات مهم در مسیر اجرا گم نشوند.
- ۰4
تغییر بدون غافلگیری
نسخه‌بندی و ثبت تغییرها کمک می‌کند تیم‌ها بدانند چه چیزی عوض شده و کجا باید آن را اعمال کنند.
از اولین طرح تا آخرین جزئیات، هم‌مسیر بمانید.
اجزای مشترک، تصمیم‌های روشن‌تر و تجربه‌ای آشناتر برای کاربران شما.