Complete Tutorial on Designing Dashboard UI in Figma
Learn how to design a user-friendly dashboard UI step-by-step using Figma in this comprehensive tutorial. Follow along as we create a 1440 pixel wide framework and customize it for a visually appealing interface.
Install Tubelator On Chrome
Video Summary & Chapters
No chapters for this video generated yet.
Video Transcript
سلام دوستان، در این ویدئو ما قصد داریم این صفحه نمایش را از ابتدا با استفاده از Figma ایجاد کنیم.
و درست قبل از شروع من می خواهم به شما یادآوری کنم که من اخیرا تخفیف در دوره Figma من
بنابراین لطفا آن را بررسی کنید اگر شما علاقه مند به یادگیری بیشتر در مورد Figma هستید
اما در حال حاضر بدون هیچ گونه تداوم بیشتر، بیایید به ویدئو برویم.
خوب، بنابراین ما به Figma بازگشتیم و اولین کاری که می خواهیم انجام دهیم این است که یک چارچوب ایجاد کنیم.
بنابراین بیایید به زیر دسکتاپ Presets برویم و ما می خواهیم 1440 پیکسل عرض را انتخاب کنیم
و در این مرحله ما قصد داریم دو کلیک بر روی نام چارچوب.
ما می خواهیم آن را به 1 تغییر دهیم.
حالا یکی دیگر از کارهایی که می خواهیم انجام دهیم این است که گوشه ها را دور کنیم.
به طوری که ما در حال حاضر این احساس کاربر دوستانه به اپلیکیشن داریم
و ما همچنین به اضافه کردن یک سقوط فقط برای سرگرمی از آن
به منظور تشخیص بصری آن از پس زمینه
و ما آن را بسیار روشن خواهیم کرد.
شاید حدود 10٪.ما همچنین به آن کمی از یک جهت Y می دهد.
به این معنی است که ما می خواهیم آن را کمی بیشتر به سمت بخش پایین باشد. بنابراین در این
نکته ای که ما قصد داریم سه گزینه منوی اصلی را ایجاد کنیم. بنابراین بیایید به جلو برویم و
و بیایید این مستطیل اول را ایجاد کنیم و سپس ما به سادگی بر روی Ctrl کلیک کنیم.
C و Ctrl V یا Cmd C و Cmd V و ما هر دو را تکرار خواهیم کرد.
حالا ما آنها را سفید می سازیم و دلیل آن این است که ما می خواهیم تغییر دهیم.
پس زمینه چارچوب
بنابراین بیایید به زیر Fill برویم، ما پس زمینه مشابه این را در اینجا انتخاب خواهیم کرد.
اما ما احتمالا آن را کمی سبک تر می کنیم و فقط کمی آن را بدهیم.
کمی کم تونی و تونی.
درست است بنابراین در این نقطه من فکر می کنم ما پایگاه ما در حال رفتن است، من احتمالا این را کمی انجام می دهم
کمی گسترده تر و من می خواهم آن را یک بار دیگر تکرار کنم تا شروع به دریافت
ساختار اصلی این dashboard. بنابراین بیایید عرض را افزایش دهیم، بیایید این یک را بر روی
در اینجا، رفتن به تکرار آن به طوری که ما در حال حاضر می توانیم از سطح بالا ببینید که چه چیزی در حال رفتن به آن است.
Intel. بیایید این را دوباره تکرار کنیم، اجازه دهید عرض را ایجاد کنیم و آن را تنظیم کنیم. خوب، بنابراین ما
این یکی را به اینجا بیاوریم، ما این یکی را به اینجا بیاوریم و این به اینجا می رود.
اجازه می دهد تا ما را از سطح بالا ببینیم که آیا تمام بلوک های ساختمان اصلی که ما ایجاد می کنیم
یا کار کردن یا اگر ما نیاز به برخی از تصفیه ها داشته باشیم زیرا همیشه خوب است که سطح بالا کار کنید اول
سپس به جزئیات پروژه بروید.
خوب، اکنون که پایگاه ما در حال رفتن است، ما تمام این ها را انتخاب خواهیم کرد.
و من آنها را با هم جمع می کنم و من هم آنها را قفل می کنم.
بنابراین من می توانم به راحتی در پروژه واقعی کار کنم بدون نیاز به نگرانی در مورد جزئیات.
خوب است، بنابراین من به اینجا می روم.
من می خواهم سه نقطه ایجاد کنم که نماد گزینه های لباس را نشان می دهند
علاوه بر سایر گزینه هایی که معمولا در دسترس داریم.
ما بر روی یک اپلیکیشن کار می کنیم، یا در واقع زمانی که از یک اپلیکیشن استفاده می کنیم.
و این کار خواهد کرد.
حالا بیایید ادامه دهیم و یک لوگو برای این کار ایجاد کنیم.
بنابراین، این لوگو اصلی خواهد بود.
من می خواهم برای این کار یک ضربه بزنم.
بیایید اندازه سکته را افزایش دهیم.
و شاید آن را کمی کوچک تر کنیم.
حالا می خواهم یک زمینه جستجو ایجاد کنم.
بیایید آن را به اینجا بیاوریم.
بیایید آن را اینجا بیاوریم.
اجازه دهید رادیو را افزایش دهیم.
در حال حاضر، در این نقطه، همانطور که ما در زمینه جستجو کار می کنیم، من در واقع به استفاده از
