Системы проектирования для разработчиков

Amney · 30.08.2021

Вступление

Современная интерфейсная разработка более сложной, чем раньше. Разработчикам приходится думать о создании пользовательских интерфейсов, которые работают и адаптируются к различным устройствам и размерам экрана. Это привело к тому, что интерфейсы стали восприниматься не как страница, а скорее как комбинация различных компонентов. Эти компоненты, из которых состоят пользовательские интерфейсы, называются шаблонами проектирования (pattern, паттерн). Шаблоны дизайна - это многоразовые элементы дизайна. С появлением веб-фреймворков на основе компонентов, таких как React, Vue и Angular, это привело к увеличению модульности с точки зрения понимания пользовательских интерфейсов.

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

Зачем проектировать системы?

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

Что такое маркеры (токены) проектирования?

Маркеры (токены) проектирования - это набор переменных, используемых для различных компонентов и шаблонов системы проектирования. В основном это имена переменных, присвоенные значениям дизайна, таким как типография, цвет, интервал и т.д. Они важны, потому что помогают поддерживать согласованность между различными платформами продукта. Маркеры дизайна могут помочь фронтенд - разработчикам в присвоении имен переменным CSS. Ответственность за согласование определения маркеров дизайна лежит как на разработчиках, так и на дизайнерах. Ниже приведен скриншот из системы проектирования Adobe Spectrum, на котором показаны их маркеры дизайна для интервалов и их соответствующие значения.

Процесс построения системы проектирования

Существуют различные современные инструменты для построения системы проектирования. Для дизайнеров они включают Adobe XD, Figma, Invision и Sketch. После проектирования система доступна разработчикам. Разработчики должны создать библиотеку компонентов на основе этих систем проектирования. Такие инструменты, как Fractal, Storybook, Bit.dev и многие другие, предоставляют современную систему для создания библиотек компонентов. Мой личный фаворит - storybook, потому что он с открытым исходным кодом и работает с современными интерфейсными библиотеками, такими как React, Vue и Angular, без особых настроек. Это также обеспечивает простой способ документирования компонентов в библиотеке компонентов. В остальной части статьи показано, как storybook можно использовать для создания компонентов React.

Создание библиотек компонентов с помощью Storybook

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

Начало работы со Storybook в React

Storybook можно легко использовать для создания компонентов React. Это упрощает процесс, поскольку компоненты могут быть созданы, протестированы и задокументированы изолированно перед интеграцией с приложением react. Чтобы добавить storybook в react, все, что нам нужно сделать, это использовать интерфейс командной строки storybook для инициализации storybook в react. В корневой папке приложения React выполните команду ниже:

npx sb init

Выполнив команду выше, интерфейс командной строки storybook инициализирует новый проект storybook в приложении react. Он создает папку stories в каталоге src приложения. storybook читает каждый файл, заканчивающийся на .jsx или .tsx в качестве компонента. Он также создает шаблон storybook по умолчанию в приложении react. Шаблон по умолчанию состоит из трех компонентов: Button, Header и Page. Он также генерирует *.stories.js файл для каждого компонента.

Эти файлы называются историей. История представляет отображаемое состояние компонента. Компонент обычно имеет несколько историй в зависимости от текущего состояния визуализации. Чтобы просмотреть компоненты в storybook, мы можем выполнить команду ниже:

Код:

npm run storybook

При этом сервер storybook запускается на порту по умолчанию 6006.

Мы можем видеть все компоненты в папке "Stories" на боковой панели. Под каждым компонентом есть подразделы, эти подразделы являются историями, которые определяют различное состояние, которое могут иметь компоненты.

Написание истории

Stories - это в основном компоненты React, экспортируемые из файла, заканчивающегося на .stories.js или .stories.ts. Компонент может иметь несколько историй в зависимости от того, в каком состоянии мы хотим, чтобы компонент находился.
История экспортирует объект по умолчанию, который содержит заголовок истории, соответствующий компонент и аргументы компонента. Состояние компонента контролируется аргументами. В дополнение к экспорту объекта по умолчанию, история должна также экспортировать различные истории, которые должен иметь компонент. Истории обычно привязываются к компоненту, и свойство args устанавливается для каждой из историй. Ниже приведен пример историй для компонента кнопки:

JavaScript:

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Из приведенного выше компонента каждый из экспортируемых объектов (Primary, Large, Secondary и Small) представляет собой истории. Каждый из них имеет свойство args, ограниченное шаблоном (компонентом). Экспорт по умолчанию содержит название компонента, сам компонент и типы аргументов. Значением типа аргумента можно управлять из приложения "Storybook" в зависимости от типа.

Существуют и другие концепции storybook, такие как параметры, дополнения и декораторы, которые выходят за рамки этой статьи.

Стоит так же почитать:

Everything you need to know about Design Systems

→ Pour la version en Français, c’est par ici

uxdesign.cc

Introduction to Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular

storybook.js.org

Системы проектирования для разработчиков

Amney

Everything you need to know about Design Systems

Introduction to Storybook