coursehunter
  • Категории
    • Frontend
      • Angular
      • HTML
      • CSS
      • JavaScript
      • Vue
      • jQuery
      • React
      • AngularJS
      • Backbone
      • TypeScript
      • Ember
      • Next.js
      • Elm
      • Svelte
      • Single SPA
      • Three.js
      • D3.js
      • RxJS
      • WebGL
      • barba.js
    • Backend
      • PHP
      • Python
      • Ruby on Rails
      • Yii
      • Laravel
      • SQL
      • Ruby
      • Symfony
      • Java
      • Scala
      • Node.js
      • MongoDB
      • Golang (Google Go)
      • Slim
      • Silex
      • Firebase
      • C Sharp (C#)
      • Deno
      • Redis
      • Django
      • NestJS
      • Spring
      • Spring Boot
      • Spring Data
      • Spring Cloud
      • Spring Security
      • Spring Integration
      • Spring HATEOAS
      • Spring MVC
      • Elixir
      • Phoenix
    • System programming
      • Rust
      • WebAssembly
    • Marketing
      • SEO
    • Video and 3D
      • Blender
      • Cinema 4D
      • ZBrush
    • Graphic
      • Figma
      • Sketch
      • Photoshop
      • After Effects
      • Illustrator
      • Adobe XD
      • Lightroom
      • CorelDRAW
    • DevOps
      • AWS
      • Azure
      • Docker
      • Git
      • GitHub
      • Gitlab
      • Google Cloud
      • Grafana
      • Kubernetes
      • Jenkins
      • Terraform
    • Tools
      • GraphQL
      • Flux
      • Webpack
      • Ansible
      • Gulp
      • Grunt
      • Visual Studio Code
      • VIM
      • OpenCV
      • Salt
      • SVN
      • Atom
      • Elasticsearch
      • Electron
      • Chrome DevTools
      • Yarn
      • Babel
      • Grep
      • npm
      • Gatsby
      • PhpStorm
      • Webflow
      • Hibernate
      • Socket.io
      • Bash
    • Разработка мобильных приложений
      • React Native
      • Ionic
      • Swift
      • Progressive Web App (PWA)
      • Core Data
      • Xamarin
      • NativeScript
      • Dart и Flutter
    • Gamedev
      • Unity
    • CMS
      • Wordpress
      • OpenCart
      • Drupal
      • Joomla
      • 1C-Bitrix
      • MODX
      • Magento
      • Shopify
    • Blockchain
      • Криптовалюты
      • Decentralized Applications (dApps) (Web 3)
    • Тестирование
      • Postman
      • Selenium
      • Appium
      • Protractor
      • WebdriverIO
      • Cypress
      • Playwright
    • Другое
      • WebRTC
      • OpenGL Shading Language (GLSL)
    • Подготовка к собеседованию
    • Обработка и анализ данных
    • Информационная безопасность
      • Этический взлом / Тестирование на проникновение
    • Английский язык
    • Конференции
  • Источники
  • Все курсы
    • Популярные
    • Бесплатные (100+ Курсов)
  • Топики
  • Книги
    • Популярные
Sign Up Sign in
📌 Очень жаль, что всем известный персонаж решил начать войну. Мы молимся за Украину и за мир!
Главная страница Категория другое (frontend) Дизайн-системы для разработчиков

Дизайн-системы для разработчиков

Design Systems for Developers

Michael Mangialardi
Дизайн-системы для разработчиков Загрузить
Источник
Michael Mangialardi
Категория
Другое (Frontend)
Дата добавления
03/12/2022
Язык
English
Дата выхода
09/04/2022

Для разработки дизайн-системы требуется нечто большее, чем библиотека компонентов пользовательского интерфейса и Storybook. Как разработчик, работающий над системой дизайна, вы отвечаете за извлечение спецификаций дизайна из файлов дизайна и преобразование их в код. Если этот код не может масштабироваться во всех приложениях, использующих дизайн-систему, или в тех, которые будут использовать дизайн-систему в будущем, страдает компания. Вы можете легко застрять в создании очень узких инструментов, таких как библиотека компонентов React, без прочной основы. Потому что библиотека компонентов React — это здорово, но это может дорого обойтись, если вы сделаете это слишком рано. В любой компании приложения могут различаться в зависимости от платформы (например, веб) и технологии (например, React). Если все, что у вас есть, это библиотека компонентов React, как только вы представляете приложение с другой технологией (например, Vue), вам нужно найти способ поделиться спецификациями дизайна между библиотекой компонентов React и библиотекой компонентов Vue. Таким образом, вы можете создать библиотеку CSS-in-JS, которая может инкапсулировать спецификации дизайна и использоваться библиотеками компонентов React и Vue соответственно.


Но что происходит, когда возникает запрос на инкапсуляцию спецификаций дизайна таким образом, чтобы он работал на простом HTML-сайте? Что ж, вы можете перенести инкапсуляцию спецификаций дизайна из библиотеки CSS-in-JS в простой файл CSS. Тем не менее, это ограничивает разработчиков React и Vue в использовании предпочитаемых ими технологий и нарушается, когда вводится не веб-приложение (например, мобильное приложение для Android). Обычно разработчики React и Vue носят с собой библиотеку CSS-in-JS, а разработчики простого HTML — с обычным файлом CSS. Проблема в том, что ваши спецификации дизайна представлены в коде в нескольких местах. Вы больше не можете знать, какой из них является «источником истины». Вы создаете повышенный риск того, что различные приложения в компании не синхронизированы с официальной системой проектирования и друг с другом.

В конце концов, вам нужно представить свои проектные спецификации в коде в одном месте. Из этого единственного «источника правды» вы можете затем генерировать результаты платформы (т. е. переменные CSS, модули JS и т. д.). чтобы все потребители этих результатов были синхронизированы с системой дизайна и друг с другом.

Оказывается, многие компании занимались этими проблемами, включая Shopify, Adobe, Discovery Education, Morningstar, Orbit, Salesforce, Bloomberg и другие.

Решение заключается в создании токенов дизайна и управлении словарем стилей.

«Системы дизайна для разработчиков» — это глубокое погружение в необходимость токенов дизайна, их объяснение и практические решения по их использованию для запуска инструментов системы дизайна в производство.

Более того, я подчеркиваю тот факт, что инструменты и автоматизация полезны только в том случае, если в первую очередь происходит хорошее общение между дизайнерами и разработчиками.

Из этой книги вы узнаете не только о технических навыках, необходимых для создания инструментов системы проектирования для производства, но и о навыках межличностного общения, необходимых для совместной работы дизайнеров и разработчиков.

Являетесь ли вы дизайнером или разработчиком, эта книга для вас.

Я верю, что после прочтения этой книги разработчики смогут работать над дизайн-системой для любой компании, независимо от количества приложений, платформы и технологий, для которых предназначены эти приложения.

Я также верю, что дизайнеры лучше поймут свою роль в сотрудничестве с разработчиками для создания надежной системы дизайна.

В этой книге мы обрисуем проблемы, связанные с созданием инструментов, таких как библиотека компонентов пользовательского интерфейса React, для инкапсуляции стилей дизайн-системы, например, негибкость масштабирования при появлении новых приложений, ориентированных на другую платформу и технический стек.

Оттуда мы рассмотрим, как эти проблемы могут быть решены путем создания токенов дизайна, представлений спецификаций дизайна в коде и словарей стилей, центральной системы управления для хранения токенов дизайна и преобразования их в результаты платформы.

Мы напишем немного кода, обсудим различные подходы и рассмотрим очень практические детали, например, как планировать встречи для совместной работы с дизайнерами.

Посмотреть больше

Комментарии

Только зарегистрированные пользователи могут комментировать️

Похожие

Конференция «Будущее дизайн-систем»

Конференция «Будущее дизайн-систем»

The Future of Design Systems Conference
Виртуальная конференция по системам дизайна, призванная объединить сообщество вокруг систем дизайна и инструментов дизайна, организованная дизайнерским сообществом. Темы: Multibrand Design Systems, DesignOps, Design Tokens, Figma Tokens.
16:53:09
English
gumroad
Премиум
Посмотреть
Создайте дизайн-систему с нуля в Figma

Создайте дизайн-систему с нуля в Figma

Create a Design System from scratch in Figma
Дизайн-системы становятся настолько популярными, потому что они делают продукты более последовательными, улучшают их удобство использования и сокращают время принятия дизайнерских решений. Замечательно! Но знаете ли вы, как их построить? В этом курсе вы узнаете, что такое дизайн-система и почему она так важна, но, что наиболее важно, вы научитесь создавать ее с нуля в Figma.
05:22:29
English
awwwards.com
Премиум
Посмотреть
Дизайн-системы с Storybook и React

Дизайн-системы с Storybook и React

Design Systems with Storybook & React
Дизайн-система является горячей темой в мире разработки, и все крупные компании создают ее. Но что такое дизайн-система и как ее создать? На этом семинаре мы углубимся в основополагающую теорию дизайн-систем и создадим кусочки одной от начала до конца. Мы создадим дизайн-систему путем проектирования, разработки, документирования и развертывания нескольких компонентов.
03:31:37
English
frontendmasters
Удален по просьбе правообладателя
Посмотреть
Создайте полноценную дизайн-систему компании

Создайте полноценную дизайн-систему компании

Build a Complete Company Design System
Этот курс представляет собой исчерпывающее руководство по публикации вашей первой библиотеки компонентов и ресурсов дизайна с использованием React, TypeScript, Storybook, Tailwind CSS и Styled Dictionary. Вы создадите гибкую библиотеку дизайн-системы корпоративного уровня, которая действительно понравится вашим коллегам.
01:20:12
English
fullstack.io
Премиум
Посмотреть

Ресурс видеоуроков программирования для front и back end разработчиков. Бери знания своего профиля у нас, ведь мы самые лучшие блеать. Серьезно.

Категории
Все категории HTML CSS JavaScript React.js Python SQL Java Node.js Другое TypeScript
Источники
Все источники codewithmosh (Mosh Hamedani) frontendmasters itgid (Александр Лущенко) itvdn OTUS softwaretesting udemy videosmile webformyself Дмитрий Лаврик
Telegram Форум Пакеты Контакты FAQ
Темы:
Язык: