![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z M 8.324 19.826 C 8.324 19.826 18.324 15.723 21.791 14.278 C 23.121 13.7 27.629 11.85 27.629 11.85 C 27.629 11.85 29.711 11.04 29.537 13.006 C 29.48 13.815 29.017 16.648 28.555 19.711 C 27.861 24.046 27.11 28.786 27.11 28.786 C 27.11 28.786 26.994 30.116 26.011 30.346 C 25.029 30.578 23.411 29.538 23.121 29.306 C 22.89 29.133 18.786 26.531 17.284 25.26 C 16.879 24.914 16.416 24.22 17.341 23.41 C 19.401 21.522 21.424 19.595 23.41 17.63 C 24.104 16.936 24.797 15.318 21.907 17.284 C 19.209 19.141 16.492 20.972 13.757 22.775 C 13.757 22.775 12.832 23.353 11.097 22.833 C 9.364 22.313 7.341 21.619 7.341 21.619 C 7.341 21.619 5.954 20.751 8.324 19.826 Z" fill="transparent" height="40px" id="GxMSuylVu" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="pvSyxKlhX" width="40px"/><path d="M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z" fill="rgb(52, 170, 223)" height="40px" id="fqjXdMdYW" width="40px"/><path d="M 1.386 8.142 C 1.386 8.142 11.386 4.038 14.854 2.593 C 16.184 2.015 20.691 0.165 20.691 0.165 C 20.691 0.165 22.774 -0.645 22.6 1.322 C 22.542 2.13 22.08 4.963 21.617 8.027 C 20.924 12.362 20.172 17.102 20.172 17.102 C 20.172 17.102 20.056 18.432 19.074 18.662 C 18.091 18.893 16.474 17.853 16.184 17.622 C 15.952 17.448 11.849 14.847 10.346 13.575 C 9.941 13.229 9.479 12.535 10.404 11.725 C 12.463 9.837 14.486 7.91 16.472 5.945 C 17.166 5.252 17.86 3.633 14.97 5.599 C 12.272 7.456 9.555 9.287 6.82 11.09 C 6.82 11.09 5.895 11.668 4.16 11.148 C 2.426 10.628 0.404 9.934 0.404 9.934 C 0.404 9.934 -0.984 9.067 1.386 8.142 Z" fill="rgb(255, 255, 255)" height="18.69485609571008px" id="t2uAwPQcu" transform="translate(6.938 11.685)" width="22.610182127057346px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z M 31.674 21.814 L 31.674 30.06 L 26.894 30.06 L 26.894 22.366 C 26.894 20.435 26.204 19.116 24.472 19.116 C 23.151 19.116 22.367 20.004 22.02 20.864 C 21.895 21.171 21.862 21.598 21.862 22.029 L 21.862 30.059 L 17.081 30.059 C 17.081 30.059 17.145 17.03 17.081 15.681 L 21.862 15.681 L 21.862 17.719 C 21.852 17.735 21.839 17.75 21.831 17.766 L 21.862 17.766 L 21.862 17.719 C 22.497 16.741 23.631 15.344 26.171 15.344 C 29.316 15.344 31.674 17.399 31.674 21.814 Z M 12.08 8.751 C 10.445 8.751 9.375 9.824 9.375 11.234 C 9.375 12.615 10.413 13.719 12.018 13.719 L 12.049 13.719 C 13.716 13.719 14.753 12.615 14.753 11.234 C 14.721 9.824 13.715 8.75 12.08 8.75 Z M 9.659 30.059 L 14.437 30.059 L 14.437 15.68 L 9.659 15.68 Z" fill="transparent" height="40px" id="ISi_LpFSY" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="aitXSklKK" width="40px"/><path d="M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z" fill="rgb(0, 122, 185)" height="40px" id="F1i0ZJ804" width="40px"/><path d="M 22.299 13.064 L 22.299 21.31 L 17.519 21.31 L 17.519 13.616 C 17.519 11.685 16.829 10.366 15.097 10.366 C 13.776 10.366 12.992 11.254 12.645 12.114 C 12.52 12.421 12.487 12.848 12.487 13.279 L 12.487 21.309 L 7.706 21.309 C 7.706 21.309 7.77 8.28 7.706 6.931 L 12.487 6.931 L 12.487 8.969 C 12.477 8.985 12.464 9 12.456 9.016 L 12.487 9.016 L 12.487 8.969 C 13.122 7.991 14.256 6.594 16.796 6.594 C 19.941 6.594 22.299 8.649 22.299 13.064 Z M 2.705 0.001 C 1.07 0.001 0 1.074 0 2.484 C 0 3.865 1.038 4.969 2.643 4.969 L 2.674 4.969 C 4.341 4.969 5.378 3.865 5.378 2.484 C 5.346 1.074 4.34 0 2.705 0 Z M 0.284 21.309 L 5.062 21.309 L 5.062 6.93 L 0.284 6.93 Z" fill="rgb(241, 242, 242)" height="21.310000000000002px" id="o6M2aKQ5B" transform="translate(9.375 8.75)" width="22.298750190734836px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z M 26.819 29.38 L 30.795 29.38 C 31.739 29.38 32.5 28.616 32.5 27.676 L 32.5 15.46 L 26.819 19.723 M 9.205 29.38 L 13.181 29.38 L 13.181 19.721 L 7.5 15.46 L 7.5 27.676 C 7.5 28.619 8.264 29.38 9.205 29.38 Z M 13.181 19.721 L 13.181 12.335 L 20 17.45 L 26.818 12.338 L 26.818 19.723 L 20 24.835 M 26.819 12.335 L 26.819 19.723 L 32.5 15.459 L 32.5 13.188 C 32.5 11.08 30.094 9.878 28.409 11.143 M 7.5 13.188 L 7.5 15.46 L 13.181 19.723 L 13.181 12.335 L 11.591 11.143 C 9.904 9.878 7.5 11.08 7.5 13.188 Z" fill="transparent" height="40px" id="aYumWbwqF" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="lF7gvgt0E" width="40px"/><path d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z" fill="rgb(255, 255, 255)" height="40px" id="RHVuhyowF" width="40px"/><path d="M 0 13.92 L 3.976 13.92 C 4.92 13.92 5.681 13.156 5.681 12.216 L 5.681 0 L 0 4.262" fill="rgb(52, 168, 83)" height="13.919999999999998px" id="tHFmJZ7qz" transform="translate(26.819 15.46)" width="5.68125000000002px"/><path d="M 1.705 13.92 L 5.681 13.92 L 5.681 4.261 L 0 0 L 0 12.216 C 0 13.159 0.764 13.92 1.705 13.92 Z" fill="rgb(66, 133, 244)" height="13.920000000000002px" id="jzClmnIgD" transform="translate(7.5 15.46)" width="5.681249999999984px"/><path d="M 0 7.386 L 0 0 L 6.819 5.115 L 13.636 0.003 L 13.636 7.388 L 6.819 12.5" fill="rgb(234, 67, 53)" height="12.5px" id="o2BEB_XY0" transform="translate(13.181 12.335)" width="13.63624999999999px"/><path d="M 0 1.709 L 0 9.097 L 5.681 4.833 L 5.681 2.562 C 5.681 0.454 3.275 -0.748 1.59 0.517" fill="rgb(251, 188, 4)" height="9.096556008021897px" id="WJhZsc21w" transform="translate(26.819 10.626)" width="5.68125000000002px"/><path d="M 0 2.562 L 0 4.834 L 5.681 9.097 L 5.681 1.709 L 4.091 0.517 C 2.404 -0.748 0 0.454 0 2.562 Z" fill="rgb(197, 34, 31)" height="9.0965560080219px" id="pvylEetGY" transform="translate(7.5 10.626)" width="5.681249999999984px"/></g></svg>)
Дизайн‑система логистического сервиса
Роль
Продуктовый дизайнер
Задача
Создать дизайн-систему для разрабатываемого продукта
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0.5 L 24 0.5 L 24 24.5 L 0 24.5 Z M 8 24 C 10.208 24 12 22.208 12 20 L 12 16 L 8 16 C 5.792 16 4 17.792 4 20 C 4 22.208 5.792 24 8 24 Z M 4 12 C 4 9.792 5.792 8 8 8 L 12 8 L 12 16 L 8 16 C 5.792 16 4 14.207 4 12 Z M 4 4 C 4 1.792 5.792 0 8 0 L 12 0 L 12 8 L 8 8 C 5.792 8 4 6.208 4 4 Z M 12 0 L 16 0 C 18.208 0 20 1.792 20 4 C 20 6.208 18.208 8 16 8 L 12 8 Z M 20 12 C 20 14.207 18.208 16 16 16 C 13.792 16 12 14.207 12 12 C 12 9.792 13.792 8 16 8 C 18.208 8 20 9.792 20 12 Z" fill="transparent" height="24.5px" id="wQHlPAxGX" transform="translate(0.41 0)" width="24px"><path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" fill="transparent" height="24px" id="CKg5ZfXcb" transform="translate(0 0.5)" width="24px"/><path d="M 4 8 C 6.208 8 8 6.208 8 4 L 8 0 L 4 0 C 1.792 0 0 1.792 0 4 C 0 6.208 1.792 8 4 8 Z" fill="rgb(10, 207, 131)" height="8px" id="HtZyVCuBK" transform="translate(4 16)" width="8px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.207 0 4 Z" fill="rgb(162, 89, 255)" height="8px" id="EccsK1Fd3" transform="translate(4 8)" width="8px"/><path d="M 0 4 C 0 1.792 1.792 0 4 0 L 8 0 L 8 8 L 4 8 C 1.792 8 0 6.208 0 4 Z" fill="rgb(242, 78, 30)" height="8px" id="ZRMGm5miG" transform="translate(4 0)" width="8px"/><path d="M 0 0 L 4 0 C 6.208 0 8 1.792 8 4 C 8 6.208 6.208 8 4 8 L 0 8 Z" fill="rgb(255, 114, 98)" height="8px" id="KbqG1BGpX" transform="translate(12 0)" width="8px"/><path d="M 8 4 C 8 6.207 6.208 8 4 8 C 1.792 8 0 6.207 0 4 C 0 1.792 1.792 0 4 0 C 6.208 0 8 1.792 8 4 Z" fill="rgb(26, 188, 254)" height="8px" id="I0PoL4reX" transform="translate(12 8)" width="8px"/></g></svg>)
Описание
При разработке я опиралась на дизайн-системы Primer Web (GitHub) и Atomaro Pro (Ростелеком).
Цели
Создать универсальную библиотеку компонентов;
Обеспечить визуальную целостность продукта;
Упростить и ускорить работу дизайнеров и разработчиков.
Базовые токены
Цветовая система
Цвета названы семантически — в соответствии со своим назначением, слоем, на котором находятся и уровнем иерархии.
В интерфейсе используются две темы: светлая и контрастная. Благодаря использованию семантических переменных их легко переключать между собой без пересборки компонентов.
Типографика
Для всех текстовых стилей я создала токены, разделённые по функциям. Благодаря этому удалось легко адаптировать стили под разные устройства и не пришлось настраивать их в компонентах вручную.
Система размеров
Я разработала систему размеров на основе переменных, чтобы задавать размеры компонентам (ширину, высоту, отступы, радиусы) через заранее определённые значения. Это позволило сделать их гибкими и адаптивными и обеспечило удобство поддержки.
Структура компонентов
Компоненты разработаны с расчётом на дальнейшее расширение проекта:
их можно использовать в разных контекстах;
их легко модифицировать, не ломая систему.
Состояния компонентов
Я продумала и задокументировала состояния для всех интерактивных компонентов, чтобы задать поведение интерфейса при взаимодействии с пользователем.
Адаптивность
Я продумала отображение и поведение компонентов на разных экранах (от мобильного 375px до десктопа 1920px и выше) и в разных контекстах (их иерархии, расположения в интерфейсе и пользовательского сценария).
Структура дизайн-системы
Я разделила дизайн-систему на 4 файла-библиотеки: токены, компоненты, готовые блоки и ресурсы. Все библиотеки наследуют токены, которые задают базовые стили.
Зачем так сделано:
разные роли в команде могут точечно подключать необходимые им файлы;
при росте проекта можно добавлять новые библиотеки, не ломая при этом существующую структуру;
изменение токенов в главном файле автоматически применится ко всем остальным библиотекам;
в дизайн-системе легко ориентироваться.
Выводы
Создание данной дизайн-системы научило меня мыслить масштабно: продумывать логику взаимодействия с компонентами, их адаптивное поведение и создавать их с расчётом на то, как будет жить и расти продукт.
Я также пришла к выводу, что на этапе MVP-1 эффективнее создавать компоненты исходя из задач. А разработка «на всякий случай» лишь отнимает время.
