ساخت سیستم های طراحی با اجزای Penpot — مجله Smashing

اگر سری Penpot ما را دنبال کرده اید، از قبل با این ابزار طراحی متن باز هیجان انگیز و نحوه تغییر بازی برای همکاری طراح و توسعه دهنده آشنا هستید. پیش از این، ویژگی های Penpot\'s Flex Layout و Grid Layout را بررسی کرده ایم که قدرت CSS را مستقیماً به دست طراحان می آورد.

امروز، ما به یکی دیگر از جنبه های حیاتی طراحی و توسعه وب مدرن می پردازیم: اجزاء. این ویژگی بخشی از نسخه اصلی Penpot 2.0 است که مجموعه ای از قابلیت های جدید را برای پر کردن شکاف بین طراحی و کد بیشتر معرفی می کند. بیایید بررسی کنیم که چگونه پیاده سازی اجزای Penpot می تواند جریان کار طراحی شما را افزایش دهد و همکاری بهتری را بین تیم ها تقویت کند.

درباره کامپوننت ها

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

چرا ترکیب پذیری اهمیت دارد؟ چندین مزیت کلیدی وجود دارد:

• منبع واحد حقیقت
  تغییرات در یک جزء در هر جایی که استفاده می شود منعکس می شود و ثبات را تضمین می کند.
• انعطاف پذیری با وابستگی های ساده تر
  اجزاء را می توان به راحتی عوض یا به روز کرد بدون اینکه کل سیستم را تحت تأثیر قرار دهد.
• نگهداری و مقیاس پذیری آسان تر
  همانطور که سیستم شما رشد می کند، اجزا به مدیریت پیچیدگی کمک می کنند.

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

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

این به ما برابری بسیار بهتری بین رسانه ها می دهد و به طراحان اجازه می دهد تا رابط هایی بسازند که قبلاً به صورت کد بیان شده اند. آی تی همکاری آسان تر را تقویت می کند همانطور که طراحان و توسعه دهندگان می توانند هنگام بحث در مورد اجزای خود به یک زبان صحبت کنند. نتیجه نهایی این است قابل نگهداری تر، هم. تغییرات ایجاد شده توسط طراحان می تواند به طور مداوم منتشر شود و مدیریت سیستم های در مقیاس بزرگ را آسان تر می کند.

حال بیایید نگاهی به نحوه عملکرد کامپوننت ها در Penpot در عمل بیاندازیم! به عنوان مثال، من از صفحه محصول تخیلی زیر استفاده می کنم و آن را در Penpot بازسازی می کنم:

اجزای موجود در Penpot

ایجاد کامپوننت ها

برای ایجاد یک کامپوننت در Penpot، به سادگی اشیایی را که می خواهید در آن قرار دهید انتخاب کنید و از منوی زمینه، "Create component" را انتخاب کنید. این انتخاب شما را به یک عنصر قابل استفاده مجدد تبدیل می کند.

ایجاد انواع کامپوننت

Penpot به شما اجازه می دهد تا انواع اجزای خود را ایجاد کنید. اینها نسخه های جایگزینی هستند که ساختار اصلی یکسانی دارند اما در جنبه های خاصی مانند رنگ، اندازه یا حالت متفاوت هستند.

با استفاده از اسلش ها می توانید انواع مختلفی ایجاد کنید (/) در نام اجزاء، به عنوان مثال، با نامگذاری دکمه های خود Button/primary و Button/secondary. این به شما امکان می دهد به راحتی بین انواع a سوئیچ کنید Button جزء بعد

تودرتو مولفه ها و استفاده از کتابخانه های خارجی

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

علاوه بر این، مؤلفه هایی که استفاده می کنید لازم نیست از یک فایل یا حتی از یک سازمان آمده باشند. شما به راحتی می توانید کتابخانه های مؤلفه ها را در بین پروژه ها به اشتراک بگذارید، همانطور که کد را از وابستگی های مختلف به پایگاه کد خود وارد می کنید. همچنین می توانید اجزایی را از کتابخانه های خارجی مانند کیت های رابط کاربری و مجموعه های نماد وارد کنید. Penpot فهرست رو به رشدی از چنین منابعی را برای انتخاب شما، از جمله همه چیز، از سیستم های طراحی بزرگ مانند طراحی متریال گرفته تا محبوب ترین کتابخانه های نماد، نگهداری می کند.

