اجزای Figma: از صفر تا قهرمان

در طراحی UI، کامپوننت‌ها عناصر منظمی مانند دکمه‌ها یا فرم‌ها هستند که در طول فرآیند طراحی به خاطر سرعت و کارایی استفاده می‌شوند.

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

1. مقدمه

درس تصویری را تماشا کنید [0:00] ↗

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

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

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

فایل های منبع

نمادها

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

آرم ارزهای دیجیتال

2. ایجاد یک یا چند جزء

درس تصویری را تماشا کنید [4:29] ↗

با باز کردن فایل منبع Figma، می توانید فرآیند ایجاد یک کامپوننت را آغاز کنید. برای ایجاد یک جزء، ابتدا باید لایه هایی را که می خواهید در آن قرار دهید انتخاب کنید. در ادامه مثال دکمه ما، باید لایه های متن و شکل – یا گروهی از عناصر – را انتخاب کنید تا مطمئن شوید که یک جزء را به درستی ایجاد می کنید.

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

3. اجزای اصلی در مقابل نمونه ها

درس تصویری را تماشا کنید [10:38] ↗

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

بنابراین، اولین باری که یک کامپوننت ایجاد می کنید، به آن جزء اصلی گفته می شود. با این حال، هر زمان که یک کپی از آن مؤلفه اصلی ایجاد می‌کنید، به آن یک نمونه می‌گویند.

قابل ذکر است، شما نمی توانید هیچ یک از ویژگی های یک نمونه را تغییر دهید – فقط در مؤلفه اصلی.

4. ایجاد تغییرات در کامپوننت ها و نمونه ها

درس تصویری را تماشا کنید [17:51] ↗

می توانید محتوای موجود در نمونه یک جزء را تغییر دهید. به این حالت رد کامپوننت می گویند و هر یک از تغییراتی را که در یک نمونه خاص ایجاد می کنید، توصیف می کند. این نادیده گرفتن می تواند شامل موارد زیر باشد:

• محتوای درون نمونه
• پر کردن و سکته مغزی
• شعاع مرزی
• شبکه های چیدمان
• تنظیمات صادرات
• نام لایه ها
• سبک های لایه و متن

5. تعویض نمونه های جزء

درس تصویری را تماشا کنید [28:06] ↗

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

6. نامگذاری و سازماندهی اجزاء

درس تصویری را تماشا کنید [34:39] ↗

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

با استفاده از قرارداد نامگذاری جدا شده “Slash” یا “\” در Figma، که باعث می شود همه اجزای انتخاب شده به عنوان “Name You Choose / نام کامپوننت” نامگذاری شوند. این امر یافتن موارد مشابه در لیست اجزای شما را بسیار آسان تر می کند. در این مثال، آیتم ها تحت دسته “نماد منو” سازماندهی شده اند.

7. استفاده از انواع اجزا

درس تصویری را تماشا کنید [47:00] ↗

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

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

8. کار با ویژگی های جزء

درس تصویری را تماشا کنید [1:00:26] ↗

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

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

9. نمونه سازی با اجزای تعاملی

درس تصویری را تماشا کنید [1:13:31] ↗

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

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

درباره Figma و نحوه استفاده از آن بیشتر بدانید

اکنون که کنترلی بر روی اجزای Figma دارید، ممکن است بخواهید مجموعه مهارت های خود را حتی بیشتر گسترش دهید. این مجموعه از آموزش ها باید شما را برای مدتی مشغول نگه دارد!