إذا كنت مطورًا لنظام iOS أو Android وتم تطوير تصميم مشروعك في Figma ، فمن المرجح أنك تواجه مشاكل عند تصدير الموارد: لا يمكن تفريغ الألوان ، والرموز والصور غير ملائمة للتصدير. في هذه المقالة ، سأخبرك كيف يمكنك جعل حياتك أسهل وأتمتة تصدير UI-Kit من Figma مباشرة إلى Xcode و Android Studio.
المزيد والمزيد من فرق التطوير المتنقلة تتحول إلى Figma. من قبل ، استخدم الكثير (ونحن أيضًا) حزمة من Sketch + Zeplin أو Figma + Zeplin. وكانت مريحة. لكن عندما أضفنا دعمًا للموضوع المظلم في أحد المشاريع ، ساء الوضع. لا يدعم Zeplin المظهر المظلم ، لذلك عليك البحث عن الحلول التي تجعلك تفكر: هل Zeplin مطلوب الآن؟ في هذه الحالة ، يعتبر Zeplin مضيعة لوقت المصمم في صيانة ومزامنة المشاريع في أداتين ، بالإضافة إلى تكاليف إضافية للشركة.
بعد التخلي عن Zeplin والانتقال إلى Figma ، بدأنا (المطورون) نشعر بالألم عند تصدير UI-Kit من Figma.
فيجما ، على عكس Zeplin ، لا يتفاعل مع Xcode أو Android Studio بأي شكل من الأشكال. تمنع المكونات الإضافية Figma من الاندماج بإحكام معها. لقد وجدنا أداة مساعدة لسطر الأوامر تقوم بتصدير الألوان وأنماط النص ، لكنها لم تنجح معنا - فهي لا تدعم تصدير الصور والنسق الداكن. هذا هو السبب في أنني كتبت فائدتي.
ولكن مع مزيد من التفاصيل حول المشاكل.
لماذا من غير الملائم لمطوري الأجهزة المحمولة تصدير الأصول من Figma
المشكلة رقم 1: عدم القدرة على تصدير الألوان
ماذا نرى نحن المطورون عندما نفتح UI-Kit في Figma؟ في أبسط الحالات ، عدة دوائر من ألوان مختلفة.
ولكن إذا كان المشروع كبيرًا ويدعم نسقًا داكنًا ، فستحتوي اللوحة على العديد من الألوان الأخرى:
تخطط لإضافة دعم موضوع داكن؟ تعرف على الحجم الذي يمكن أن تحصل عليه اللوحة
لا تملك Figma القدرة على تصدير الألوان. أكثر ما يمكنك فعله هو تحديد اللون ونسخ قيمة HEX. وإذا غيّر المصمم شيئًا ما ، ففي حالة وجود لوحة كبيرة ، سيضطر المطور إلى قضاء الكثير من الوقت لمقارنة اللوحة في الكود وفي Figma.
اسم اللون أيضًا لا يعمل دائمًا بشكل جيد للنسخ. يستخدم بعض المصممين حرف "/" في اسم النمط ، ولكنه غير مدعوم في iOS و Android. هذا الرمز ضروري لتجميع الألوان في مجموعات.
مثال. اللون في Figma يسمى الخلفية / الأساسي . لمطوري Android ، تحتاج إلى تحديد لون يسمى background_primary ، ولمطوري iOS ، backgroundPrimary .
مشكلة أخرى مع الألوان هي المظهر الداكن. لا تسمح لك أداة المصمم (Figma ، Zeplin ، Sketch) بالحصول على لوحة داكنة وخفيفة في نفس الوقت. هناك طريقتان هنا: إنشاء ملف منفصل بلوحة داكنة ، أو تخزين كل الألوان في ملف واحد ، ولكن قم بتسميتها باستخدام postfix ، على سبيل المثال ، background_primary_day، background_primary_night.
ما نريده كمطورين هو أن نكون قادرين على تصدير لوحة الألوان من Figma مباشرة إلى مشاريع Xcode أو Android Studio.
المشكلة رقم 2: تصدير غير مريح للرموز باستخدام أدوات قياسية
هناك أيضًا العديد من الصعوبات هنا.
مرة أخرى ، يحدث أن المصممين يستخدمون الحرف "/" في اسم الرموز لتجميع الرموز. على سبيل المثال ، إذا تم تصدير الرمز الذي يحمل الاسم ic / 24 / tab / profile باستخدام أدوات Figma القياسية ، فسنحصل على هذا التداخل.
من المستحيل العمل مع هذا. لا بد لي من إعادة تسمية الملف. يجب تسمية الملف باسم ic24TabProfile.pdf . هذا لمطوري iOS.
بالنسبة لمطوري Android ، من المعتاد تسمية الموارد بأسلوب snake_case . في هذه الحالة ، سيتم تسمية الملف باسم ic_24_tab_profile.xml. لكن فيجما لا تفعل ذلك.
سيتعين نقل الرموز المصدرة من Figma يدويًا إلى المشروع. ولا يكفي لمطوري iOS ترحيلهم فقط. من الضروري وضع كل رمز: الاحتفاظ ببيانات المتجه ، مقياس فردي ، تقديم كصورة نموذجية.
ما نريده كمطورين هو أن نكون قادرين على تصدير جميع أيقونات Figma مباشرة إلى مشاريع Xcode أو Android Studio.
المشكلة رقم 3: تصدير غير مريح للرسوم التوضيحية باستخدام الأدوات القياسية
الأيقونات عبارة عن صور متجهة صغيرة ، غالبًا ما تكون بالأبيض والأسود ، ويمكن إعادة تلوينها (بواسطة النظام أو بواسطة المطور) وتغيير حجمها. إذا قمت بتمكين إمكانية الوصول ، فإن بعض الرموز تنمو مع النص. مشكلتهم الرئيسية هي الأسماء: الحرف "/" ، الذي ذكرته أعلاه ، وحقيقة أن مطوري iOS يستخدمون أسماء camelCase ، ومطورو Android يستخدمون snake_case.
الرسوم التوضيحية هي صور ملونة كبيرة تختلف في السمات الداكنة والفاتحة. في النسق الداكن ، يجب كتم صوت الألوان. إذا كان الرسم التوضيحي فاتحًا جدًا ، ثم يقف في مواجهة الظلام ، فسوف "يضرب" الضوء الساطع في العينين.
الرسوم التوضيحية لها نفس مشاكل الرموز ، ولكن هناك أيضًا زوجان من المشاكل الجديدة.
يقوم مطورو Android بتصدير أيقونات Figma والرسوم التوضيحية كملفات SVG ، ثم باستخدام الأدوات المضمنة في Android Studio ، قم بتحويل ملفات SVG إلى ملفات XML قابلة للرسم. إذا كنت بحاجة إلى تصدير 50 رمزًا أو رسمًا توضيحيًا ، فسيستغرق تحويلها جميعًا وقتًا طويلاً. يمكن أتمتة هذا.
يقوم مطورو iOS بتصدير الرسوم التوضيحية كصور نقطية بثلاثة مستويات. إذا كان التطبيق يدعم سمة داكنة ، فسيكون هناك 6 صور في المجموع. هذا ما يبدو عليه في مشروع iOS:
الآن ، دعنا نتخيل أننا قمنا بتفريغ 50 رسمًا توضيحيًا من Figma. اتضح أن لدينا 50 * 6 = 300 صورة PNG ، والتي يجب نقلها يدويًا إلى المشروع عن طريق السحب والإفلات ، وبعد ذلك ، مرة أخرى ، يجب إعادة تسميتها يدويًا. هل ترغب في فعل ذلك؟ - لا. هناك أشياء أكثر أهمية للقيام بها ...
ما نريده كمطورين هو أن نكون قادرين على تصدير جميع الرسوم التوضيحية لـ Figma مباشرة إلى مشاريع Xcode أو Android Studio.
لماذا لم يساعد Zeplin:
- لا يدعم المظهر الداكن ؛
- لا يسمح بوجود عدة ألوان بنفس قيمة HEX ، ولكن بأسماء مختلفة: إذا قمت بتسمية الألوان وفقًا لمكان تطبيقها ، فقد يحدث أن يكون للونين اسمين مختلفين ، ولكن نفس قيم HEX. على سبيل المثال ، يجب أن يكون لـ backgroundPrimaryPressed (لون الخلفية الرئيسي عند الضغط عليه) و backgroundSecondary (لون الخلفية) نفس قيمة HEX. لن يسمح لك Zeplin بفعل ذلك. يوجد حل بديل - قم بتغيير قيمة HEX إلى أدنى قيمة ممكنة. مثال # F4F5F8 و # F4F5F7 ؛
- يتطلب موارد إضافية للمصمم لمزامنة التخطيطات ومجموعة واجهة المستخدم مع Figma ؛
- يكلف أموالاً إضافية. تبلغ تكلفة Figma 12 دولارًا لكل مصمم شهريًا للمؤسسة. إذا اشتريت Zeplin ، فهذا يعني 10.75 دولارًا إضافيًا لكل مصمم شهريًا ؛
كيف قمنا بأتمتة تصدير الأصول من Figma
أدركت أنه لم يعد من الممكن العيش على هذا النحو ، بحثت لمعرفة ما إذا كان لدى Figma أي واجهة برمجة تطبيقات أو القدرة على التوسع مع المكونات الإضافية لأتمتة التصدير ، واتضح أنها كذلك. كان لدي مساران: كتابة مكون إضافي لـ Figma أو استخدام واجهة برمجة تطبيقات Figma .
يعمل المكون الإضافي Figma مباشرة في تطبيق Figma. باستخدام واجهة برمجة تطبيقات Figma ، يمكنك كتابة أداة مساعدة لوحدة التحكم. لا يستطيع البرنامج المساعد قراءة المعلومات من ملفات Figma فحسب ، بل يمكنه أيضًا إجراء تغييرات عليها. لهذا السبب ، تتطلب ملحقات Figma من المطور الحصول على إذن لتحرير الملف. يمكن لـ Figma API قراءة المعلومات فقط من ملفات Figma.
البرنامج المساعد مكتوب بلغة JavaScript. باستخدام واجهة برمجة تطبيقات Figma ، يمكنك كتابة غلاف حول أي شيء. لكن المكون الإضافي Figma لا يمكنه العمل مع نظام الملفات على كمبيوتر المطور (المستخدم). لهذا لم أفعل ذلك.
أنا مطور iOS ، لذلك قررت إنشاء أداة مساعدة لوحدة التحكم في Swift. لقد بدأت بنموذج أولي يجب أن يصدر لوحة ألوان من Figma مباشرة إلى مشروع Xcode. في غضون أسبوعين كان جاهزًا. كان شيئا. قمت بتشغيل الأداة المساعدة الخاصة بي وبعد بضع ثوان حصلت على اللوحة الكاملة في Xcode. هذه هي الطريقة التي يجب أن تعمل بها عملية تصدير Figma المثالية :)
بعد شهرين ، كانت فائدتي لتصدير الأصول من Figma جاهزة. يمكنك العثور على رابط لها في نهاية المقالة.
كيف تعمل عملية التصدير
الألوان
المطور يستدعي الأمر
figma-export colors. إذا كان مشروع iOS ، فسيتم تصدير الألوان إلى مجلد Assets.xcassets .
بالإضافة إلى ذلك ، يتم إنشاء ملف Color.swift بحيث يمكنك استخدام الألوان مباشرة من الكود.
import UIKit
extension UIColor {
static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
static var backgroundVideo: UIColor { return UIColor(named: #function)! }
...
}
إذا كان مشروع الروبوت، ويتم تصدير الألوان إلى القيم / colors.xml و القيم يلة / colors.xml إذا يتم اعتماد موضوع الظلام.
القيم / الألوان. xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#7701FF</color>
<color name="button_ripple">#8A80FF</color>
<color name="button_disabled">#D9DCE1</color>
<color name="text_primary">#FFFFFC</color>
<color name="text_primary_pressed">#A680FE</color>
<color name="text_primary_disabled">#FFFFFE</color>
<color name="text_secondary">#101828</color>
<color name="text_tertiary">#A5ACBD</color>
...
قيم الليل / الألوان. xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="button">#6F01EC</color>
<color name="button_ripple">#7D6AF0</color>
<color name="button_disabled">#3F334B</color>
<color name="text_primary">#E6D9F6</color>
<color name="text_primary_pressed">#E6D9F3</color>
<color name="text_primary_disabled">#544761</color>
<color name="text_secondary">#E6D9F5</color>
<color name="text_tertiary">#7B6F98</color>
...
الأيقونات
يستدعي المطور الأمر إذا كان هذا مشروع iOS ، فسيتم تصدير الرموز كملفات PDF مع معلمة Render as Template Image إلى مجلد Assets.xcassets . إذا تم استخدام الرموز في UITabBar ، فيمكنك تحديد خيار الاحتفاظ ببيانات المتجه لدعم إمكانية الوصول. إذا كان مشروع Android ، فسيتم تصدير الرموز إلى المجلد القابل للرسم كملفات xml متجهة. تحت الغطاء ، تقوم الأداة بتحويل ملفات SVG إلى XML باستخدام أداة vd الرسمية (أداة الرسم المتجه) التي يستخدمها Android Studio.
figma-export icons.
الرسوم التوضيحية
يقوم المطور باستدعاء الأمر ، كل شيء هو نفسه ، فقط الصور يتم تصديرها كملفات PNG. إذا كان مشروع Android ، فسيتم تصدير الرسوم التوضيحية إلى المجلد الليلي القابل للرسم والقابل للرسم كملفات xml متجهة.
figma-export images.
كيف يمكن تكوين التصدير
يحتوي FigmaExport على الكثير من الإعدادات المخزنة في ملف التكوين وتمريرها عند بدء تشغيل الأداة المساعدة.
./figma-export colors -i figma-export.yaml
يحتوي ملف التكوين على معلمات لنظام iOS ونظام Android والمعلمات العامة. يحتوي أيضًا على معرف ملف Figma ، حيث توجد الألوان والأيقونات والصور. يمكن العثور على معرف الملف في شريط العناوين إذا قمت بفتحه في متصفح.
على سبيل المثال ، هذا هو عنوان UI-Kit الخاص بنا: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit
معرف ملف lightFileId في حالتنا: GVHjNNE8PKKRf1KtnMPY9m
مثال على ملف التكوين
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
# Path to the Assets.xcassets directory
xcassetsPath: "./Resources/Assets.xcassets"
# Parameters for exporting colors
colors:
# Should be generate color assets instead of pure swift code
useColorAssets: True
# Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
assetsFolder: Colors
# Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
colorSwift: "./Sources/Presentation/Common/Color.swift"
# Color name style: camelCase or snake_case
nameStyle: camelCase
# Parameters for exporting icons
icons:
# Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
assetsFolder: Icons
# Icon name style: camelCase or snake_case
nameStyle: camelCase
# [optional] Enable Preserve Vector Data for specified icons
preservesVectorRepresentation:
- ic24TabMain
- ic24TabHistory
- ic24TabProfile
# Parameters for exporting images
images:
# Name of the folder inside Assets.xcassets where to place images (.imageset directories)
assetsFolder: Illustrations
# Image name style: camelCase or snake_case
nameStyle: camelCase
مثال على ملف التكوين لمشروع Android:
---
figma:
lightFileId: shPilWnVdJfo10YFo12345
darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
mainRes: "./main/res"كيفية تنظيم ملف Figma للتصدير الآلي للموارد
لكي يتم تفريغ UI-Kit تلقائيًا ، يجب مراعاة القواعد التالية.
جنرال لواء
- إذا كان اللون أو الرمز أو الرسم التوضيحي فريدًا في خصائصه لنظام iOS أو Android ، فيجب أن يحتوي حقل الوصف على "ios" أو "android" . في حالة عدم توفر لون أو رمز أو رسم توضيحي للتصدير ، فإن خاصية الوصف الخاصة بهم ستكون "بلا" . وبالتالي ، ستحدد FigmaExport ما يجب تصديره إلى مشروع iOS ، وما هو مشروع Android ، وما الذي لا يجب تصديره على الإطلاق.
مثال. يبدو رمز المشاركة مختلفًا في نظامي iOS و Android. تشير لقطات الشاشة أدناه إلى أنه سيتم تصدير رمز ic24ShareIos إلى مشروع iOS فقط. تم تحديد ios في خاصية وصف المكون ، وسيتم تصدير أيقونة ic24ShareAndroid إلى مشروع Android فقط ؛
- يجب أن تكون الرموز والرسوم التوضيحية مكونات.
- يجب نشر أنماط ومكونات الألوان في مكتبة الفريق.
- يتم فقط تصدير الرموز والرسوم التوضيحية المضافة إلى إطارات الأيقونات والرسوم التوضيحية.
أمثلة
ملف Figma مع UI-Kit (
سمة خفيفة) ملف Figma مع UI-Kit (سمة داكنة)
أسماء الموارد يمكن تسمية
الألوان والأيقونات والرسوم التوضيحية بأي أسماء تحتوي على الأحرف az و AZ والرموز "_" و "/".
نظرًا لأن أسماء المتغيرات في الكود لا يمكن أن تحتوي على رمز "/" ، فإن FigmaExport يستبدلها تلقائيًا برمز "_". ثم يتم تحويل السلسلة الناتجة إلى camelCase لنظام iOS أو snake_case لنظام Android.
| اسم اللون | iOS | ذكري المظهر |
|---|---|---|
| زر / الضغط | زر الضغط | button_pressed |
| الخلفية / الابتدائية | الخلفية الابتدائية | background_primary_pressed |
| اسم الرمز | iOS | ذكري المظهر |
|---|---|---|
| ic / 24 / sound_off
|
ic24 الصوت
|
ic_24_sound_off |
| عنوان التوضيح | iOS | ذكري المظهر |
|---|---|---|
| img / demo / camera_archive
|
imgDemoCameraArchive
|
img_demo_camera_archive
|
من أجل التناسق والراحة ، يمكنك ، على سبيل المثال ، تسمية جميع الرموز بالتنسيق الخاص بك - ic / size / name . مثال على ذلك هو ic / 24 / open . والرسوم التوضيحية هي img / group / title . مثال على ذلك هو img / zero / nointernet. يمكنك القراءة عن الألوان في مقالة "مصمم التطبيق: كيفية إنشاء سمة داكنة ونقلها" .
في ملف التكوين figma-export.yaml ، يمكنك استخدام التعبيرات العادية لتمكين التحقق من صحة الاسم قبل التصدير. إذا كان لأي مورد اسم خاطئ ، فسيقوم FigmaExport بالإبلاغ عنه.
common:
colors:
# RegExp pattern for color name validation before exporting
nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background
icons:
# RegExp pattern for icon name validation before exporting
nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
images:
# RegExp pattern for image name validation before exporting
nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
مظهر داكن
إذا كان مشروعك يدعم سمة داكنة ، فأنت بحاجة إلى إنشاء ملف منفصل بمكونات واجهة المستخدم ، والذي سيحتوي على لوحة ألوان داكنة ورسوم توضيحية داكنة.
الألوان
في ملف Figma ، يجب تصميم الألوان على هيئة أنماط ألوان ونشرها في مكتبة الفريق.
لراحة المطورين ، يُنصح بعمل جدول بجميع الألوان ، والذي سيشير إلى اللون ومكان استخدامه.
الرموز
يجب أن يحتوي ملف Figma على إطار يسمى Icons. يجب أن يحتوي هذا الإطار على مكونات لكل رمز. مثال:
الرسوم التوضيحية
يجب أن يحتوي ملف Figma على إطار يسمى الرسوم التوضيحية ، والذي يحتوي على مكونات كل رسم توضيحي. مثال:
النتيجة
بفضل FigmaExport ، تخلصنا من الكثير من المشاكل عند العمل مع Figma. يستغرق تصدير الموارد الآن ثوانٍ. بعض الأمثلة على كيفية استخدام الأداة المساعدة في جعل حياتنا أسهل.
1. احتوى أحد المشاريع على 52 أيقونة. قرر المصمم أنه يجب إحضارهم جميعًا إلى نفس الأسلوب. بعد أن قام بتحديثها ، كان علينا تحديثها في المنزل.
كيف سنقوم بتحديثها يدويًا: تصدير جميع الرموز من Figma كملف مضغوط ، وإعادة تسمية 52 ملفًا ، ونقل الرموز إلى المشروع ، وتعيين جميع الخصائص الضرورية ، والتأكد من أنها لم تنس أي شيء. سيستغرق هذا ساعة على الأقل.
كيف قمنا بتحديثها من FigmaExport: قمنا بتشغيل الأمر figma-export icons.بعد 10 ثوانٍ ، تم تشديد جميع التغييرات ، أطلقنا التطبيق على جهاز المحاكاة ورأينا أنه تم استبدال جميع الرموز.
2. في إحدى سباقات السرعة ، قررنا إطلاق ميزة جديدة. في UI-Kit ، أضاف المصمم أربعة رموز جديدة ، وأزال رمزين قديمين ، وأضاف لونين جديدين.
بدلا من إنفاق ساعة واحدة من الوقت في مناقشة مع المصمم ما تغير في UI-كيت وتصدير الرموز والألوان يدويا، ركضنا مجرد ألوان FIGMA التصدير و الرموز FIGMA التصدير الأمر ومن خلال بوابة رأينا ما أزيل، ما أضيفت، و ما الذي تغير. وبدأوا على الفور في تكوين تخطيطات باستخدام أيقونات وألوان جديدة.
3. قمنا بعمل ميزة كان من الضروري فيها إجراء إعداد متقدم مع 4 أقسام ، كل منها يحتوي على ما يصل إلى 7 صفحات مع الصور.
قد يستغرق التصدير اليدوي وقتًا طويلاً. بواسطة تنفيذ FIGMA التصدير صور الأمر ، في أقل من دقيقة، وحصلنا على كل هذه الصور في المشروع، جاهزة للاستخدام.
سلبيات قليلة
- من الضروري الاتفاق مع المصمم حول كيفية تخزين الألوان والرموز والصور في UI-Kit بحيث يمكن تفريغها تلقائيًا.
- يعمل التصدير فقط لتلك المكونات التي تمت إضافتها إلى مكتبة الفريق ، لذلك يجب أن يكون لدى المصممين اشتراك فيجما مدفوع.
الخطط:
- إضافة القدرة على تصدير أنماط النص ،
- إضافة القدرة على تصدير الصور النقطية لنظام Android ،
- إضافة دعم SwiftUI.
شكر خاص لـ Artur Abrarov و Katya Rokityan للمساعدة في إنهاء UI-Kit.
رابط المنفعة
قم بتنزيل FigmaExport على GitHub .
سأكون سعيدا إذا جربت فائدتي. أسئلة ، رغبات ، ملاحظات - اكتب لي على d.subbotin@redmadrobot.com