ساده کردن گردش کار طراحی به کد: چگونه یک پلاگین Figma برای تبدیل طرح ها به اجزای سیستم طراحی ReactJS ایجاد کردم

معرفی

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

با استفاده از API پلاگین Figma، سفری را برای ایجاد افزونه ای آغاز کردم که تنها با یک کلیک، طرح ها را به اجزای سیستم طراحی ReactJS ما ترجمه می کند. در این پست وبلاگ، تجربیاتم و درس های ارزشمندی را که در این راه آموختم به اشتراک خواهم گذاشت.

چگونه همه چیز شروع شد…

هر بار که یک فایل جدید در Figma ایجاد می‌کنم، به‌عنوان یک بوم خالی شروع می‌شود و هیچ ساختار صفحه‌ای برای سازماندهی کار من ندارد، بنابراین می‌خواستم آن زمان ارزشمند تنظیم یک سند را صرفه‌جویی کنم تا شروع به انجام کار اصلی کنم. من معمولاً از ساختار صفحه یکسانی برای هر فایل استفاده می کنم:
📘 جلد (تنظیم به عنوان تصویر کوچک)
ℹ️ اطلاعات پروژه

🔀 UX Flows

🌈 زمین بازی
🧩 اجزاء
👀 معیار
🧪 کشف
– – – – – – – – – – – – –
🢏 فینال
– – – – – – – – – – – – –
📣 در حال انجام است
– – – – – – – – – – – – –
نمونه اولیه V1
نمونه اولیه V2
نمونه اولیه V3
– – – – – – – – – – – – –
🔴 در نظر گرفته نشده است

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

من نام این افزونه را PageGenius و در زمان نوشتن این پست وبلاگ گذاشتم توسط بیش از 40 کاربر دیگر Figma استفاده شده است (به تعداد اولین فایل انجمن من نیست 5k+ کاربر، اما به آرامی افزایش می یابد). این پلاگین صفحاتی را با ساختاری که در بالا نشان دادم ایجاد می کند و یک تصویر کوچک جلد برای فایل با 1 کلیک تنظیم می کند.

نسخه نمایشی پلاگین PageGenius

” loading=”lazy” width=”600″ height=”351″ data-animated=”true”/>

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

به چالش کشیدن وضعیت موجود

بیایید صادق باشیم، طراحان و توسعه دهندگان فرانت اند اغلب با چالش هایی در همکاری طراحی به کد روبرو هستند. ساعت‌های بی‌شماری برای انجام یک طراحی صرف می‌شود و متعاقباً، ساعت‌های بی‌شماری برای نوشتن نشانه‌گذاری دستی آن طرح‌ها در کد، حتی قبل از شروع با کد واقعی، منطق پشت آن، تعامل‌ها، وضعیت‌ها، ردیابی رویدادها، تماس‌های API و غیره صرف می‌شود. منجر به تأخیر، ناهماهنگی طراحی و هدر رفتن منابع می شود. این فرآیند خسته کننده بر بهره وری تأثیر منفی می گذارد و تیم ها را از تمرکز بر وظایف اصلی خود باز می دارد و می تواند هم برای طراحان و هم برای توسعه دهندگان طاقت فرسا باشد. با شناخت این مسائل، من تصمیم گرفتم راه حلی بیابم که بتواند هر دو جهان را به هم متصل کند:

طراحی های Figma برای طراحی نشانه گذاری اجزای سیستم

فرصت را غنیمت شمرد

فرصتی برای بهبود طراحی ما برای کدگذاری گردش کار کاملاً واضح بود. با توسعه یک پلاگین Figma که طرح‌ها را به اجزای سیستم طراحی ReactJS 1:1 ترجمه می‌کند، می‌توانیم تلاش دستی را کاهش دهیم، دقت را بهبود بخشیم و تحویل طرح‌های آماده کد را تسریع کنیم. این به توسعه دهندگان اجازه می دهد تا روی منطق کدگذاری اصلی تمرکز کنند تا ویژگی ها را زنده کنند و روند توسعه محصول را تقویت کنند.

