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

در این مقاله، ما به اجزای سازنده به عنوان ویژگی هایی نگاه می کنیم که می توانند به افزایش کارایی شما به عنوان یک طراح کمک کنند. من به شما نشان خواهم داد که چگونه با استفاده از Figma یک جزء دکمه تعاملی ایجاد کنید.

فهرست مطالب

پیش نیازها

کامپوننت ها چیست؟
- اجزای دکمه

نحوه ایجاد یک کامپوننت دکمه تعاملی در Figma
- مولفه دکمه را بسازید
- نحوه ایجاد انواع
– نحوه ایجاد حالت شناور و فعال
– نحوه ایجاد سایر حالت های دکمه
– نحوه گروه بندی دکمه ها بر اساس ایالت ها
- چگونه اجزای دکمه را تعاملی کنیم

نتیجه

پیش نیازها:

برای استفاده بیشتر از این مقاله، داشتن دانش اولیه در مورد نحوه استفاده از Figma و ویژگی های آن مفید خواهد بود. اما توجه داشته باشید که این ضروری نیست، زیرا من این مقاله را برای همه نوشتم - صرف نظر از سطح دانش فردی آنها.

این مقاله برای همه کسانی است که علاقه مند به یادگیری بیشتر در مورد اجزاء، عناصر قابل استفاده مجدد، Figma و طراحی به طور کلی هستند.

کامپوننت ها چیست؟

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

کامپوننت ها بلوک های سازنده تعاملی برای ایجاد یک رابط کاربری هستند. آنها را می توان بر اساس هدفشان به دسته هایی سازماندهی کرد: اقدام، مهار، ارتباط، ناوبری، انتخاب و ورودی متن. – طراحی متریال 3

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

اجزای دکمه

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

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

نحوه ایجاد یک کامپوننت دکمه تعاملی در Figma

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

جزء دکمه شامل حالات دکمه های مختلف (پیش فرض، شناور و فعال) خواهد بود و تعاملی خواهد بود.

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

بیا شروع کنیم!

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

یک فایل Figma جدید باز کنید. اگر حساب Figma ندارید، ادامه دهید و یکی را در figma.com ایجاد کنید.

سپس روی نماد Text در پنل سمت چپ کلیک کنید و دکمه را تایپ کنید.

بعد، طرح بندی خودکار (Shift + A) را اضافه کنید.

صفحه دکمه افقی را 36 پیکسل و لایه عمودی را 12 پیکسل قرار دهید.

همچنین به دکمه شعاع حاشیه 8 پیکسل بدهید.

یک پر را به دکمه اضافه کنید.

من کد رنگ #1C199 را انتخاب می کنم که سایه ای از آبی است.

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

اندازه فونت را به دکمه 16 پیکسل می دهم و وزن را "متوسط" می کنم.

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

برای گفت ن یک آیکون، از افزونه Figma به نام Iconify استفاده می کنم که یکی از بزرگترین مجموعه آیکون ها در Figma است. برای انجام این کار، بر روی canva خود کلیک راست کرده و یک منو باز می شود. به تب Plugins بروید.

فهرست ی از افزونه های اخیری که استفاده کرده اید ظاهر می شود. همچنین تمام افزونه های ذخیره شده ای را که دارید می بینید. اولین افزونه در فهرست من Iconify است (به این دلیل است که من زیاد از آن استفاده می کنم، lol). اکنون، من فقط روی Iconify کلیک می کنم و نماد خاصی را که می خواهم استفاده کنم جستجو می کنم.

اگر قبلاً از افزونه ای استفاده نکرده اید، و پس هیچ افزونه ای در فهرست شما وجود ندارد، می توانید از بخش منابع برای جستجوی افزونه مورد نظر خود استفاده کرده و آن را در فهرست خود ذخیره کنید.

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

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

آیکون را انتخاب می کنم و روی دکمه Import icon کلیک می کنم تا بتواند در فایل Figma من ظاهر شود.

در مرحله بعد، اندازه نماد را به هر ارتفاع و عرضی که قصد داریم کاهش می دهیم. در حال حاضر روی 48*48 است و میخواهم 24*24 باشد.

همچنین رنگ آیکون را برای مطابقت با رنگ متن (سفید) تغییر می دهیم. برای انجام این کار، مطمئن شوید که نماد انتخاب شده است و سپس برای وارد کردن کد رنگ، که در این مورد #FFFFFF است، به Selection Colors بروید.

بعد، آیکون را داخل قاب دکمه اضافه می کنیم. برای انجام این کار، فقط نماد خود را به داخل قاب بکشید.

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

سپس آیکون را کپی کرده و به سمت دیگر متن منتقل کنید. کپی کردن نماد به ما کمک می کند تا بعداً به راحتی اجزای دکمه را با نمادهایی در دو طرف متن ایجاد کنیم.

برای انجام این کار، به سادگی از Ctrl + D استفاده کنید و نماد تکراری را به سمت دیگر منتقل کنید.

در مرحله بعد، هر دو نماد را پنهان می کنم زیرا می خواهم اولین جزء دکمه خود را ایجاد کنم (دکمه فقط متن). نام فریم را به Button تغییر می‌دهم.

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

متوجه خواهید شد که وقتی هر دو نماد مخفی شوند، اندازه قاب به طور خودکار تغییر می کند.

