گرید سیستم ها - معرفی گرید مخصوص دسکتاپ ,موبایل و تبلت

گرید سیستم ها - معرفی گرید مخصوص دسکتاپ ,موبایل و تبلت
یکی از مهم ترین موارد در طراحی رابط کاربری گرید هاست که شما باید حتما اونا رو یاد بگیرید .
در این ویدئو من به شما کامل توضیح میدم که اصلا گرید ها چه هستند و بهترین تنظیمات برای ساخت گرید در فیگما چیست ؟ همچنین براتون در سه طراحی دسکتاپ و موبایل و تبلت گرید مثال میزنم که میتونید در طراحی هاتون ازشون استفاده کنید .
در ادامه ویدئو نکات خیلی مهمی در خصوص تنظیمات گرید ها در فیگما میگم و یک آپشن خیلی جذاب فیگما در خصوص رعایت فاصله های بزرگ رو که بتونید روی ضریب هشت فیکس کنید معرفی می کنم.
لینک فایل کار شده در ویدئو :
www.figma.com/community/file/...
اگر ویدئو رو دوست داشتین حتما کامنت بزارین و لایک و سابسکرایب کردن کانال هم یادتون نره .
گروه تلگرام و کانال تلگرام هم اپدیت های جدید در خصوص فیگما و مطالب خوبی قرار میدم حتما عضو بشین .
---------
لینک شبکه های اجتماعی من :
/ theehsanez
t.me/theehsanez

[@saharrabiei534]

یعنی واقعا زبونم قاصره از تشکر! خیلی زحمت میکشید، دستتون درد نکنه. نجاتم دادید😅😊

[@TheEhsanez]

خواهش میکنم . ممنون از شما که انرژی میدین با کامنت گذاشتن ❤

[@maryamghanian]

very practical and insightful, Thanks for sharing👌

[@TheEhsanez]

Glad it was helpful!

[@rezanazarian8830]

کامل و عالی👌🏻👌🏻👌🏻👌🏻

[@TheEhsanez]

مرسی از کامنتت رضا عزیز 🌹

[@samirakh3485]

پر از نکات ریز و مهم🤩🤩 حرفه ای تراز این نمیشد💯💥

[@TheEhsanez]

ممنونم سمیرا عزیز بابت کامنتت.

[@rezaghalavand4423]

عالیه👌👌

[@TheEhsanez]

ممنونم رضا عزیز

[@sanaznajafi5834]

بالاخره من گرید ها رو یاد گرفتم🤩. عالی توضیح میدین واقعا

[@TheEhsanez]

خداروشکر که یادگرفتین پس.

[@mohammadabdolhossini76]

واقعا کیف کردن از دیدن این ویدیو، خیلی مستقیم و بدون توضیحات اضافه همه تجربیات و دانشتو انتقال میدی و به نظرم این خیلی اتفاق خوبیه، ذمت گرم احسان جان ❤✌

[@TheEhsanez]

ممنونم محمد جان . خوشحالم که استفاده کردی .

[@somayamoniry]

خیلی ممنون بابت ویدیو.
ولی یک shortcut دیگه ای هم هست که با shift+g هم میتونین گرید ها رو پنهان کنید فکر میکنم خیلی راحت تر از فشار دادن سه تا دکمه هست.

[@TheEhsanez]

بله اینم هست.معمولا یه سری چیزا عادته.

[@mobinasabihi6412]

عالی بود کلی نکته رو خیلی شسته رفته توضیح دادید تکنیکی که یاد دادید حتی خیلی جاها ازش صحبتی نشده خسته نباشید😍❣

[@TheEhsanez]

خواهش میکنم/ خوشحالم براتون مفیده.

[@Yasi1999M]

خیلی خیلییی ممنون...عالی توضیح میدین..برای من خیلی مفیدبود

[@TheEhsanez]

خواهش میکنم.خوشحالم براتون مفید بوده.

[@alirezaaghaei7367]

خلاصه، مختصر و مفید ایولا

[@TheEhsanez]

مخلصم علیرضا جان.♥

[@navidghasemi99]

خیلی لذت بردم عالی و دقیق

[@TheEhsanez]

مخلصم نوید جان.خوشحالم مفید بوده برات.

[@Mguiux]