سازماندهی سیستم طراحی شما

نسخه اصلی جدید Penpot با طراحی مجدد عرضه می شود پنل دارایی ها، جایی است که اجزای شما در آن زندگی می کنند. در پنل Assets می توانید به راحتی به اجزای خود دسترسی داشته باشید و آنها را در طرح ها بکشید و رها کنید.

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

پیکربندی کامپوننت ها

یکی از مزایای اصلی استفاده از کامپوننت های قابل ترکیب در کتابخانه های فرانت اند مانند React، پشتیبانی آن ها از props است. اجزای سازنده (مخفف خصوصیات) به شما امکان انعطاف پذیری زیادی را در نحوه پیکربندی و سفارشی سازی اجزای خود بسته به نحوه، مکان و زمان استفاده از آنها می دهد.

Penpot قابلیت های مشابهی را در یک ابزار طراحی با انواع و ردیابی ها ارائه می دهد. می توانید انواع مختلف را تغییر دهید، عناصر را پنهان کنید، سبک ها را تغییر دهید، اجزای تو در تو را در نمونه ها عوض کنید، یا حتی کل طرح بندی یک مؤلفه را تغییر دهید، در حالی که پیوند به مؤلفه اصلی را حفظ می کنید.

ایجاد سیستم های انعطاف پذیر و مقیاس پذیر

به شما اجازه می دهد طرح بندی های Flex و Grid را در نمونه های کامپوننت تغییر دهید جایی است که Penpot واقعا می درخشد. با این حال، قدرت این ویژگی های چیدمان فراتر از خود اجزا است.

با Flex Layout و Grid Layout می توانید اجزایی بسازید که به کد آنها بسیار وفادارتر بوده و اصلاح و نگهداری آنها آسان تر باشد. اما داشتن این ویژگی های قدرتمند به این معنی است که می توانید اجزای خود را در دیگر طرح بندی های Grid و Flex نیز قرار دهید. این یک مشکل بزرگ است زیرا به شما امکان می دهد اجزای خود را در سناریوهایی بسیار نزدیک به محیط واقعی آنها آزمایش کنید. به طور مستقیم در یک ابزار طراحی، می توانید ببینید که اگر جزء شما در مکان های مختلف وب سایت یا برنامه خود قرار دهید، چگونه رفتار می کند. این به شما این امکان را می دهد تا نحوه قرار گرفتن اجزای خود را در یک سیستم بزرگتر تنظیم کنید. این می تواند به طور چشمگیری اصطکاک بین طراحی و کد را کاهش دهد و فرآیند انتقال را ساده کند.

تولید کد کامپوننت ها

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

با استفاده از پنل بازرسی Penpot، می توانید به سرعت تمام ویژگی ها و سبک های چیدمان و همچنین قطعات کد کامل را برای همه مؤلفه ها دریافت کنید.

مستندات و حاشیه نویسی

برای اینکه سیستم های طراحی در Penpot حتی بیشتر قابل نگهداری باشند، شامل ویژگی های حاشیه نویسی می شود تا به شما در مستندسازی اجزای خود کمک کند. این برای حفظ الف بسیار مهم است سیستم طراحی واضح و حصول اطمینان از الف انتقال صاف به توسعه دهندگان.

خلاصه

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

تمامی ویژگی های Penpot برای طراحان و توسعه دهندگان کاملا رایگان است. به عنوان نرم افزار متن باز، Penpot به شما امکان می دهد کاملاً تجربه ابزار طراحی خود را داشته باشید و بدون در نظر گرفتن اندازه و بودجه تیم، آن را برای همه در دسترس قرار دهد.

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

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

(Yk)