Одним из моих любимых выступлений на ReactFest London была презентация Сиддхарта Кшетрапала о дизайн-системах. Когда он объяснил, что дизайн-системы могут дать сбой из-за недопонимания между проектными дисциплинами, я вспомнил аналогичный опыт с дизайнером в проекте React. Мы обсуждали несоответствие вертикального ритма между его дизайном и интерфейсной сборкой приложения. Чтобы проиллюстрировать свою точку зрения, он открыл дизайн в Sketch и включил вид сетка.

Сетка Sketch — это визуальное наложение, позволяющее дизайнерам создавать макет с высокой точностью. Я предполагал, что постоянное расстояние между компонентами приведет к последовательному вертикальному ритму. Однако демонстрация показала, что, несмотря на то, что компоненты былиравномерно распределены по странице, их содержание было разным.

Поскольку приложение было разработано с наложением сетки, я сделал аналогичную обработку для внешнего интерфейса. В компонент View была добавлена ​​опора для принятия одного из трех вариантов. Если свойство объявлено, класс условно добавляется к списку классов компонента на основе значения свойства.

Функция повторяющийся линейный градиент генерирует линии сетки и состоит из двух секций; прозрачный интервал и цветная линия сетки. Именованные аргументы позволяют настраивать цвет,ширину,и интервалкаждой строки, со значениями по умолчанию, которые служат запасным вариантом.

Теперь, когда наложение наложено, мы можем точно сравнить вертикальный ритм нашего дизайна Sketch с производственной сборкой и немного приблизиться к дизайну с идеальным пикселем (если это ваша сумка). Чтобы продемонстрировать результат, я быстро добавил оверлей на личный сайт.

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