Figma للمستوى المتوسط: أنظمة التصميم

Name: Figma للمستوى المتوسط: أنظمة التصميم
Author: Justin Billmeier

تعلّم كيفية إنشاء نظام تصميم في Figma وإدارته باستخدام الأنماط والمكوّنات القابلة لإعادة الاستخدام، وتطبيقه عبر مشاريعك لتحقيق الاتساق وتعزيز التعاون والكفاءة.

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ1.

اطلب عرضًا توضيحيًا تسجيل الدخول

دورة تدريبية: عند الطلب

Hello, my name is Justin and in these lessons you will learn about design systems. You'll learn how to create and manage them and utilize them in your designs. In this lesson we'll talk about creating a design system with a library. By the end of the lesson you'll know how to create and publish the library. So what is a design system? Well let's go with the Nielsen Norman groups definition. They have been a leader in design thinking for years. They say a design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. Okay so what that means is that a design system is bigger than what we're actually doing with Figma but Figma plays a crucial role in the creation and management of a design system by serving as a single source of truth. Now the design system is also going to involve engineering and documentation in something like Confluence. When you create components and styles, engineering has to have a reliable way to implement that. So they have to be working with you to make sure that they're building that alongside of you. Alright so let's look at what we have here. I've added some more components, some more icons, another button, some more text fields here, some logos, thumbnails, headers, lists, some navigation options, some cards, and I've added styles here. We have grid styles and I have colors and topography. Now this is from a simple design that I made, it's just a fictional app, it could be anything. When you're creating your design system there's a couple of different ways you can start. You could start by using an existing design system as a reference, something like Google Material, Bootstrap, I have a couple here, here's one from Uber, there's open source ones that you can just implement with engineering or you could just use them to start building your own as a reference. Another method is to just take what you already have and start building it off of that. It might not be much, maybe you already have some web pages but whatever you're doing, starting with that as basic building blocks and then just gradually building it out. That's what I'm doing here and let's go and look at our components. The components are already added and I'm going to add just a few styles here because that's important too. I'll select a color and for fill here I can click on the Libraries and click Add and I'm going to name this color Black. What you can do actually if you want to categorize these, I'm going to put this in a category called Grays because I want all of these grays, I'm just going to lump it in with grays black and white and create a style and let me do another one. Let's do a couple of type styles here. My type hierarchy with some headings, some body type, let me add some text styles. I have some color styles, a couple of text styles and once this is all built out I will go through and make sure that the text styles and color styles are applied to all of the components so it's all linked up together. That way when changes are made they happen seamlessly across multiple things at the same time. Once you get this all set then you want to publish your library. Let me go to my Assets panel here. Actually you can do it here too, you click up here and just say Publish Library and it's going to publish all of my components and my styles to a library and I will be able to use this in other files and not just me. Anybody on my team that I give access to will be able to use this as well. I will publish this and it's publishing the library. Sometimes it takes a minute or two, not too bad, it's successfully published. So our library is published. In our next lesson we'll look at managing a design system. Thanks for watching.

متوسط مقدِّم الخدمة : Justin Billmeier 1 الدروس · 19m باللغات: العربية, الإنجليزية

وصف الدورة

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

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

ما ستتعلمه

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

النقاط الرئيسية

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

الأسئلة الشائعة

ما الذي سأتعلمه في هذه الدورة؟

ستتعلم كيفية إنشاء نظام تصميم وإدارته في Figma، بما في ذلك ماهية أنظمة التصميم، وكيفية إنشاء نظام وتطبيقه عبر المشاريع.

لماذا نستخدم Figma لبناء نظام تصميم؟

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

ما الموضوعات التي تغطيها الدروس؟

تغطي الدروس إنشاء نظام التصميم، وإدارة نظام التصميم، واستخدام نظام التصميم في التصاميم، وأفضل الممارسات لنظام التصميم.

كيف يحافظ نظام التصميم على اتساق عملي؟

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

كيف يتم تخزين التصاميم ومشاركتها؟

يتم تخزين التصاميم في مكتبة الفريق حيث تخضع للتحكم في الإصدارات ويسهل الرجوع إليها.