بی نظیر ، تو این حوضه تکی تو یوتوب با قدرت ادامه بده ، این برنامه اخرتم که داری پروژرو از ابتدا جلو میبری فوق العادست ، نمونشو تو بچه های ایرانی ندیدم

[@TheEhsanez]

ممنون محمد جان از کامنت پر انرژیت

[@farshadamirshoghi9323]

مرسی احسان جان عالی بود

[@user-pn1mo4tr7p]

ممنونم احسان.مرسی از نکاتی که میگی

[@TheEhsanez]

خواهش میکنم.

[@rkhojasteh9367]

عالی و کامل. دمت گرم

[@TheEhsanez]

خواهش میکنم.

[@marziehzarei1576]

عالی

[@baaraanzahedi5036]

عااالی عالی عالی مرسیی

[@hosseinghabeli6877]

استفاده کردیم، ممنون Tnx Ehsan

[@TheEhsanez]

قربانت حسین جان.

[@aylinghorbani8468]

mersii ali bud

[@roshandbr6655]

Excellent video. Thank you!

[@TheEhsanez]

Glad it was helpful!

[@maryamsaedi1252]

عالی احسان عزیز، مرسی

[@TheEhsanez]

خواهش میکنم

[@sepandar84]

بسیار ممنون 🌿🌹

[@TheEhsanez]

خواهش میکنم

[@user-vs5nf5et1g]

❤perfect

[@mahdisharifimehr6426]

😍عااااااالللی

[@TheEhsanez]

♥♥♥

[@sorourpourbaback4218]

Peeeerfeeeect as always, Thanks a lot

[@TheEhsanez]

Thank you too!

[@maryamebadi]

واقعا عالی بود. خیلییی ممنون🙏🙏🌷

[@TheEhsanez]

خواهش میکنم.

[@mahdikhodabandelou745]

عالی بود مرسی❤

[@TheEhsanez]

خواهش میکنم 🌹

[@saharkhalili5321]

خیلی عالی بود ممنونم🌸🙏

[@TheEhsanez]

خواهش میکنم

[@mardon7286]

فوق العاده بود این آموزش ممنونم

[@TheEhsanez]

خواهش میکنم

[@javadsaberi_afroo]

مرسی احسان جان از وقتی که گذاشتی

[@TheEhsanez]

مرسی از کامنتت جواد جان
🌹

[@mahlamahdinezhad4124]

خیلی ممنون عالی

[@TheEhsanez]

خواهش میکنم مهلا عزیز.

[@sagharsaberi]

خیلی خوب بود ممنون

[@TheEhsanez]

خواهش میکنم.

[@marziyesoorani8891]

merc kheyli khub bood

[@TheEhsanez]

خواهش میکنم مرضیه عزیز

[@zohrebarzegar4826]

عالی بود

[@TheEhsanez]

🌹

[@gameoverdj4849]

عالی بود ❤

[@TheEhsanez]

❤🌹

[@mohsenbojnourdi7815]

Excellent!

[@TheEhsanez]

Many thanks!

[@faezehsh7338]

خیلی عالی بود ممنونم از تمام نکات مفیدی که زحمت کشیدید

[@TheEhsanez]

🔥🔥🔥

[@sina-lk4ow]

بسیار کامل و خوب مرسی

[@TheEhsanez]

خواهش میکنم.
مرسی که حمایت میکنی

[@mohammadhosseinbaba4258]

ممنون احسان جان ، خیلی مفید و کاربردی بود

[@TheEhsanez]

خواهش میکنم .

[@minamshahriary9679]

Thank you so much,I learned a lot

[@TheEhsanez]

Glad to hear that!

[@hamidrostami9672]

Tank you master ❤

[@TheEhsanez]

♥♥♥

[@sepide_artdesign]

مرسی که انقدر خفنید واقعا

[@TheEhsanez]

خفنی از خودتونه 😂🌹

[@amx_xin]

ویدو های فیگمات عالیه

[@TheEhsanez]

مرسی امین جان از کامنتت

[@amirhosseinazizzadeh]

عالی، خسته نباشید

[@TheEhsanez]

مرسی از کامنتت . ❤

[@behzadayubifar8071]

awesome Ehsan
🙀

[@TheEhsanez]

tnx ♥

[@yoonesgholamy6417]

