🗊Презентация Дизайн-системы для девелоперов

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Дизайн-системы для девелоперов, слайд №1Дизайн-системы для девелоперов, слайд №2Дизайн-системы для девелоперов, слайд №3Дизайн-системы для девелоперов, слайд №4Дизайн-системы для девелоперов, слайд №5Дизайн-системы для девелоперов, слайд №6Дизайн-системы для девелоперов, слайд №7Дизайн-системы для девелоперов, слайд №8Дизайн-системы для девелоперов, слайд №9Дизайн-системы для девелоперов, слайд №10Дизайн-системы для девелоперов, слайд №11Дизайн-системы для девелоперов, слайд №12Дизайн-системы для девелоперов, слайд №13Дизайн-системы для девелоперов, слайд №14Дизайн-системы для девелоперов, слайд №15Дизайн-системы для девелоперов, слайд №16Дизайн-системы для девелоперов, слайд №17Дизайн-системы для девелоперов, слайд №18Дизайн-системы для девелоперов, слайд №19Дизайн-системы для девелоперов, слайд №20
Скачать
Вы можете ознакомиться и скачать презентацию на тему Дизайн-системы для девелоперов. Доклад-сообщение содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Practical Design Systems for Developers Практические Дизайн Системы для Девелоперов
Описание слайда:
Practical Design Systems for Developers Практические Дизайн Системы для Девелоперов

Слайд 2


Что мы узнаем? Что такое дизайн система? Какие есть инструменты для разработчиков? Как общаться с дизайнерами?
Описание слайда:
Что мы узнаем? Что такое дизайн система? Какие есть инструменты для разработчиков? Как общаться с дизайнерами?

Слайд 3


Что такое дизайн система? A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
Описание слайда:
Что такое дизайн система? A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

Слайд 4


https://designsystemsrepo.com/design-systems/
Описание слайда:
https://designsystemsrepo.com/design-systems/

Слайд 5


Разработчик должен понимать как организовать систему в проекте https://medium.com/uxcollections/design-system-resources-d8985ae689b4
Описание слайда:
Разработчик должен понимать как организовать систему в проекте https://medium.com/uxcollections/design-system-resources-d8985ae689b4

Слайд 6


Atomic design - Атомический Дизайн http://atomicdesign.bradfrost.com/chapter-2/
Описание слайда:
Atomic design - Атомический Дизайн http://atomicdesign.bradfrost.com/chapter-2/

Слайд 7


Написание CSS
Описание слайда:
Написание CSS

Слайд 8


SASS https://www.sitepoint.com/architecture-in-sass/ https://sass-lang.com/
Описание слайда:
SASS https://www.sitepoint.com/architecture-in-sass/ https://sass-lang.com/

Слайд 9


Practical Cases of SASS https://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/ https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9
Описание слайда:
Practical Cases of SASS https://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/ https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9

Слайд 10


Webpack setup? https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
Описание слайда:
Webpack setup? https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1

Слайд 11


PostCSS? https://www.postcss.parts/ https://www.sitepoint.com/an-introduction-to-postcss/
Описание слайда:
PostCSS? https://www.postcss.parts/ https://www.sitepoint.com/an-introduction-to-postcss/

Слайд 12


CSS-in-JS https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc
Описание слайда:
CSS-in-JS https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc

Слайд 13


Libraries (React) https://www.styled-components.com/docs
Описание слайда:
Libraries (React) https://www.styled-components.com/docs

Слайд 14


Альтернативы https://emotion.sh/ https://alligator.io/react/css-in-js-roundup-styling-react-components/ https://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html http://www.npmtrends.com/
Описание слайда:
Альтернативы https://emotion.sh/ https://alligator.io/react/css-in-js-roundup-styling-react-components/ https://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html http://www.npmtrends.com/

Слайд 15


Документация https://storybook.js.org/basics/introduction/ https://www.docz.site/
Описание слайда:
Документация https://storybook.js.org/basics/introduction/ https://www.docz.site/

Слайд 16


Tecтирование https://storybook.js.org/testing/react-ui-testing/ https://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools
Описание слайда:
Tecтирование https://storybook.js.org/testing/react-ui-testing/ https://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools

Слайд 17


Дизайн-системы для девелоперов, слайд №17
Описание слайда:

Слайд 18


ДизайнеRы https://zeplin.io/ https://www.figma.com/file/oj3taaBNJX8PCVegyDpwAF/Sample-File https://framer.com/
Описание слайда:
ДизайнеRы https://zeplin.io/ https://www.figma.com/file/oj3taaBNJX8PCVegyDpwAF/Sample-File https://framer.com/

Слайд 19


Дизайн-системы для девелоперов, слайд №19
Описание слайда:

Слайд 20


Спасибо!
Описание слайда:
Спасибо!

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию