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

Краткий экскурс в мир дизайн-систем


Обзор содержимого

база

проблемы

подходы к созданию

работа в Фигме

лучшее из практик

темная тема

мобильные платформы

Разделы

МатериалИзучитьО чёмТипЯзык
🔥База дизайн-системhttps://designsystems.surf/лучшее из практиксайт🇬🇧
Объединение бренда и продукта на примере дизайн-системы Netflixhttps://ux.pub/editorial/obiedinieniie-brienda-i-produkta-na-primierie-dizain-sistiemy-netflix-3nfdлучшее из практикстатья🇷🇺
The design systemguidehttps://thedesignsystem.guide/подходы к созданиюсайт🇬🇧
Мастерство дизайн-системыhttps://backlight.dev/mastery/подходы к созданиюинструкциясайт🇬🇧
Ультимативный гайд по дизайн-токенамhttps://habr.com/ru/company/usetech/blog/673196/подходы к созданиюстатья🇷🇺
[badoo] Дизайн-токены способны на большее: создаем единый источник информации о компонентах UIhttps://habr.com/ru/company/badoo/blog/491948/лучшее из практикподходы к созданиюинструкциястатья🇷🇺
Именование токенов дизайнаhttps://uxdesign.cc/naming-design-tokens-9454818ed7cbподходы к созданиюстатья🇬🇧
Организация пространства в дизайне. Отступы, сетки и лейаутыhttps://ux.pub/editorial/orghanizatsiia-prostranstva-v-dizainie-otstupy-sietki-i-lieiauty-33b2подходы к созданиюстатья🇷🇺
Как создать масштабируемую дизайн-систему: рассматриваем на примере SaaS-продуктовhttps://vc.ru/design/165569-kak-sozdat-masshtabiruemuyu-dizayn-sistemu-rassmatrivaem-na-primere-saas-produktov?utm_source=uxhornлучшее из практикстатья🇷🇺
[Мир] Дизайн-система: что пошло не так и как мы это исправилиhttps://habr.com/ru/company/nspk/blog/676700/лучшее из практикстатья🇷🇺
Постройте дизайн-систему, которая предоставляет унифицированный набор правил и паттернов для UX и дизайнаhttps://ux.pub/editorial/postroitie-dizain-sistiemu-kotoraia-priedostavliaiet-unifitsirovannyi-nabor-pravil-i-pattiernov-dlia-ux-i-dizaina-1f73#Sistemaлучшее из практикстатья🇷🇺
Как News UK разработала мультибрендовую систему дизайнаhttps://www.figma.com/blog/how-news-uk-developed-a-multi-brand-design-system/?utm_source=figma&utm_medium=email&utm_campaign=figma_monthly_july&utm_content=newsuk_button&mkt_tok=Nzc4LU1FVS0yODEAAAF-Y_Lrfdp7DoLjWcBiCDSwLODon6Il-j8Rh78-lV2sMmVN5d0hQ8zmP101O1sV5rQn2uVaN5s5mrzqAngo7oiyyBFuMCaPaTV9N7JgWK60aQлучшее из практикстатья🇬🇧
🔥[Tilda] Дизайн-системыhttps://tilda.education/courses/web-design/designsystem/базараздел курса🇷🇺
[Uprock] Что такое дизайн-системы и как их создавать?https://www.uprock.ru/articles/chto-takoe-dizayn-sistemy-i-kak-ih-sozdavatбазастатья🇷🇺
[VK] Дизайн-система. Определение понятияhttps://habr.com/ru/company/vk/blog/351726/базастатья🇷🇺
🔥[Юрий Веторов] Токены в дизайн-системахhttps://speakerdeck.com/jvetrau/iurii-vietrov-tokieny-v-dizain-sistiemakh?slide=25проблемыпрезентация🇷🇺
Дизайн-системы: почему это плюс для продукта, но минус — для студииhttps://www.cossa.ru/trends/225439/проблемыстатья🇷🇺
Дизайн-система: синдром LEGO-наборовhttps://ux.pub/editorial/dizain-sistiema-sindrom-lego-naborov-3k30проблемыстатья🇷🇺
Что такое дизайн-системы и где они применяютсяhttps://vc.ru/flood/36947-chto-takoe-dizayn-sistemy-i-gde-oni-primenyayutsyaбазастатья🇷🇺
Cтыдные вопросы о дизайн-системеhttps://blog.sibirix.ru/design-system/базастатья🇷🇺
Компонентный дизайнhttps://medium.com/@uxops/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-2000bd9ac527базастатья🇷🇺
[Яндекс] Как устроены и зачем нужны дизайн-системыhttps://academy.yandex.ru/journal/kak-ustroeny-i-zachem-nuzhny-dizayn-sistemyбазастатья🇷🇺
[rmr] Подборка книжекhttps://vk.com/wall-13392530_602базаподборка🇬🇧
Атомарный дизайнhttps://habr.com/ru/post/249223/базастатья🇷🇺
Использование типографики Apple для iOS-Дизайнераhttps://ux.pub/tarasenko/ispolzovaniie-tipoghrafiki-apple-dlia-ios-dizainiera-3gjhмобильные платформыподходы к созданиюстатья🇷🇺
Дизайн-система: как хорошо начать и не закончить плохоhttps://medium.com/behancerussia/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0-%D0%BA%D0%B0%D0%BA-%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%BE-%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C-%D0%B8-%D0%BD%D0%B5-%D0%B7%D0%B0%D0%BA%D0%BE%D0%BD%D1%87%D0%B8%D1%82%D1%8C-%D0%BF%D0%BB%D0%BE%D1%85%D0%BE-d926d48c05e0подходы к созданиюинструкциястатья🇷🇺
🔥Динамические компоненты в Фигмаhttps://medium.design/designing-with-dynamic-content-in-figma-897b46f083d0работа в Фигмеинструкциястатья🇬🇧
5 шагов для внедрения нового компонента в дизайн-системуhttps://medium.com/hacking-talent/rationalise-it-5-steps-to-introduce-a-new-component-to-the-design-system-68d5299b4bb0работа в Фигмеинструкциястатья🇬🇧
Naming Tokens in Design Systemshttps://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676подходы к созданиюстатья🇬🇧
Создание библиотек компонентов в figma: набор элементовhttps://ux.pub/editorial/sozdaniie-bibliotiek-komponientov-v-figma-nabor-eliemientov-480hподходы к созданиюработа в Фигмеинструкциястатья🇷🇺
Фигма: как обновить иконку, ничего не сломавhttps://mikeozornin.ru/blog/all/how-to-update-icons-in-figma/?utm_source=tw-mikeozornin&utm_medium=socialработа в Фигмеинструкция🇷🇺
Не используй варианты для иконокhttps://slashdesigner.ru/design-systems/icon-varsработа в Фигместатья🇷🇺
О структурировании документовhttps://orbit.kiwi/kiwi-use/guides/working-with-figma/structure/подходы к созданиюработа в Фигмедокументация🇬🇧
Плагин для создания дизайн токеновhttps://www.notion.so/siberiandesign/Figma-Tokens-2ba6cbc0a70f4ae3969010e28655e8dfработа в Фигмеинструмент🇬🇧
4 способа задокументировать вашу дизайн-систему с помощью Storybookhttps://ux.pub/editorial/4-sposoba-zadokumientirovat-vashu-dizain-sistiemu-s-pomoshchiu-storybook-38ijподходы к созданиюстатья🇷🇺
[AirBnb] Создание визуального языкаhttps://airbnb.design/building-a-visual-language/лучшее из практикподходы к созданиюстатья🇬🇧
Структура дизайн-системы Spotifyhttps://spotify.design/article/how-spotify-organises-work-in-figma-to-improve-collaborationлучшее из практикподходы к созданиюдокументациястатья🇬🇧
Системы типографики в мобилкахhttps://www.notion.so/siberiandesign/8b7eaa845afc407d81ca8dacde0381afмобильные платформыподходы к созданиюстатья🇷🇺
О системе вертикальных отступовhttps://medium.com/design-pub/%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D1%8B-%D0%B2-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%BD%D1%8B%D0%B9-%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-82cad46dd34fподходы к созданиюстатья🇷🇺
Анализ дизайн-системы VKhttps://slashdesigner.ru/design-systems/vkподходы к созданиюстатья🇷🇺
Revolut Figma Playbook: интерактивная организация проектовhttps://www.youtube.com/watch?v=r3uiss-5uhgлучшее из практиквидео🇷🇺
[DropBox] Design Tooling at Scalehttps://dropbox.design/article/design-tooling-at-scaleлучшее из практикстатья🇬🇧
[Mail.ru] Опыт внедрения дизайн системыhttps://www.youtube.com/watch?v=dCFa07cRsQgлучшее из практиквидео🇷🇺
Как появляются дизайн-системы: рассказываем и показываем на собственном примереhttps://habr.com/ru/companies/quadcode/articles/733584/лучшее из практикстатья🇷🇺
🔥[Юрий Ветров] Подборка материалов про темную темуhttps://jvetrau.com/darkmode/темная темастатья🇷🇺
Про тёмные и светлые темыhttps://slashdesigner.ru/design-systems/dark-themeтемная темастатья🇷🇺
Подборка статей про темную темуhttps://slashdesigner.ru/b7866ef4374947259d75d35a5d2f5fb0темная темаподборка🇷🇺
[Uprock] Темный режим: 8 советов по созданию темного пользовательского интерфейсаhttps://www.uprock.ru/articles/temnyy-rezhim-8-sovetov-po-sozdaniyu-temnogo-polzovatelskogo-interfeysaтемная темастатья🇷🇺
Как создавать восхитительные тёмные темыhttps://vc.ru/design/88380-kak-sozdavat-voshititelnye-temnye-temyтемная темастатья🇷🇺
Фундаментальные принципы дизайна темной темыhttps://ux.pub/editorial/fundamientalnyie-printsipy-dizaina-tiemnoi-tiemy-385pтемная темастатья🇷🇺



Подготовила Мари 🐱