عالی بود مرسی❤❤❤

[@TheEhsanez]

خواهش میکنم

[@hadishosseini429]

ممنون از آموزش خيلي خوبتون

[@TheEhsanez]

خواهش میکنم .

[@amooyanhh]

خیلی عالی بود👌🏻

[@TheEhsanez]

خواهش میکنم.

[@saharmm593]

Thanx alot

[@TheEhsanez]

Most welcome

[@foroozzehbari1006]

ممنون از ویدیو بسیار مفید بود 🌸

[@TheEhsanez]

ممنون از شما برای کامنت ♥

[@medisamesbah8776]

دوستان به شدت دیدن ویدیوهای آموزش فیگما رو با احسان پیشنهاد میکنم عالی بود احسان جان مرسی 🤘👏

[@TheEhsanez]

ممنونم مدیسا جان از کامنتت.

[@medisamesbah8776]

@@TheEhsanez من ممنوننم از شما احسان جان💯

[@ghazalnikbakht1629]

عالی 👌😊

[@TheEhsanez]

♥

[@maryamkhosravi4693]

خیلی عالی بود. میشه لطف کنید و در مورد گرید سیستم ها مثل بوت استرپ ها هم توضیح بدید. ممنون

[@TheEhsanez]

در ادامه سعی میکنم در خصوصش ویدئو بسازم در خصوصش.ممنونم از کامننتون .

[@ghghasemi]

سلام دورد بر شما

[@TheEhsanez]

درود بر شما.

[@sarasohrabnia6083]

so prefect

[@TheEhsanez]

thanks ♥

[@elmira.safari]

هر سری که میبینم دلم میخواد تشکر کنم عالی 🙏👌

[@TheEhsanez]

خوشحالم که براتون مفیده.

[@nakhodabartar2462]

DAMET JIZ BRO

[@TheEhsanez]

مخلصم

[@mohammadtaheryan226]

Awliiiii

[@TheEhsanez]

مرسی محمد جان ♥

[@WayOfMani]

Ty

[@TheEhsanez]

قربانت مانی عزیز

[@HadiXP]

هرچند من در مورد گرید ها چندین ویدئو دیدم اما گفتم حتما مثل بقیه ویدئو ها نکته ی خاصی درش هست که همون مضارب 8 رو گفتی و تکنیک هاش که خیلی عالی بود واقعا مرسی. دیگه بهت بگیم خفن کم لطفی کردیم😄😘

[@TheEhsanez]

مخلصم هادی جان . لطف داری بهم 🌹

[@Natureofworrld]

واقعا عالی هستین فک نمیکردم که گرید ها همچین نکته های ریزی هم داشته باشن

[@TheEhsanez]

خواهش میکنم . 🌹

[@alirezamohamadi5414]

nudge amount خیلی خوب بود😁

[@TheEhsanez]

♥♥

[@mahdimallah6248]

👌👌👌👌

[@mamad2k2kk55]

خیلی خوب بود لطفا اگر میشه یه پروژه صفر تا صد حرفه ای اموزش بزارید و اینکه اون کیبورد مجازی رو چطوری گذاشتید ممنون

[@TheEhsanez]

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

[@mahdisharifimehr6426]

👌👌👌👌👌

[@TheEhsanez]

♥♥♥

[@zeynabmontazeri]

ممنون. مثل هميشه عالى🌸 فقط اينكه من با مك كار ميكنم و شورت كاتِ cmd+shift+4 براى من روى چيز ديگه اى تنظيمه و گريدهارو مخفى نميكنه.
و همچنين با گرفتنِshift نتونستم از پنل سمت راست گريدهارو انتخاب كنم و كپى پيست كنم تو يه فريم ديگه.

[@TheEhsanez]

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

[@rashidrasuli4725]

خیلی توضیاحات عالی و جامع بود متشکرم از شما ، و یک سوال داشتم که برای نمایش آن keystroke در قسمت پایینی طرف جپ کُنج صفحه از کدام نرم افزار استفاده میکنید؟

[@TheEhsanez]

والا حقیقتا یادم نیست. جدیدا استفاده نمیکنم.

[@user-vs5nf5et1g]

❤❤❤❤

[@mmdimirzaee7020]