غواصی عمیق تر در API پلاگین Figma

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

<Card {props}>[...]</Card>
<Box {props}>[...]</Box>
<H2>[...]</H2>
<Button {...props}>[...]<Button/>
<Divider/>
<Inline {props}>[...]</Inline>
<Icon {...props} />
<Text {...props}>[...]</Text>
<Stack {...props}>[...]</Stack>

من بارها و بارها تکرار کردم تا بیشتر ویژگی ها مطابقت داشته باشند و به دنبال نتیجه ای باشم که برای MVP می خواستم.

نسخه نمایشی پلاگین سیستم طراحی Figma to AMBOSS

” loading=”lazy” width=”600″ height=”349″ data-animated=”true”/>

تست و بازخورد

برای اطمینان از اینکه این افزونه نیازهای تیم طراحی و توسعه دهندگان فرانت اند ما را برآورده می کند، یک موضوع در چت داخلی خود راه اندازی کردم تا الهام بخش و جمع آوری بازخورد و افکار باشم. این نقطه شروعی است که من این پست را می نویسم و ​​مشتاقانه منتظر همکاری بیشتر با تیم Design System برای ادامه کاوش در مرزهای جدید هستم.

هشدارها و ملاحظات

ثابت شد که MVP مفید است، اما مواردی وجود دارد که باید در نظر گرفته شوند، و استفاده آینده از این ابزار نامشخص است زیرا به تغییرات مهمی نیاز دارد:

• اختیاری: ویژگی های مؤلفه سیستم Figma Design ما می تواند 1:1 با ویژگی های مؤلفه سیستم طراحی کدگذاری شده ما مطابقت داشته باشد. توصیه می‌شود: می‌توانیم نقشه‌برداری لازم را برای انجام این کار پیاده‌سازی کنیم، اگرچه این رویکرد بهینه نبوده و نیاز به تعمیر و نگهداری دارد. داشتن اجزای سیستم طراحی کدگذاری شده و کتابخانه سیستم طراحی Figma ما که با ویژگی هایی که 1:1 نامگذاری شده است مطابقت داشته باشد، زمان تعمیر و نگهداری را حذف می کند زیرا هر ویژگی جدید می تواند به راحتی بدون تلاش برای توسعه از کد به Figma ترجمه شود.

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

• برای هرکس نیست: برای اینکه این افزونه کار کند و گردش کار طراحان را بهبود بخشد، طراحان باید با استفاده از ویژگی Auto-Layout Figma به روشی خاص طراحی کنند، طراحان باید لایه های خود را در قرارداد نامگذاری خاص نامگذاری کنند تا با اجزای سیستم طراحی کدگذاری شده ما مطابقت داشته باشد و درک کنند. ساختار کدنویسی که باید دنبال شود تا کار کند. به این معنی که داشتن پیشینه کدنویسی در اینجا کمک زیادی می کند.

بعدش چی؟

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

این را می توان به هر سیستم طراحی تعمیم داد، تکرار دوم من برای کتابخانه React-Bootstrap را بررسی کنید:

استفاده از هوش مصنوعی

در طول توسعه پلاگین Figma، من از ChatGPT استفاده کردم تا راه حل هایی برای مشکلات چالش برانگیز هنگام ساخت MVP ایجاد کنم.
همچنین، همانطور که من شروع به نوشتن این پست وبلاگ کردم، هوش مصنوعی به یک شریک نویسندگی مفید تبدیل شد. این به من کمک کرد تا بر “سندرم بوم خالی” غلبه کنم (به همان اندازه که اولین پلاگین من PageGenius به آن کمک می کند).
با این حال، توجه به این نکته مهم است که اگرچه ChatGPT کمک های ارزشمندی به من ارائه کرد، مسئولیت نهایی محتوا و ایده های افزونه و این پست وبلاگ بر عهده من به عنوان یک طراح ارشد محصول است.