سایت خبرکاو

جستجوگر هوشمند اخبار و مطالب فناوری

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

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

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

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

فهرست مطالب

    پیش نیازها

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

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

    نتیجه

پیش نیازها:

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

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

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

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

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

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

اجزای دکمه

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

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

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

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

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

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

تصویر-30
انواع مختلف دکمه (فقط نماد، نماد و متن، فقط متن). تصویر از Telerik

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

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

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

دکمه-1
باز کردن یک فایل Figma جدید

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

دکمه-2
تایپ کردن "دکمه" در نوار جستجو.

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

دکمه-3
اضافه کردن طرح بندی خودکار

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

دکمه-4
اضافه کردن لایه های افقی و عمودی

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

دکمه-5
گفت ن شعاع مرزی

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

دکمه-6
رفتن به بخش "پر".

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

دکمه-7
انتخاب کد رنگ

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

دکمه-8
رفتن به بخش فونت

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

دکمه-10
تغییر اندازه فونت به 16 پیکسل
دکمه-11
تغییر وزن فونت به متوسط
دکمه-9
نمایش متن ویرایش شده

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

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

دکمه-12
باز کردن پلاگین ها

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

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

دکمه-65
رفتن به بخش منابع
دکمه-64
جستجوی افزونه ها

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

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

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

دکمه-14
انتخاب یک نماد فلش رو به جلو خاص

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

دکمه-15
در حال وارد کردن نماد به فایل شما

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

دکمه-16
اندازه نماد در حال حاضر 48x48 است
دکمه-17
تغییر اندازه نماد به 24x24

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

دکمه-18
تغییر رنگ نماد به سفید (#FFFFFF)

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

دکمه-19
کشیدن نماد فلش به کادر دکمه

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

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

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

دکمه-20
با استفاده از Ctrl + D برای کپی کردن یک آیکون
دکمه-21
انتقال نماد تکراری به طرف دیگر کادر.

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

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

دکمه-22
برای مخفی کردن نمادها به پانل لایه ها بروید

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

دکمه-23
قاب دکمه با آیکون های مخفی

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

دکمه-24
روی قاب دوبار کلیک کنید
دکمه-25
قاب دکمه تغییر نام داد

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

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

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

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

دکمه-26
به نماد مؤلفه در بالای صفحه بروید و دوبار کلیک کنید
دکمه-27
نوع مولفه دکمه

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

دکمه-28
با کلیک بر روی آیکون olus در یک نوع برای گفت ن نوع دیگری

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

دکمه-29
نسخه سوم اضافه شد

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

دکمه-30
انتخاب قاب جزء
دکمه-31
افزایش عرض قاب جزء.

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

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

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

دکمه-32
در حال تغییر کد رنگ برای حالت شناور

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

دکمه-33
تغییر کد رنگ حالت فعال

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

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

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

دکمه-34
کپی کردن سه دکمه

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

دکمه-35
نمایان شدن آیکون های سمت چپ دکمه ها

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

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

دکمه-36
تکرار دکمه ها برای بار دوم
دکمه-37
نمایان شدن نمادهای سمت راست

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

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

دکمه-38
تکرار دکمه ها برای بار سوم
دکمه-39
مخفی کردن متن

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

دکمه-40
انتخاب قاب‌های «فقط نمادها».
دکمه-41
تغییر اندازه فریم ها

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

دکمه-42
تغییر اندازه قاب جزء

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

دکمه-43
انتقال به بخش خواص
دکمه-44
تغییر نام قاب جزء

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

دکمه-46
انتخاب سه دکمه اول و تغییر نام آنها
دکمه-47
تغییر نام دکمه های بدون نماد

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

دکمه-48
تغییر نام دکمه های آیکون های سمت چپ

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

دکمه-49
تغییر نام دکمه های نمادهای سمت راست

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

دکمه-50
تغییر نام نمادها فقط دکمه ها

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

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

دکمه-51
با کلیک بر روی نماد پیکربندی

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

دکمه-55
گفت ن توضیحات

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

دکمه-53
گفت ن توضیحات برای حالت شناور
دکمه-54
گفت ن توضیحات برای وضعیت فعال

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

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

دکمه-56
تغییر به حالت نمونه اولیه

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

دکمه-57
گفت ن یک تعامل

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

دکمه-58
ایجاد تنظیمات تعامل

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

دکمه-60
تغییر نوع تعامل به "هنگام شناور بودن"

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

دکمه-61
متحرک سازی قاب دکمه سوم

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

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

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

نتیجه

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

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

خبرکاو