[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-design-system":66},true,[5,14,20,29,34,40,46,52,56,62],{"id":6,"name":7,"hex":8,"translations":9,"count_pages":13},8,"Компания","#f40925",{"ru":10,"en":11},{"name":7},{"name":12},"Company",9,{"id":15,"name":16,"hex":17,"translations":18,"count_pages":6},26,"Главная страница",null,{"ru":19},{"name":16},{"id":21,"name":22,"hex":23,"translations":24,"count_pages":28},2,"Проекты","#3027ff",{"ru":25,"en":26},{"name":22},{"name":27},"Project",15,{"id":30,"name":31,"hex":17,"translations":32,"count_pages":21},33,"ИИ",{"ru":33},{"name":31},{"id":35,"name":36,"hex":17,"translations":37,"count_pages":39},34,"Комментарии",{"ru":38},{"name":36},4,{"id":41,"name":42,"hex":17,"translations":43,"count_pages":45},25,"Задачи",{"ru":44},{"name":42},24,{"id":47,"name":48,"hex":17,"translations":49,"count_pages":51},27,"Рабочие пространства",{"ru":50},{"name":48},3,{"id":45,"name":53,"hex":17,"translations":54,"count_pages":6},"Kanban-доска",{"ru":55},{"name":53},{"id":57,"name":58,"hex":17,"translations":59,"count_pages":61},23,"Диаграмма Ганта",{"ru":60},{"name":58},1,{"id":28,"name":63,"hex":17,"translations":64,"count_pages":61},"Календарь",{"ru":65},{"name":63},{"detail":67,"more":177},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":111,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":112,"related":126,"views_count":174,"helpful_yes_count":115,"helpful_no_count":115,"created_at":175,"updated_at":176,"published_at":17},330,"design-system",{"ru":71},{"title":72,"short_definition":73,"tldr":74,"full_explanation":75,"when_to_apply":76,"when_not_to_apply":77,"examples":78,"tips":79,"synonyms":80,"translation_en":81,"seo_title":82,"seo_description":83},"Дизайн-система","Единый набор переиспользуемых компонентов, правил и токенов, который обеспечивает единообразие интерфейса продукта.","Дизайн-система — это библиотека готовых строительных блоков продукта: кнопки, формы, типографика, цвета, отступы, иконки. Вместе с ними идут правила использования и токены — записанные в коде цвета и размеры. Дизайн-система позволяет команде собирать новые экраны в разы быстрее и держать единый стиль во всех продуктах компании. Известные примеры: Material (Google), Human Interface (Apple), Polaris (Shopify).","\u003Cp>Дизайн-система — это не просто файл в Figma с компонентами. Это связка визуальных решений, кода и правил их применения.\u003C\u002Fp>\u003Ch3>Из чего состоит\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Дизайн-токены\u003C\u002Fstrong> — числовые и цветовые переменные: цвета, шрифты, размеры отступов и радиусов.\u003C\u002Fli>\u003Cli>\u003Cstrong>Компоненты в Figma\u003C\u002Fstrong> — переиспользуемые элементы для дизайнеров.\u003C\u002Fli>\u003Cli>\u003Cstrong>Библиотека в коде\u003C\u002Fstrong> — те же компоненты для разработчиков (React, Vue и так далее).\u003C\u002Fli>\u003Cli>\u003Cstrong>Документация и правила\u003C\u002Fstrong> — когда применять компонент, как он себя ведёт, какие у него состояния.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Что даёт\u003C\u002Fh3>\u003Cul>\u003Cli>Единообразный продукт без «зоопарка стилей».\u003C\u002Fli>\u003Cli>Скорость новых возможностей: их собирают из готовых кирпичиков.\u003C\u002Fli>\u003Cli>Доступность и адаптивность, заложенные в самих компонентах.\u003C\u002Fli>\u003Cli>Общий язык между дизайном и разработкой.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Когда несколько дизайнеров и разработчиков работают над одним продуктом\u003C\u002Fli>\u003Cli>Когда у компании несколько продуктов и стиль должен быть общим\u003C\u002Fli>\u003Cli>Когда новые экраны делаются часто и стабильность важна\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Маленькая команда из 1–2 дизайнеров на одном продукте — для начала достаточно общего файла компонентов без отдельной дизайн-системы\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>В компании было четыре продукта, у каждого свой набор компонентов и стилей. Новый экран занимал несколько дней, а кнопка, нарисованная в одном продукте, через месяц появлялась в соседнем с другим радиусом скругления. После запуска дизайн-системы у дизайнеров появилась общая библиотека в Figma, у разработчиков — один общий пакет компонентов. Новые возможности стали выходить быстрее, а число визуальных ошибок упало в несколько раз.\u003C\u002Fp>","\u003Cp>Не пытайтесь сделать «идеальную» дизайн-систему сразу. Начните с самых частых компонентов: кнопки, поля ввода, типографика, цвета. Каждый следующий компонент добавляйте только тогда, когда он реально понадобился в продукте. Иначе дизайн-система превращается в музей, которым никто не пользуется.\u003C\u002Fp>","дизайн-система, система дизайна, Design System","Design System","Дизайн-система: что это и зачем нужна | Глоссарий Shtab","Дизайн-система — библиотека компонентов, правил и токенов для единообразного интерфейса. Из чего состоит, что даёт команде и как внедрять её постепенно.",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":88},12,"ux-design","#ec4899",{"ru":89},{"title":90,"description":91},"UX и дизайн","Понятия дизайна пользовательских интерфейсов и пользовательского опыта: исследования, юзабилити, доступность, IA, прототипы, дизайн-системы, методологии и тёмные паттерны.",[93,102],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":99},48,"ui-design","tool","#7c5ce6",111,{"ru":100},{"title":101},"UI-дизайн",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":108},50,"design-system-tag","framework","#14b8a6",113,{"ru":109},{"title":110},"Дизайн-системы","Д",[113,120],{"id":114,"order":115,"translations":116},1655,0,{"ru":117},{"question":118,"answer":119},"Чем дизайн-система отличается от UI-кита?","\u003Cp>UI-кит — это обычно набор экранов или компонентов в Figma. Дизайн-система шире: в неё входят ещё правила применения, библиотека в коде, документация и процесс развития с ответственными людьми. Любой UI-кит может стать отправной точкой для дизайн-системы, но сам по себе ей не становится: без кода и правил он остаётся красивой картинкой.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1656,{"ru":123},{"question":124,"answer":125},"Брать готовую систему или делать свою?","\u003Cp>Для большинства продуктов разумно начать с готовой, например Material или Ant, и постепенно подстраивать её под бренд: цвета, типографику, отдельные компоненты. Полностью свою систему с нуля делают там, где визуальная уникальность критична, — премиальные продукты, медиа, развлекательные сервисы. Своя система стоит дорого не в запуске, а в поддержке на годы вперёд.\u003C\u002Fp>",{"child":127,"related":142},[128,135],{"id":129,"slug":130,"translations":131},331,"design-tokens",{"ru":132},{"title":133,"short_definition":134},"Дизайн-токены","Именованные переменные дизайна (цвета, размеры, шрифты), которые единообразно используются и в макетах, и в коде.",{"id":136,"slug":137,"translations":138},332,"atomic-design",{"ru":139},{"title":140,"short_definition":141},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».",[143,150,153,160,167],{"id":144,"slug":145,"translations":146},319,"ux-vs-ui",{"ru":147},{"title":148,"short_definition":149},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.",{"id":136,"slug":137,"translations":151},{"ru":152},{"title":140,"short_definition":141},{"id":154,"slug":155,"translations":156},324,"accessibility",{"ru":157},{"title":158,"short_definition":159},"Доступность (a11y)","Принципы и практики проектирования продукта, которым могут пользоваться люди с разными возможностями, включая нарушения зрения, слуха, моторики.",{"id":161,"slug":162,"translations":163},329,"mockup",{"ru":164},{"title":165,"short_definition":166},"Мокап интерфейса","Статичный высокодетализированный визуал интерфейса с финальным дизайном, но без интерактивности.",{"id":168,"slug":169,"translations":170},333,"style-guide",{"ru":171},{"title":172,"short_definition":173},"Стайл-гайд","Документ с правилами визуального языка продукта: палитра, типографика, иконки, использование логотипа, голос бренда.",104,"2026-05-11T20:33:05.185262+03:00","2026-05-11T20:33:05.185278+03:00",[178,197,221],{"id":136,"slug":137,"translations":179,"category":182,"tags":185,"letter":195,"cover":17,"updated_at":196,"published_at":17},{"ru":180},{"title":140,"short_definition":141,"translation_en":181},"Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":183},{"ru":184},{"title":90,"description":91},[186,192],{"id":61,"slug":187,"kind":187,"hex":188,"order":61,"translations":189},"methodology","#5e79ec",{"ru":190},{"title":191},"Методология",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":193},{"ru":194},{"title":110},"A","2026-05-11T20:33:05.908305+03:00",{"id":198,"slug":199,"translations":200,"category":205,"tags":208,"letter":219,"cover":17,"updated_at":220,"published_at":17},335,"mobile-first",{"ru":201},{"title":202,"short_definition":203,"translation_en":204},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":206},{"ru":207},{"title":90,"description":91},[209,212],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":210},{"ru":211},{"title":101},{"id":213,"slug":214,"kind":187,"hex":188,"order":215,"translations":216},49,"design-process",112,{"ru":217},{"title":218},"Процесс дизайна","M","2026-05-11T20:33:07.021925+03:00",{"id":144,"slug":145,"translations":222,"category":225,"tags":228,"letter":246,"cover":17,"updated_at":247,"published_at":17},{"ru":223},{"title":148,"short_definition":149,"translation_en":224},"UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":226},{"ru":227},{"title":90,"description":91},[229,236,243],{"id":6,"slug":230,"kind":231,"hex":232,"order":6,"translations":233},"concept","other","#4b5370",{"ru":234},{"title":235},"Концепция",{"id":237,"slug":238,"kind":96,"hex":87,"order":239,"translations":240},47,"ux-research",110,{"ru":241},{"title":242},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":244},{"ru":245},{"title":101},"U","2026-05-11T20:33:01.213551+03:00"]