- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Practical Design Systems for Developers презентация
Содержание
- 1. Practical Design Systems for Developers
- 2. Что мы узнаем? Что такое дизайн система?
- 3. Что такое дизайн система? A design
- 4. https://designsystemsrepo.com/design-systems/ Какие есть системы?
- 5. Разработчик должен понимать как организовать систему в проекте https://medium.com/uxcollections/design-system-resources-d8985ae689b4
- 6. Atomic design - Атомический Дизайн http://atomicdesign.bradfrost.com/chapter-2/
- 7. Написание CSS http://getbem.com/introduction/ https://smacss.com/
- 8. 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
- 10. 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/
- 12. 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 https://github.com/jxnblk/styled-system
- 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/
- 15. Документация 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
- 18. ДизайнеRы https://zeplin.io/ https://www.figma.com/file/oj3taaBNJX8PCVegyDpwAF/Sample-File https://framer.com/
- 20. Спасибо! Twitter Instagram Medium @riittagirl
Слайд 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.
Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
Слайд 5Разработчик должен понимать как организовать систему в проекте
https://medium.com/uxcollections/design-system-resources-d8985ae689b4
Слайд 9Practical 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
Слайд 10Webpack setup?
https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
Слайд 13Libraries (React)
https://www.styled-components.com/docs
https://github.com/jxnblk/styled-system
Слайд 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/
Слайд 16Tecтирование
https://storybook.js.org/testing/react-ui-testing/
https://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools
Слайд 18ДизайнеRы
https://zeplin.io/
https://www.figma.com/file/oj3taaBNJX8PCVegyDpwAF/Sample-File
https://framer.com/
