Принципы Universal Design Framework

Этот принцип основывается на особой системе наименования компонентов и в дизайне и в коде. Также мы используем особую систему префиксов для того, чтобы быстро ориентироваться в структурных слоях компонента. Такой подход помогает быстрее искать нужный элемент в папке проекта или в дизайн-системе, упрощает процесс его изоляции.

В этом туториале мы расскажем о системе сквозного наименования компонентов по принципам UDF на примере button. Подробнее о UDF ты можешь прочитать в книге Данилы Тимофеева.

Пример

Мы ведём структурную и последовательную работу проектирования компонентов, поэтому начинаем с проработки его дизайна. Для начала определяем какая функциональность планируется и по системе UDF выбираем префикс. Кнопка представляет из себя текстовую метку и её обводку. Внутри себя button не содержит каких-либо компонентов поэтому мы называем её А_Button.

Как только кнопка создана в Figma или любом другом инструменте для проектирования интерфейсов, мы можем переносить её в папку проекта, сохраняя сквозной нейминг.

В папке проекта мы создаём два файла, html и css, называем их соответственно. Затем создаём кнопку с классом A_Button. Вот так выглядит структура файлов.

<a class=”A_Button” href="#">Подписаться</a>

Затем задаём стили для кнопки с классом A_Button.

.A_Button {
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #B7FCFC;
  cursor: pointer;
  user-select: none;
}

Получаем следующий результат в виде кнопки.

Заключение

Этот принцип помогает нам структурировать компоненты и быстро их находить. Это особенно важно, когда проектирование компонентов ведётся изолированно. Подробнее о принципе изоляции ты можешь прочитать в этом уроке Проектирование в изоляции.

Компоненты

Продолжи изучать туториалы с новыми знаниями о принципе структурного наименования компонентов по UDF.