توضیحات
Lots of design token-related tips and tricks to learn in this book from design tools to production, with an emphasis on the fact tools and automation are only useful if good communication is happening between designers and developers in the first place
Confidently Develop a Company-Wide Design System At Scale
Developing a design system demands more than a UI component library and Storybook.
As a developer working on a design system, you’re responsible for extracting design specifications from design files and translating them into code. If that code cannot scale across all the applications that are consuming the design system, or that will consume the design system in the future, the company suffers.
You can easily get stuck building very narrow tools, like a React component library without a firm foundation. Because a React component library is great, but it can be costly if you do it too soon. At any company, applications can vary by platform (i.e. web) and technology (i.e. React). If all you have is a React component library, as soon as you introduce an application with a different technology (i.e. Vue), then you have to find a way to share the design specifications between the React component library and the Vue component library. So, you might create a CSS-in-JS library that can encapsulate the design specifications and be consumed by the React and Vue component libraries respectively.
But, what happens when a request arises for an encapsulation of the design specifications in a way that would work for a plain HTML site? Well, you could move the encapsulation of the design specifications from a CSS-in-JS library to a plain CSS file. However, that limits the React and Vue developers from using their preferred technologies, and that breaks down when a non-web application is introduced (i.e. an Android mobile app). Usually what happens is that the React and Vue developers would carry along with a CSS-in-JS library and the plain HTML developers carry along with a plain CSS file. The issue is that you have your design specifications represented in code in multiple places. You can no longer know which one is the ‘source of truth.’ You generate an increased risk that the various applications in a company are out of sync with the official design system and with each other.
At the end of the day, you need to represent your design specifications in code in a single place. From that single ‘source of truth,’ you can then generate the platform deliverables (i.e. CSS variables, JS modules, etc.) What you don’t want to do is to create platform deliverables without a single source of truth, without a mechanism to keep all the consumers of those deliverables in sync with the design system and one another.
It turns out that many companies have been looking into these problems including Shopify, Adobe, Discovery Education, Morningstar, Orbit, Salesforce, Bloomberg, and more.
The solution is creating design tokens and managing a style dictionary.
Design Systems for Developers is a deep dive into the need for design tokens, an explanation of them, and practical solutions for using them to launch design system tools into production.
Moreover, I emphasize the fact that tools and automation are only useful if good communication is happening between designers and developers in the first place.
In this book, you’ll not only learn the technical skills that go into building design system tools for production, but also the soft skills required for collaboration between designers and developers.
Whether you’re a designer or a developer, this book is for you.
I trust that after reading this book, developers will be able to work on a design system for any company, regardless of the number of applications and the platform and technologies that those applications are geared for.
I also trust that designers will have a better understanding of their role in collaborating with developers to create a robust design system.
In this book, we’ll outline the problems associated with creating tools, like a React UI component library, to encapsulate the styles of a design system, such as the inflexibility of scaling when new applications arise targeting a different platform and tech stack.
From there, we go over how these problems may be solved by creating design tokens, representations of design specifications in code, and style dictionaries, a central management system for storing design tokens and transforming them into platform deliverables.
We’ll write some code, discuss different approaches, and cover the very practical details, like how to schedule meetings to collaborate with designers.
————————————————————–
ترجمه ماشینی :
بسیاری از نکات و ترفندهای مرتبط با توکن طراحی برای یادگیری در این کتاب از ابزار طراحی تا تولید، با تاکید بر این واقعیت که ابزارها و اتوماسیون تنها زمانی مفید هستند که در وهله اول ارتباط خوبی بین طراحان و توسعه دهندگان برقرار باشد با اطمینان سیستم طراحی گسترده شرکت در مقیاس توسعه یک سیستم طراحی بیش از یک کتابخانه مؤلفه رابط کاربری و کتاب داستان نیاز دارد. به عنوان یک توسعه دهنده که بر روی یک سیستم طراحی کار می کند، شما مسئول استخراج مشخصات طراحی از فایل های طراحی و ترجمه آنها به کد هستید. اگر آن کد نتواند در تمام برنامههایی که سیستم طراحی را مصرف میکنند، مقیاس شود یا در آینده سیستم طراحی را مصرف کند، شرکت آسیب میبیند. شما می توانید به راحتی در ساخت ابزارهای بسیار باریک، مانند کتابخانه کامپوننت React بدون پایه محکم، گیر کنید. زیرا یک کتابخانه کامپوننت React عالی است، اما اگر خیلی زود این کار را انجام دهید ممکن است گران تمام شود. در هر شرکتی، برنامه ها می توانند بر اساس پلتفرم (به عنوان مثال وب) و فناوری (یعنی React) متفاوت باشند. اگر تنها چیزی که دارید یک کتابخانه کامپوننت React است، به محض اینکه اپلیکیشنی با تکنولوژی متفاوت (یعنی Vue) معرفی می کنید، باید راهی برای به اشتراک گذاشتن مشخصات طراحی بین کتابخانه کامپوننت React و کتابخانه کامپوننت Vue پیدا کنید. بنابراین، ممکن است یک کتابخانه CSS-in-JS ایجاد کنید که می تواند مشخصات طراحی را کپسوله کند و به ترتیب توسط کتابخانه های مؤلفه React و Vue مصرف شود. اما، چه اتفاقی میافتد وقتی درخواستی برای کپسولهسازی مشخصات طراحی به روشی که برای یک سایت HTML ساده کار میکند مطرح میشود؟ خوب، میتوانید کپسولهسازی مشخصات طراحی را از یک کتابخانه CSS-in-JS به یک فایل CSS ساده منتقل کنید. با این حال، این امر توسعهدهندگان React و Vue را از استفاده از فناوریهای ترجیحی خود محدود میکند و با معرفی یک برنامه غیر وب (یعنی یک برنامه تلفن همراه اندروید) از بین میرود. معمولاً اتفاقی که می افتد این است که توسعه دهندگان React و Vue یک کتابخانه CSS-in-JS و توسعه دهندگان HTML ساده با یک فایل CSS ساده همراه دارند. مسئله این است که شما مشخصات طراحی خود را به صورت کد در چندین مکان نشان داده اید. شما دیگر نمی توانید بدانید که کدام یک “منبع حقیقت” است. شما این خطر را افزایش می دهید که برنامه های مختلف در یک شرکت با سیستم طراحی رسمی و با یکدیگر هماهنگ نباشند. در پایان روز، باید مشخصات طراحی خود را به صورت کد در یک مکان نشان دهید. از آن «منبع حقیقت» واحد، میتوانید تحویلپذیرهای پلتفرم را تولید کنید (یعنی متغیرهای CSS، ماژولهای JS، و غیره). برای همگام نگه داشتن تمام مصرف کنندگان آن محصولات قابل تحویل با سیستم طراحی و یکدیگر. به نظر می رسد که بسیاری از شرکت ها به دنبال این مشکلات از جمله Shopify، Adobe، Discovery Education، Morningstar، Orbit، Salesforce، Bloomberg و غیره بوده اند. راه حل ایجاد نشانه های طراحی و مدیریت فرهنگ لغت سبک است. \ سیستم های طراحی برای توسعه دهندگان یک بررسی عمیق در مورد نیاز به نشانه های طراحی، توضیح آنها و راه حل های عملی برای استفاده از آنها برای راه اندازی ابزارهای سیستم طراحی به تولید است. علاوه بر این، من بر این واقعیت تأکید می کنم که ابزارها و اتوما
tag : دانلود کتاب طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید , Download طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید , دانلود طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید , Download Design systems for developers: Learn how to code design systems that scale Book , طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید دانلود , buy طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید , خرید کتاب طراحی سیستم ها برای توسعه دهندگان: یاد بگیرید که چگونه سیستم های طراحی را با مقیاس کدگذاری کنید , دانلود کتاب Design systems for developers: Learn how to code design systems that scale , کتاب Design systems for developers: Learn how to code design systems that scale , دانلود Design systems for developers: Learn how to code design systems that scale , خرید Design systems for developers: Learn how to code design systems that scale , خرید کتاب Design systems for developers: Learn how to code design systems that scale ,
نقد و بررسیها
هنوز بررسیای ثبت نشده است.