كيفية استخدام التخطيط التلقائي في Figma

يعد Auto Layout أداة أساسية لكل مصمم ومستخدم Figma. تتيح لك هذه الميزة إجراء تغييرات مثل تغيير حجم الإطارات والكائنات أو تغيير موضعها. سيمكنك التخطيط التلقائي من ضبط ارتفاع العنصر ووزنه، على سبيل المثال، من خلال إعداد تلقائي، مما يؤدي إلى قطع عملك إلى النصف.

نظرًا لأن حجم الشاشة يتغير بناءً على الجهاز أو المتصفح الذي سيستخدمه المستخدم للوصول إلى موقع الويب، فإن التخطيط التلقائي يجعل العناصر الموجودة داخل الإطارات تتكيف مع تلك التغييرات. وهذا يجعل التصميم والبنية يبدوان أكثر دقة وتآزرًا. تابع القراءة لمعرفة كيفية استخدام التخطيط التلقائي في Figma وميزاته.

استخدام التخطيط التلقائي

لاستخدام Auto Layout وجميع ميزاته، يجب عليك أولاً إضافته إلى الإطار الذي تعمل عليه، والذي يمكن أن يكون إطارًا جديدًا أو إطارًا يحتوي على محتوى وكائنات ومكونات. بعد تحديد الإطار أو الكائنات، إليك كيفية إضافة التخطيط التلقائي إليه:

• اضغط على "Alt + A" بلوحة المفاتيح (يعمل على نظامي التشغيل Mac وWindows).
• انقر بزر الماوس الأيمن على الكائنات أو المكونات وانقر على Auto Layout (يجب عليك إضافة هذه الميزة إلى كل مكون لأنه من المستحيل تجميعها بشكل مجمّع).
• اضغط على أيقونة علامة الجمع الموجودة بجوار خيار "Auto Layout" في القائمة الموجودة على Figma.

إلى جانب إضافة التخطيط التلقائي إلى الإطار الخاص بك، يمكنك القيام بأشياء مختلفة، بدءًا من تكديس الإطارات وحتى تكرار الكائنات وترتيبها وإزالتها.

إضافة وإزالة الكائنات

تعد إضافة كائنات إلى إطارك أمرًا بسيطًا جدًا. ما عليك سوى الإمساك بالكائن الذي تريد إضافته واتباع المؤشر. وإذا كنت تريد إزالة أحدها، فاسحبه مرة أخرى للخارج واضغط على "حذف". إذا اخترت إضافة كائن أكبر من الإطار الأصلي، فستحتاج إلى تجنب إعدادات Figma الافتراضية لتتمكن من القيام بذلك. يمكنك القيام بذلك عن طريق الضغط على زر "Ctrl" لنظام التشغيل Windows وزر "Command" لنظام التشغيل Mac.

تكرار الكائنات

إذا كنت تريد إضافة كائنين متطابقين أو أكثر إلى الإطار، فيمكنك تكرارهما، وهي ميزة مفيدة للطبقة التلقائية. هذه هي الطريقة التي يمكنك القيام بها:

1. اضغط على الكائن الذي تريد تكراره.
   
2. اضغط باستمرار على الزرين "Ctrl" و"D" في وقت واحد إذا كان لديك نظام Windows.
   
3. بالنسبة لنظام التشغيل Mac، قم بالتكرار بالضغط على زري "Command" و"D".
   

ترتيب الكائنات

إذا لم يعجبك شكل إطارك وتنظيم الأشياء والمكونات بداخله، فيمكنك إعادة ترتيبها. إذا قمت بدمج طبقتين، فيجب عليك تجاوز إعدادات Figma الافتراضية بالضغط على "Ctrl" لنظام التشغيل Windows و"Command" لنظام التشغيل Mac للوصول إلى خيار التحديد العميق ونقل المكون من الطبقة الأولية. ومع ذلك، إذا كان إطارًا واحدًا، فيمكنك تحديد كائن ونقله إلى مكان آخر، كما هو الحال مع إضافة كائنات، أو استخدام مفتاح السهم.

مستويات التخطيط التلقائي

ميزة أخرى للتخطيط التلقائي هي دمج المزيد من الإطارات في إطار واحد لإنشاء واجهة أكثر تعقيدًا حيث يمكنك تراكب مستويات التخطيطات التلقائية المختلفة مثل صفوف الأزرار والأزرار، والمنشور، والمخطط الزمني. يسمح لك كل مستوى بإضافة كائن آخر إلى الإطار الخاص بك. تكون مستويات صف الأزرار والأزرار أفقية، في حين أن المنشور عبارة عن طبقة عمودية حيث يمكنك إدخال الأوصاف والصور وما إلى ذلك.

عند تجميع إطارين معًا، فإنهما يندمجان ويكتسبان خصائص الإطار الأصلي. وهذا يسمح للمستخدم بتنفيذ كائنات قابلة للتعديل. يمكنك التقاط واحدة ووضعها على أخرى لربط إطارين. للقيام بذلك، عليك:

1. اختر إطارًا واحدًا وكل ما تريد إضافته إليه.
   
2. اضغط على "Shift + A" لإضافة إطار تخطيط تلقائي.
   

وظائف التخطيط التلقائي

يحتوي خيار Auto Layout في Figma على العديد من الخصائص أو الوظائف القيمة، بدءًا من الاتجاه وترتيب التراص وحتى التباعد وتغيير الحجم والمحاذاة. وسيتحدث هذا القسم عن كل من هذه الوظائف بمزيد من التفصيل.

اتجاه

كما يوحي الاسم، يشير الاتجاه إلى ترتيب الكائنات في الإطار. عند استخدام التخطيط التلقائي، يمكن وضع الكائنات:

• عموديًا - يتم وضع الكائنات على المحور y. هذا الخيار مناسب للقوائم والقوائم وملفات الأخبار وما إلى ذلك.
• أفقيًا – الكائنات والمكونات الموجودة على المحور السيني (الأزرار، والأيقونات، وما إلى ذلك).
• موضع الالتفاف - يتم تعيين الكائنات في أعمدة وصفوف متعددة.

ترتيب التراص

يمكنك اختيار ترتيب التراص الذي يناسب إطارك بشكل أفضل. يعد هذا تغييرًا مرئيًا فقط نظرًا لأن ترتيب التراص يظل كما هو (إذا كان 1،2،3، فإنه يظل 1،2،3 ولكن مع التعديلات المرئية). عندما يتم تكديس الكائنات فوق بعضها البعض، يمكنك اختيار أي منها سيكون في الأعلى. لذا، على سبيل المثال، إذا كان لديك ثلاثة أشياء تحمل علامة 1 و2 و3، فيمكنك إما 1 أو 3. وإليك الطريقة التي يمكنك بها القيام بذلك:

1. اختر إطار التخطيط التلقائي.
   
2. انتقل إلى خيار Auto Layout الموجود على يمين الشاشة.
   
3. اضغط على النقاط الأفقية الثلاث لفتح الخيارات المتقدمة.
   
4. ابحث عن خيار "تكديس القماش".
   
5. اختر "الأول في الأعلى" أو "الأخير في الأعلى".
   

الموقف المطلق

خاصية "تدفق الطبقة" الأخرى هي الموضع المطلق، بصرف النظر عن ترتيب التراص والاتجاه. تتيح لك هذه الميزة وضع كائن في أي مكان تريده، مع تجاهل حدود الإطار. هذه هي كيفية تمكينه:

1. الاستيلاء على كائن ووضعه داخل الإطار.
   
2. في القائمة الموجودة على الجانب الأيمن، بجوار قيم "X" و"Y"، انقر فوق الأيقونة التي تشبه مربعًا بدون حواف وبداخله علامة زائد.
   
3. حرك الكائن على طول خطوط الإطار.
   

إعداد الفجوة

هناك بعض الميزات التي يمكنك ضبطها عندما يتعلق الأمر بالتباعد، مثل الفجوة. لديك طريقتان لتغيير الفجوة: تلقائي والكتابة في فجوة معينة. إذا كنت تريد أن تكون الفجوة كبيرة قدر الإمكان، فيجب عليك تحديد الإعداد التلقائي في قائمة التخطيط التلقائي. ولكن إذا كنت تريد إدخال القيم الخاصة بك، فاكتبها داخل المربعات المخصصة.

علاوة على ذلك، يمكن ضبط إعداد الفجوة لجميع الاتجاهات. إذا كانت أيقوناتك أفقية وعمودية فقط، فيمكنك تحديد فجوة أفقية بينهما. ومع ذلك، إذا كانت في وضع الالتفاف، فيمكنك ضبط إعدادات الفجوة الرأسية والأفقية.

إعداد المحاذاة

بعد أن تقوم بإعداد ميزات الاتجاه والحشو والفجوة، يمكنك ضبط محاذاة الكائن الفرعي في إطارك نظرًا لأن هذه الميزة تعتمد على إعدادات التباعد. لا يمكنك تغيير محاذاة كل كائن، ولكن اختر نمطًا معروضًا في قائمة التخطيط التلقائي. يمكنك النقر على الشبكة 3×3 في القائمة وتحديد المحاذاة التي تريدها. يمكن القيام بذلك باستخدام مفاتيح الأسهم أو أزرار WSAD الموجودة على لوحة المفاتيح.

علاوة على ذلك، يمكنك اختيار الإعداد التلقائي هنا لتبديل المحاذاة الأفقية والرأسية كصف. باستخدام قيم محددة، يمكن أن يكون لديك جميع الخيارات التسعة (أعلى اليسار، أسفل اليسار، يسار، يمين يسار، أسفل يمين، وما إلى ذلك).

يمكنك أيضًا ضبط محاذاة النص من خلال تمكين هذا الخيار من القائمة والضغط باستمرار على الزر "B".

تغيير الحجم

تحتوي خيارات تغيير الحجم في Auto Layout على العديد من الخصائص الإضافية مثل محتوى الحضن، وخيار ملء الحاوية، وضبط العرض والارتفاع، والأبعاد، وما إلى ذلك. يمكنك تحديد الخيار التلقائي إذا كنت تريد إصلاح قيمك، ولكن هذا يحد من الاحتمالات. لتغيير الحجم، يوصى بتعيين القيم الخاصة بك.

يمكنك تحديد قيمة ثابتة أو ضبطها على الحد الأقصى أو الأدنى للأبعاد الممكنة للعرض والارتفاع. يتيح لك محتوى Hug ضبط حجم الإطار بناءً على الكائن الفرعي، بينما يقوم خيار حاوية التعبئة بتغيير حجم الكائن وفقًا للإطار الأصلي.

إنشاء إطارات فريدة من نوعها مع التخطيط التلقائي

يمكن للتخطيط التلقائي، باعتباره إحدى ميزات Figma الأساسية، ضبط الإطار والأشياء والمقصورات الموجودة بداخله حسب تفضيلاتك. خصائصه ومميزاته متعددة، مما يتيح لك إنشاء منتج مناسب وأنيق. يعد Auto Layout أداة أساسية يجب عليك إتقانها قبل العمل في Figma.

ما هي وظيفة التخطيط التلقائي التي تستخدمها أكثر من غيرها؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.