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

Дизайн-системы — это в простейшем случае многоразовые компоненты пользовательского интерфейса с четкими инструкциями по эксплуатации, которые совместно используются дизайнерами и разработчиками. Все знают кубики LEGO. Из кубиков LEGO можно собрать множество вещей. Дизайн-система похожа на встроенные объекты LEGO. Например, вы хотите построить машину, а некоторые из ваших друзей уже построили какую-то машину и предлагают ее бесплатно или за определенную плату. На этом этапе вам нужно решить, соответствует ли уже готовый автомобиль вашим ожиданиям или вы хотите построить его сами, как хотите!

1 этап – исследование и проектирование

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

2-й шаг — создание структуры

Когда проекты были готовы, мы были готовы создать дизайн-систему.Конечно, мы исследовали другие библиотеки дизайн-систем, такие как IBM’s Carbon или Google Material UI. Мы решили двигаться вперед с принципом атомарного дизайна. Об этом есть очень хороший ресурс здесь.

3-й шаг — создание сборника рассказов

Мы решили хранить наши атомарные компоненты в отдельном репозитории. И это должен был быть пакет npm, который мы могли бы опубликовать и использовать в нашем основном приложении, установив его как зависимость. Дизайн-система также требует документации, руководств по компонентам, шрифтам, значкам и цветовой палитре. Для этого существует встроенное приложение под названием Storybook. Большинство дизайн-систем используют Storybook. Для запуска сборника рассказов вы можете следовать этому простому руководству, чтобы создать его.

Storybook — это инструмент с открытым исходным кодом для изолированного создания компонентов пользовательского интерфейса и страниц. Он упрощает разработку, тестирование и документирование пользовательского интерфейса.

Здесь я расскажу о нашей структуре.

  • Под assets лежат наши шрифты и спрайт.
  • Под componentsлежатнашиатомарные компоненты.
  • Под storybook / stories, документацией и элементами управления находятся компоненты. Больше историй можно прочитать здесь.
  • И, наконец, под index.js в основном происходит волшебство. Он регистрирует каждый компонент среди компонентов, которые можно импортировать отдельно путем реструктуризации.

index.js

С этой конфигурацией мы можем легко использовать наши атомарные компоненты в нашем основном приложении. Конечно, мы сначала установили наш пакет.

npm install @useinsider-design-system

Затем;

Итак, я показал, как мы создали наши атомарные компоненты, и пример их использования в нашем основном приложении.

Я много говорил о части javascript, теперь пришло время для стилизации 🥁🥁

Мы решили создать свои собственные классы, чтобы предоставить почти все стили, которые мы создали в нашем руководстве по стилю. Это также помогло нам не писать никаких пользовательских стилей в компонентах Vue. До этого все компоненты были стилизованы. Это было действительно грязно.

Также руководство по стилю — это, например, наш справочник;

Определенные интервалы в руководстве равны 4px/8px/16px… , поэтому, когда наши дизайнеры разрабатывают что-то новое, они не могут сказать

‘Эй, йоу! эта кнопка margin-leftдолжна быть 7px и margin-right должна быть 13.5px’.

Так что есть набор правил, которым должен следовать каждый.

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

$display:
  "n" none,
  "i" inline,
  "i-b" inline-block,
  "b" block,
  "t" table,
  "t-c" table-cell,
  "t-r" table-row,
  "f" flex,
  "i-f" inline-flex,
  "g" grid,
  "i-g" inline-grid;

@each $shorthands, $prop in $display {
  .d-#{$shorthands} {
    display: $prop;
  }
}

Если мы используем d-n, это приведет к display: none; на странице. С помощью этого метода мы попытались охватить наиболее часто используемые стили.

Итак, если мы используем классы, показанные ниже, это приведет к;

display: grid;
background-color: #ffffff;
cursor: pointer;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;

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

Например, мы создали эти суффиксы, соответствующие их именам; мы объединили суффиксы margin и padding в _spacing.scss. То же самое касается _colors.scss , _display.scss и так далее… И, наконец, мы импортировали все эти SCSS в один файл insiderDesignSystem.scss и импортировали в файл index.js, на который ссылались выше.

Таким образом, обновленная версия будет выглядеть примерно так;

// Global and component styles
import '../design-tokens/insiderDesignSystem.scss';
// import components
import Example from './components/Example/Example.vue'; 
// exports components
export { Example };

И в основной репозиторий, чтобы зарегистрировать его глобально, мы импортировали файл CSS, который входит в комплект из Webpack, как показано ниже.

import Vue from 'vue';
import '@useinsider-design-system/insiderDesignSystem.css';

Большое спасибо, что нашли время прочитать статью! В следующей части мы поговорим о компонентах, находящихся не на атомарном уровне, и о схеме связи между ними!