از توضیحاتتون بسیار ممنونم و بعد از این اموزش های شما برای تکمیل کردن اطلاعات باید کجا رفت؟

[@TheEhsanez]

به سراغ گوگل و یوتیوب.

[@hamidrostami9672]

😍😍😍

[@TheEhsanez]

♥♥♥

[@hamidrostami9672]

❤❤❤

[@TheEhsanez]

♥♥♥

[@graphicdesigner7482]

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

[@TheEhsanez]

خواهش میکنم. داخل گروه اگر بگین رفع میکنیم.

[@zar_germany]

نوت برداری کردم از همش. مرسییییییی

[@TheEhsanez]

چه عالی.خوشحالم به کارت اومده زهرا عزیز

[@rezaokhravi3520]

سلام ممنونم از استاد عزیز ، برای اندازه های مختلف جچوری باید میزان margin و gutter رو محاسبه کرد ؟ فرمول داره ؟
باتشکر

[@TheEhsanez]

درود بر شما. هر کدومسایز مختلف دارن.

[@fereshtehmolaeipour4806]

ممنونم تا اینجا کار قدم به قدم با فیلما شما فیگما رو یاد گرفتم و خیلی عالی هستند. سوال داشتم تا این فیلم با گرید آشنا نبودم الان برای طرح های که با فیلم های قبل ایجاد کردم میتونم برگردم روشون گرید رو اعمال کنم تا دوباره تنظیمات بهتری داشته باشیم یا فقط در ابتدا ایجاد یک فریم میتونیم براش گرید داشته باشیم؟

[@TheEhsanez]

نه میتونید برای اون ها هم اعمال کنید فقط باید توجه کنید که مجدد اندازه ها رو چک کنید.
خواهش میکنم.

[@parmispoursamimi2988]

فواصل عمودی ضریب هشت هست. فواصل کاترها چند باید یاشن؟

[@rezakhosrokhavar3239]

ممنونم، اما چرا از گرید استفاده میشه؟ ای کاش دلایلی که پشت استفاده از گرید هم بود میگفتین

[@aniladstudio]

خیلی ممنون ازتون.خدا قوت...استایل ها فقط تو اون پروژه قابل استفاده هستن یا تو پروژه های بعدی و طراحی های جدید هم میشه استفاده کرد از استایل یا باید دوباره استایل ایجاد کرد؟

[@TheEhsanez]

سلام خواهش میکنم.
بله فقط تو همون پروژه امکانش هست استفاده کنید.
برای اینکه بخواید تبدیل به کتابخونه بکنید باید نسخه پولی فیگما رو بخرید.

[@user-ft6mf7ld3z]

دمت گرم معرکه ای

[@TheEhsanez]

ممنونم مخلصم

[@user-ft6mf7ld3z]

🤩🤩🤩🤩

[@TheEhsanez]

♥♥♥

[@mohammadmehdifallah7115]

سلام، برای اینکه گرید توی فیگما دقیقا مشابه گرید بوت استرپ 5 در عرض 1400 بشه باید چه تنظیماتی را انجام بدیم؟

[@TheEhsanez]

سلام کانتینر چنده تو بوت استرپ 5؟

[@mortazahajalizadeh6562]

عالی .ت.نستی واسه شرتکاتای گرید هم یه ویدیو درس کن

[@TheEhsanez]

سلام چشم حتما.

[@hamidrostami9672]

Go like

[@TheEhsanez]

♥♥♥

[@saeedehkazemi9541]

مچکرم، عالی مثل همیشه🌻مرسی ازت
فقط یک سوال واسه گرید افقی در قسمت type واسه من top نداره

[@TheEhsanez]

خواهش میکنم . مرسی از تو برای حمایت هات
اگر تونستی برام یه اسکرین بفرست تو تلگرام تا بتونم متوجه بشم .

[@foroozzehbari1006]

سلام احسان جان این گریدهایی که زحمت کشیدی معرفی کردی برای زبان انگلیسی هم اکی هستن؟

[@TheEhsanez]

سلام
بله مشکلی نداره میتونید استفاده کنید.

[@parastoosa6756]

ممنون از آموزش هاتون
ببخشید یه سوال داشتم چرا فاصله ها رو 70 و 20 گذاشتید مگه نباید مضرب 8 باشند؟🤔

[@TheEhsanez]

