چگونه فایل های Figma را مانند یک حرفه ای سازماندهی کنیم

سازماندهی کارآمد فایل Figma برای حفظ بهره وری و همکاری کلیدی است. نمی دانید چگونه فایل های Figma را سازماندهی کنید؟ این آموزش اینجا برای کمک است!

آیا تا به حال فایلی با عنوان “App-layout-v1-final-final-final“؟ هیچ شرمی در آن وجود ندارد، همه ما آنجا بوده ایم! با این حال، داشتن فایل های Figma به خوبی سازماندهی شده می تواند یک تغییر بازی برای شما باشد.

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

این آموزش مخصوصا (اما نه منحصرا) برای طراحان آزاد که به تنهایی کار می کنند ایجاد شده است. بنابراین ما بر روی ردیف‌های پایین این نمودار جریان سازمانی تمرکز خواهیم کرد: پروژه ها و فایل ها.

بیایید به پنج نکته و ترفندی بپردازیم که به راحتی می توانید در پروژه های خود به کار ببرید. هدف این است که با سازماندهی هر پروژه و پیگیری هر جنبه خاصی از آن، زندگی خود را آسانتر کنید.

5 نکته و ترفند برای سازماندهی پروژه های Figma مانند یک حرفه ای

از نمای کلی شروع می کنیم اخیر صفحه در Figma. سپس ما تمام راه را به نکات ساختار داخلی توصیه شده در داخل هر پروژه می پردازیم.

این نکات صرفاً یک پیشنهاد هستند. هزار نسخه از سازماندهی فایل Figma وجود دارد. اما برای راهنمایی، در اینجا سه ​​رویکرد سازمانی به اشتراک گذاشته شده توسط Figma وجود دارد:

1. بر اساس سطح محصول: این برای برنامه ها یا محصولات وب پیشنهاد می شود. به عنوان مثال، اگر در حال ساخت یک وب سایت تجارت الکترونیک هستید، پروژه هایی مانند پروژه خواهید داشت حساب، سبد خرید، صفحه نخست، و لیست محصولات.
2. بر اساس ویژگی یا وضعیت تولید: این رویکرد برای تیم ها عالی است تا ببینند چه چیزی “زنده” است و چه چیزی نیست.
3. بر اساس مرحله فرآیند طراحی: این برای تیم هایی مانند آژانس ها بهترین است تا همه در مرحله فرآیند همسو باشند. این می تواند شامل پروژه هایی برای WIP، مرور، توسعه و ارسال شد.

این آموزش بر روی آنچه در هنگام کار با Figma در نسخه اصلی و رایگان در دسترس است متمرکز شده است.

1. نام فایل های تمیز را ایجاد کنید

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

همچنین توصیه می شود یک قالب نامگذاری ایجاد کنید تا به طور مداوم استفاده شود. به عنوان مثال، می تواند “ProjectName_Section” باشد. این یک توافق قابل تکرار و ثابت بین شما و همکارانتان باشد.

در اینجا نموداری وجود دارد که سلسله مراتب و ساختاری را که نام فایل Figma می تواند دنبال کند نشان می دهد:

2. برای هر پروژه یک جلد فایل اضافه کنید

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

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

با ایجاد صفحه ای با عنوان Cover شروع کنید و فشار دهید اف.

سپس بر روی پنل سمت راست کلیک کنید انجمن Figma و سپس بر روی آن کلیک کنید جلد پلاگین / فایل.

شما یک قاب 1920 در 960 دریافت خواهید کرد. قرار است روی آن کلیک راست کرده و انتخاب کنید به عنوان تصویر کوچک تنظیم کنید.

اطلاعات اصلی که جلد فایل شما باید داشته باشد در اینجا آمده است:

• وضعیت
• نام فایل
• شرح پروژه
• تیم
• عناصر بصری

مطمئن نیستید که چگونه مال خود را طراحی کنید؟ یافتن بارهای از طرح های جلد فایل فیگما در انجمن Figma برای الهام گرفتن. مال من چیزی شبیه به این است:

و شما آماده اید! این کار را با تمام فایل‌های Figma انجام دهید و سریع‌تر موارد را پیدا کنید!

3. به ساختار صفحه فکر کنید

حال به داخل فایل های Figma می رویم. فکر کردن در مورد ساختار صفحه می تواند زندگی شما را کاملاً نجات دهد، زیرا هر پروژه تکامل می یابد و پروژه های بیشتری در راه است. ساختار صفحه شما برای سازماندهی کارآمد فایل Figma می تواند شامل موارد زیر باشد:

• پوشش فایل های Figma (مانند موردی که من به شما نشان دادم چگونه بسازید)
• تحقیق تصویری: تمام اسکرین شات ها و ایده هایی که پیدا می کنید را در یک مکان اضافه کنید
• تحقیق کاربر: می‌توانید جریان‌های کاربر را آزمایش کرده و بدون بهم ریختن طراحی خود پیگیری کنید
• سیستم طراحی: این مانند جعبه گنج شماست که تمام عناصر طراحی خود را در آن نگهداری می کنید
• آماده برای بررسی: در اینجا طرحی آماده است تا قبل از حرکت به مشتری خود نشان دهید
• آماده برای توسعه: اینجا جایی است که هر چیزی که توسط مشتری تایید شده است قرار دارد و برای تیم توسعه شما آماده است تا روی آن کار کند

برای مثال، می‌تواند یک ساختار دو صفحه‌ای پایه باشد، مانند آنچه در این نشان داده شده است الگوی وب سایت تجارت الکترونیک مواد غذایی:

یا اگر پروژه پیچیده تر باشد یا جنبه های بیشتری را در نظر بگیرد، می تواند مشخص تر باشد. حتی می توانید برای راهنمایی بصری ایموجی اضافه کنید.

در اینجا یک ساختار صفحه خاص تر پیشنهاد شده توسط فیگما:

همانطور که در ابتدا ذکر شد، سازماندهی فایل Figma باید برای شما و تیم شما کار کند. صفحات مورد نیاز خود را بر اساس نیازهای هر پروژه ایجاد کنید..

4. زمانی را به نامگذاری لایه ها اختصاص دهید

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

نرو به خوندن ادامه بده من به شما قول می دهم که این فقط چند ثانیه طول می کشد! در اینجا یک مثال نمودار خوب ایجاد شده توسط فیگما تا به شما ایده بدهم:

به جای داشتن یک ژنریک قاب 25، بردار، تصویر چند لایه، به آنها عشق بدهید. آنها را کمی مشخص تر کنید.

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

5. سازمان چارچوب ایده آل

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

این می تواند اطمینان حاصل کند که ایده های طراحی شما به طور موثر به کد ترجمه می شود. بنابراین از این نکته سازماندهی فایل Figma برای صفحه “آماده برای توسعه” خود استفاده کنید.

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

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

در این مثال، هر فریم مرحله متفاوتی از جریان ورود را نشان می دهد. فریم اول نشان داده خواهد شد وارد شدن صفحه نمایش سپس رمز پر شده و بالاخره ایمیل پر شد.

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

بهترین قالب های Figma برای بهینه سازی کار طراحی شما

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

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

استفاده از تمام این نکات و ترفندهای سازماندهی فایل Figma را با الگوهای Figma از Envato Elements شروع کنید!

منابع و آموزش های بیشتر Figma

آیا می خواهید در مورد Figma بیشتر بدانید؟ در یکی (یا بیشتر) از آموزش ها و منابع Figma موجود در Envato Tuts+ غواصی کنید: