همه آنچه باید در مورد فریم ها در Figma بدانید

همه آنچه باید در مورد فریم ها در Figma بدانید

قاب های Figma یکی از دارایی های اصلی برای طراحی هستند. آنها به عنوان ظروف برای تمام عناصر طراحی شما عمل می کنند.

با این چک لیست 7 نقطه ای برای فریم ها در Figma بهترین استفاده را از آنها ببرید!

قاب های Figma اساسا ظروف طراحی شما هستند.قاب های Figma اساساً ظرف هایی برای طراحی شما هستند.قاب های Figma اساساً ظرف هایی برای طراحی شما هستند.

فریم در فیگما چیست؟

فیگما قاب ها در اصل ظروف طراحی شما هستند.

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

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

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

چک لیست 7 نقطه ای شما برای فریم ها در Figma

آیا با Figma شروع کرده اید یا می خواهید به اصول اولیه بازگردید؟ از این چک لیست ساده یادداشت برداری کنید تا از بهترین قاب های Figma برای طراحی های خود استفاده کنید:

فریم های Figma ایجاد کنید

همانطور که قبلا ذکر شد، قبل از طراحی، فرمت ما را انتخاب می کنیم.

برای افزودن فریم به بوم خود می توانید روی کلیدهای “A” یا “F” کلیک کنید یا مستقیماً به ابزار فریم در نوار ابزار بروید:

فریم های Figma ایجاد کنیدفریم های Figma ایجاد کنیدفریم های Figma ایجاد کنید

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

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

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

توابع اضافی

علاوه بر تخصیص فرمت به طرح شما، فریم‌ها در Figma می‌توانند عملکردهای دیگری را ادغام کنند. برخی از این قابلیت های اضافی عبارتند از:

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

تعاملات قاب

تغییر اندازه و مقیاس فریم ها واقعا آسان است. در اینجا چهار راه برای انجام این کار وجود دارد:

  • به صورت دستی قاب را بکشید با کلیک بر روی هر گوشه و کشیدن آن برای تغییر اندازه.
  • فقط تغییر دهید قاب از پیش تعیین شده. روی قاب کلیک کنید و به نوار کناری سمت راست بروید. با یک کلیک از گوشی به تبلت یا دسکتاپ تغییر دهید.
  • ویژگی ها را در نوار کناری سمت راست تنظیم کنید. اعداد جدید برای ارتفاع (H) و عرض (W) را وارد کنید. برای محدود کردن تغییر اندازه می توانید روی دکمه پیوند کلیک کنید.
ویژگی های قاب Figma را تنظیم کنیدویژگی های قاب Figma را تنظیم کنیدویژگی های قاب Figma را تنظیم کنید

Nest Frames

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

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

در اینجا چگونه می تواند به نظر برسد:

قاب های Nest Figmaقاب های Nest Figmaقاب های Nest Figma

شما می توانید اندازه قاب خود را طوری تغییر دهید که با اشیاء فرزند آن مطابقت داشته باشد. به گوشه سمت راست بالای پنل Properties بروید. بر روی دکمه تغییر اندازه به تناسب کلیک کنید.

اندازه را متناسب با قاب Figma تغییر دهیداندازه را متناسب با قاب Figma تغییر دهیدتغییر اندازه به تناسب قاب Figma

قاب های سطح بالا

برخی افراد می گویند که در Figma هیچ فریم سطح بالایی وجود ندارد، اما این درست نیست.

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

فریم های سطح بالا در Figmaفریم های سطح بالا در Figmaفریم های سطح بالا در Figma

Figma Group vs Frame

این یکی از بحث های بزرگ بین کاربران فیگما است. چه زمانی از گروه Figma در مقابل قاب استفاده کنیم؟ آنها هر دو محفظه ای برای اشیاء طراحی شما هستند، اما هر کدام دارای ویژگی های منحصر به فردی هستند.

گروه ها به شما اجازه می دهد چندین شی را با هم ترکیب کنید. با انتخاب اشیا و فشار دادن: ⌘ + G (Mac) یا Ctrl + G (Win)، می توانید یک گروه. این یک صرفه جویی در زمان است که شما نیاز به تغییر اندازه چندین عنصر در یک زمان دارید.

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

حالا بیایید در مورد صحبت کنیم قاب ها در این زمینه. ما دیده‌ایم که قاب‌ها اساس طراحی ما هستند و بر خلاف گروه‌ها، امکانات تودرتو در داخل فریم‌ها را ارائه می‌دهند.

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

در صورت تمایل می توانید هر دو را انتخاب کنید. آنها را می توان با هم استفاده کرد تا تجربه طراحی بهتری به شما بدهد.

Figma Frames vs Sections

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

بیایید برخی از این تغییرات را مرور کنیم:

  • محدودیت ها: با قاب ها شما می توانید محدودیت هایی را به هر یک از عناصر خود اضافه کنید. به این ترتیب، هنگامی که اندازه قاب خود را تغییر می دهید، همه عناصر با محدودیت هایی که تعیین کرده اید هماهنگ می شوند.
  • لانه سازی: فریم ها را می توان در قاب های بزرگتر تو در تو قرار داد.
  • تغییر اندازه: با بخش ها می توانید روی گوشه ها دوبار کلیک کنید و اندازه بخش خود را به فرمت اصلی تغییر دهید. با قاب ها شما نمی توانید به این
  • آماده برای توسعه دهنده: یک ویژگی مفید در بخش ها این است که می توانید بخشی را به عنوان “آماده برای توسعه دهندگان” در سمت چپ بالا، در کنار نام بخش علامت گذاری کنید. این برای حالت توسعه دهنده برای تیم توسعه دهنده شما برای یافتن بخش ها به راحتی مفید است.

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

شروع به آزمایش با Figma Frames کنید!

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

با این آموزش های مفید به ارتقاء مجموعه مهارت های Figma خود ادامه دهید:

منبع: https://webdesign.tutsplus.com/frames-in-figma–cms-108737t