متن ایزومتریک در فیگما

متن ایزومتریک در فیگما یکی از جذاب‌ترین تکنیک‌هایی است که به طراحان کمک می‌کند تا نوشته‌ها را از حالت تخت و دوبعدی خارج کرده و به آن‌ها بُعد، عمق و حالت سه‌بعدی بدهند. با استفاده از چند گام ساده و ابزارهای کاربردی فیگما، می‌توان متنی ساخت که مانند یک حجم واقعی روی صفحه به نظر برسد. این تکنیک در طراحی رابط کاربری، ساخت پوسترهای دیجیتال، موشن گرافیک و حتی طراحی سه‌بعدی ،دو‌بعدی کاربرد فراوانی دارد. پیشنهاد میکنم آموزش ساخت Liquid Glass در فیگما | افکت Glass را هم مشاهده کنید.

مشاهده آنلاین فیلم آموزش متن ایزومتریک در فیگما

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

مرحله اول: ایجاد متن اولیه

ابتدا ابزار Text را از نوار ابزار فیگما انتخاب می‌کنیم و کلمه یا عبارت مورد نظر خود را تایپ می‌کنیم. بهتر است از فونتی استفاده کنید که ضخامت و خوانایی مناسبی داشته باشد تا هنگام تبدیل به ایزومتریک، جزئیات آن حفظ شود. در این مرحله رنگ متن را نیز مشخص کنید تا در مراحل بعد، سایه و حجم‌دهی بر اساس آن انجام شود. این پایه‌ی کار ما برای ساخت متن ایزومتریک در فیگما است.

مرحله دوم: ساخت کامپوننت

در سمت راست صفحه، گزینه‌ی Create Component را انتخاب کنید تا متن شما به یک کامپوننت تبدیل شود. این کار باعث می‌شود در ادامه اگر تغییری روی متن اصلی ایجاد کنید، در همه‌ی کپی‌ها و نسخه‌های ایزومتریک آن نیز به‌روزرسانی شود. این مرحله برای مدیریت حرفه‌ای و غیرتکراری عناصر در طراحی ایزومتریک اهمیت زیادی دارد.

مرحله سوم: ایجاد دو کپی از لایه متن

اکنون از لایه متن دو کپی دیگر بگیرید (با کلیدهای Ctrl+D ). در مجموع باید سه لایه از متن داشته باشید. این سه لایه در مراحل بعدی برای ساخت سطوح مختلف حجم ایزومتریک استفاده خواهند شد. هر کدام از این لایه‌ها نقش خاصی دارند: لایه اصلی، لایه سایه و لایه اصطلاحا حجم. با این روش ساده می‌توانیم ساختار ایزومتریک متن را شکل دهیم. 

مرحله چهارم: فلیپ ورتیکال لایه سوم

حالا لایه سوم را انتخاب کرده و آن را Flip Vertical کنید تا از لحاظ جهت‌گیری معکوس شود. با این کار سطح زیرین یا سایه‌ی متن ساخته می‌شود. در صورت نیاز می‌توانید شفافیت یا رنگ این لایه را تغییر دهید تا به‌عنوان سایه‌ی واقع‌گرایانه‌تری عمل کند. این گام در زیبایی و عمق بصری متن ایزومتریک در فیگما بسیار مؤثر است.

مرحله پنجم: فعال‌سازی پلاگین ایزومتریک

از منوی پایین وارد بخش Plugins → Ease Isometric شوید و یا مشابه آن را انتخاب کنید تا پنل تنظیمات پلاگین باز شود. این پلاگین یکی از ابزارهای ضروری برای ساخت ایزومتریک و متن‌های سه‌بعدی در فیگما است. با فعال شدن این پلاگین می‌توانید جهت، زاویه و عمق مورد نظر را برای هر لایه تنظیم کنید.

مرحله ششم: تنظیم لایه متن دوم با مکعب سمت راست

لایه دوم را انتخاب کنید و از پنل پلاگین، گزینه‌ی مربوط به مکعب Right Plane را فعال کنید. این کار باعث می‌شود متن به‌صورت زاویه‌دار در سمت راست دیده شود و اولین بُعد ایزومتریک ایجاد گردد. این زاویه، حالت سه‌بعدی را آغاز کرده و پایه‌ی اصلی شکل‌دهی به حجم متن ایزومتریک در فیگما را می‌سازد.

مرحله هفتم: تنظیم لایه متن سوم بامکعب سمت چپ

اکنون لایه سوم را انتخاب کرده و در پلاگین، گزینه‌ی up Plane را انتخاب کنید. این لایه نقش سمت پایین متن ایزومتریک در فیگما را دارد و باید با دقت موقعیت آن را با دو لایه دیگر تنظیم کنید تا اتصال دقیق و طبیعی بین سطوح برقرار شود. در اینجا می‌توانید از افکت‌های ایزومتریک شیشه استفاده کنید تا انعکاس نور و شفافیت زیباتری  در ادامه روی متن ایجاد شود.

مرحله هشتم: تغییر شفافیت رنگ‌ها

در نوار کناری، بخش Selection Colors را باز کرده و مقدار شفافیت (Opacity) را روی حدود 60 درصد تنظیم کنید. این تنظیم باعث می‌شود سطوح حجم، تفاوت ظریف اما چشم‌نوازی از نظر درک عمق پیدا کنند. این مرحله برای واقعی‌تر کردن متن ایزومتریک در فیگما حیاتی است، مخصوصاً اگر از رنگ‌های سرد یا شیشه‌ای در طراحی خود استفاده می‌کنید.

مرحله نهم: افزودن افکت Layer Blur

در همان نوار سمت راست، روی گزینه Effects → + کلیک کنید و افکت Layer Blur را انتخاب نمایید. در بخش Progressive مقدار 35 را برای Start وارد کنید تا محو شدن تدریجی روی سطح ایجاد شود. این افکت به کار عمق می‌بخشد و باعث می‌شود حجم، نرم‌تر و طبیعی‌تر دیده شود. ترکیب بلور با ایزومتریک نتیجه‌ای حرفه‌ای و مدرن به همراه دارد.

مرحله دهم: ویرایش کامپوننت اصلی

در پایان اگر به سراغ Component اصلی که در مرحله دوم ایجاد کردید بروید و متن آن را ویرایش کنید، مشاهده می‌کنید که تمام نسخه‌های ایزومتریک نیز به‌صورت خودکار به‌روزرسانی می‌شوند. این قابلیت فیگما باعث صرفه‌جویی در زمان و دقت بیشتر در پروژه‌های بزرگ می‌شود. با این روش می‌توانید چندین متن ایزومتریک در فیگما با استایل‌های مختلف بسازید و تنها با تغییر کامپوننت اصلی، کل طراحی را به‌روز کنید.

نتیجه‌گیری

در این آموزش یاد گرفتیم چگونه تنها با چند گام ساده، متن ایزومتریک در فیگما بسازیم. این تکنیک به شما امکان می‌دهد نوشته‌ها را از حالت ساده خارج کرده و به آن‌ها جلوه‌ای حجمی، نورپردازی‌شده و مدرن بدهید. استفاده از پلاگین‌های حرفه‌ای مانند Ease Isometric، ترکیب رنگ‌های مناسب و افکت‌های شفافیت یا بلور، طراحی شما را به سطحی بالاتر می‌برد.

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

اگه می‌خوای از طراحی رابط کاربری (UI) درآمد بگیری یا پروژه‌های شخصی‌ت رو حرفه‌ای و چشمگیر ارائه بدی، دوره جامع فیگما در بیت گرف دقیقاً برای تو ساخته شده!
اینجا یاد می‌گیری چطور با ابزارها در فیگما، طراحی UI زیبا، خلاقانه و اصولی انجام بدی و مهارتت رو به سطحی برسونی که بتونی در بازار کار بدرخشی.