سپس نام فریم را به Button تغییر می‌دهم. برای انجام این کار، روی عنوان فریم دوبار کلیک کنید و نام آن را تغییر دهید.

نحوه ایجاد انواع

در مرحله بعد، قاب دکمه را یک نوع می‌سازیم.

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

برای اینکه قاب دکمه را به یک نوع تبدیل کنید، روی نماد مؤلفه در بالای صفحه دوبار کلیک کنید.

در مرحله بعد، من یک نوع دیگر اضافه می کنم زیرا می خواهم سه حالت برای دکمه (پیش فرض، شناور و فعال) داشته باشم. برای گفت ن یک نوع دیگر، روی نماد مثبت در هر یک از انواع موجود کلیک کنید.

به طور خودکار، یک نوع جدید اضافه خواهد شد.

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

نحوه ایجاد حالت شناور و فعال

در مرحله بعد، من دو دکمه آخر (حالت های شناور و فعال) را تغییر می دهم، پس تفاوت بین سه حالت دکمه واضح خواهد بود. برای انجام این کار، حالت شناور را روشن‌تر و حالت فعال را تیره‌تر می‌کنم.

برای حالت شناور، کد رنگ را به #392AE7 تغییر می‌دهم که سایه روشن‌تری از آبی است. مطمئن شوید که دکمه خاص انتخاب شده است تا تغییرات اعمال شوند:

برای حالت فعال، کد رنگ را به #19107A تغییر می‌دهم که کمی تیره‌تر از آبی است.

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

سپس، می‌خواهیم حالت‌های دکمه دیگری را ایجاد کنیم (دکمه‌هایی با آیکون‌هایی در دو طرف متن و فقط با نمادها).

برای شروع، سه دکمه را کپی می کنم. برای این کار سه دکمه را انتخاب کرده و با استفاده از Ctrl + D کپی کنید.

بعد، قصد داریم اجزای دکمه را با متن و یک نماد سمت چپ ایجاد کنیم. برای این کار روی چشمی که در سمت چپ آیکون های هر کدام از آیکون ها قرار دارد کلیک کنید تا نمایان شوند.

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

برای انجام این کار، دوباره دکمه ها را کپی کنید و همین کار را برای آیکون های مناسب انجام دهید.

در نهایت، ما قصد داریم اجزای دکمه را فقط با آیکون ها ایجاد کنیم.

برای انجام این کار، دکمه ها را برای آخرین بار کپی می کنیم تا متن پنهان شود.

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

من اکنون اندازه قاب مؤلفه را متناسب با محتوای آن تغییر می دهم.

در مرحله بعد، وضعیت های مختلف دکمه را تغییر نام می دهیم تا شناسایی آنها آسان باشد. ابتدا کل قاب جزء را انتخاب کنید. سپس به بخش با عنوان Properties بروید و Property 1 را به Button تغییر دهید تا نشان دهید که این یک جزء دکمه است.

در مرحله بعد، فریم دکمه ها را با نمادها تغییر نام می دهیم. سه فریم اول را به صورت افقی انتخاب کنید و به بخش Current variant بروید. آنها را بدون نماد تغییر نام دهید.

ما همین کار را برای سه دکمه بعدی انجام می دهیم و نام آنها را نمادهای چپ می گذاریم.

ما همین کار را برای مجموعه بعدی انجام می دهیم و نام آنها را به Right Icons تغییر می دهیم.

در نهایت، برای آخرین مجموعه، نام دکمه‌ها را فقط به نمادها تغییر می‌دهیم.

نحوه گروه بندی دکمه ها بر اساس ایالات

در مرحله بعد، دکمه ها را بر اساس حالت ها گروه بندی می کنیم و نام آنها را می گذاریم. با حالت اول شروع می کنیم: پیش فرض . همه فریم های دکمه را به صورت پیش فرض انتخاب کنید و به بخش Current variant در پانل سمت راست بروید. برای ویرایش پیکربندی کامپوننت، روی نماد پیکربندی کلیک کنید.

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

همین کار را برای دو حالت دیگر انجام دهید - شناور و فعال.

چگونه اجزای دکمه را تعاملی کنیم

برای شروع، به برگه Prototype، واقع در بالای صفحه، پانل سمت راست بروید.

در مرحله بعد، یک تعامل از اول به قاب دکمه دوم بدون نماد اضافه کنید. برای این کار بر روی کادر دکمه اول کلیک کنید و نماد مثبت را به فریم دوم بکشید.

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

On click را به هنگام شناور شدن تغییر دهید.

همین کار را برای قاب دکمه بعدی انجام دهید، اما به جای در حالی که ماوس را نگه دارید ، به هنگام فشار دادن تغییر دهید.

حالا همین مراحل را برای ست های دیگر تکرار کنید.

Voilà، شما فقط یک جزء دکمه تعاملی ایجاد کردید.

نتیجه

کامپوننت ها به بهبود طرح های شما کمک می کنند و آنها را کارآمدتر می کنند. آنها همچنین به شما در صرفه جویی در زمان کمک می کنند و ثبات را در طرح های شما بهبود می بخشند. اما آنها فقط زمانی می توانند کمک کنند که به روش درست ایجاد شوند.

تمرین اغلب به بهبود توانایی شما در ایجاد اجزای مفید قابل استفاده مجدد کمک می کند. به یاد داشته باشید، هر تصمیمی را با در نظر گرفتن کاربران خود بگیرید.

خبرکاو