ممنون پرستو عزیز.
در مبحث گرید ها چون فواصل مدام دچار تغییر میشه تو گرید های مختلف من مورد های مختلف رو میگم.

[@sanaznajafi5834]

این گریدی که برای آیفون 11 گفتین، برای بقیه موبایل ها هم میشه بزنیم؟ یا برای هرکدوم باید جدا سرچ کنیم؟ مثلا ایفون 13 یا اندروید

[@TheEhsanez]

نه میشه برای همشون زد مشکلی نداره خیلی.

[@rohammotamedi2483]

سلام اگه میشه یه چنتا فونت خوب فارسی و انگلیسی معرفی کنید

[@TheEhsanez]

داخل اینستاگرامم یک پست گذاشتم که فونت های فارسی خوب رو معرفی کردم میتونید ببینید .

[@rezagolshan4037]

سلام من یه سوال داشتم گفتین تمام فاصله ها باید به عدد 8 بخش پذیر باشه ولی شما مارجین رو در اندازه وب ۷۰ دادین و در موبایل ۳۵ آیا مشکلی پیش نمیاره؟؟

[@TheEhsanez]

مارجین ها رو عدد اون طوری دادیم تا کالمن ها روی ضریب هشت بیوفتن.

[@user-od6ox4ne6i]

مثل همیشه عالی
فقط ی سوال چقد سریع کپی می گیرید از دکمه Dاستفاده می کنید چطوری با فاصله خودش کپی می گیره؟!

[@TheEhsanez]

وقتی با alt
کپی میگیریم
در نهایت با کنترل دی میتونیم مجدد کپی در همون اندازه بگیریم.

[@hamidrostami9672]

Www

[@behnamjafari5657]

احسان جان یه سوال تایپ های مختلف گرید چه فرقی با هم دارند؟ و اینکه ضریب ۸ داستانش چیه

[@TheEhsanez]

سلام.
پیکسل گرید 8 تایی جزء مرسوم ترین اندازه هایی هست که تو طراحی ازش استفاده میشه.

[@behnamjafari5657]

@@TheEhsanez مرسی ازت احسان جان دمت گرم

[@user-ft6mf7ld3z]

فقط من دیدم margin ها رو اندازه هاشو متفاوت میذارن مثلا واسه اپ رو ۱۶ میذارن

[@TheEhsanez]

مهم اون 4 تا ستونه بودنه.اندازه ها به دلخواه میتونه تغییرکنه.

[@positron1890]

سلام مرسی از آموزش یه سوال داشتم من میخوام یه سایت ریسپانسیو با گرید بندی متریال دیزاین طراحی کنم دو تا سوال داشتم
اول اینکه سایز آرت برد ها رو چند بگیرم برای موبایل و تبلت و دسکتاپ
دوم اینکه گاتر و مارجین چند باشه
و سوال آخر میخواستم بپرسم وقتی میخوایم یه سایتو ری دیزاینش کنیم باید از برنامه نویس سایز آرت برد ها و بریک پوینت ها و گاتر مارجین هارو بپرسیم ؟

[@TheEhsanez]

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

[@alisaber5577]

برای بوت استرپ در ابعاد موبایل چطور؟

[@fatemehrafiei5217]

واقغا مزسی بابت تمام نکاتی که میگی

[@TheEhsanez]

خواهش میکنم.

[@hamidrostami9672]

چرا مارژیم رو از ۷۰ اوردی روی ۳۵ برای ایفن اعدد دلبخواهی بود یا نه باید همیشه برای ایفن ۳۵ باشه

[@TheEhsanez]

گرید هایی که تو این ویدئو گفتم استاندارد هستن.میتونی از گرید های مختلف استفاده کنی.

[@user-is5ty8qg1h]

سلام من کنترل شیفت چهار رو میزنم اما لی اوت واسم هاید نمیشه ممنون میشم راهنمایی کنید

[@TheEhsanez]

حسین جان هنوز کار نمیکنه؟

[@user-is5ty8qg1h]

@@TheEhsanez سلام کنترل شیفت چهار نامپر کیبرد رو میزدم اون که سمت راست کی برد هست باید شماره های بالای کیبرد رو بزنی ممنون

[@hamidrostami9672]

Eyes

[@TheEhsanez]

♥♥♥