Использование дизайн-системы
Установите библиотеку в основное приложение, примените провайдер темы, удалите неиспользуемые компоненты с помощью tree-shaking и поддерживайте актуальность версии
«Использование дизайн-системы» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Установка и настройка
Добавьте дизайн-систему в зависимости. Некоторым библиотекам требуется дополнительная настройка: провайдер, импорт CSS и загрузка шрифтов.
npm install @yourorg/design-system
// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';
<DesignSystemProvider theme="light">
<App />
</DesignSystemProvider>Провайдер темы
Большинство дизайн-систем предоставляет провайдер верхнего уровня для темы (светлой или тёмной), локали и общего контекста. Оберните им приложение один раз.
<DesignSystemProvider
theme={isDarkMode ? darkTheme : lightTheme}
locale="en"
>
<App />
</DesignSystemProvider>Импорт компонентов
Импортируйте только необходимое — в сочетании с удалением неиспользуемого кода это гарантирует, что в поставляемую сборку попадут только используемые компоненты.
import { Button, Card, TextField } from '@yourorg/design-system';
function LoginForm() {
return (
<Card>
<TextField label="Email" type="email" />
<TextField label="Password" type="password" />
<Button variant="primary">Sign In</Button>
</Card>
);
}Импорт из подмодулей
Некоторые библиотеки поддерживают импорт из подмодулей для большей ясности и уменьшения размера сборки.
// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card from '@yourorg/design-system/Card';
// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';Советы по удалению неиспользуемого кода
Удаление неиспользуемого кода исключает неиспользуемые экспорты во время сборки. Требуются: сборка ESM, sideEffects: false в package.json библиотеки и именованные импорты в вашем коде. Проверяйте результат с помощью анализатора сборки.
Настройка темы
Переопределяйте токены темы в соответствии с вашим брендом — не создавая отдельную копию библиотеки.
import { defaultTheme } from '@yourorg/design-system';
const customTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: '#ff5733'
}
};
<DesignSystemProvider theme={customTheme}>
<App />
</DesignSystemProvider>Расширение компонентов
Нужна кнопка с небольшим отличием? Комбинируйте компоненты, а не создавайте отдельную копию.
import { Button as DSButton } from '@yourorg/design-system';
function IconButton({ icon, ...props }) {
return (
<DSButton {...props}>
<Icon name={icon} />
{props.children}
</DSButton>
);
}Чтение журнала изменений перед обновлением
Всегда читайте CHANGELOG перед обновлением версий MAJOR. Ищите несовместимые изменения, кодомоды для миграции и рекомендуемые новые API.
Кодомоды для крупных обновлений
Хорошие библиотеки поставляются с кодомодами (скриптами jscodeshift), которые автоматизируют миграцию при несовместимых изменениях.
npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIsФиксация версии и каретка
"^1.4.2" разрешает обновления 1.x.y — это рискованно, если библиотека нарушает правила SemVer. "1.4.2" точно фиксирует версию — это самый безопасный вариант, но обновлять её придётся вручную. Renovate и Dependabot помогают автоматизировать еженедельные обновления.
Сообщение о проблемах разработчикам
Нашли ошибку? Сообщите о ней, приложив минимальный воспроизводимый пример. Нужна новая функция? Сначала начните обсуждение. Ваш вклад помогает улучшить дизайн-систему для всех.
Избегание переопределений стилей
Не обращайтесь напрямую к внутренним компонентам дизайн-системы с помощью !important или селекторов потомков. Используйте общедоступный API темизации. Ненадёжные переопределения перестают работать после следующего обновления.
Быстрая проверка
Если дизайн-система использует ESM и именованные экспорты, как лучше всего подключить только нужные Вам компоненты?
Повторение: использование дизайн-системы
Установите библиотеку и оберните приложение в DesignSystemProvider с темой. Используйте именованные импорты ESM для исключения неиспользуемого кода из сборки. Переопределяйте токены темы под свой бренд. Комбинируйте компоненты, а не создавайте отдельную копию. Читайте CHANGELOG перед обновлениями MAJOR; запускайте кодомоды, если они предоставлены. Внимательно выбирайте фиксацию версии или каретку. Сообщайте об ошибках и отправляйте запросы на включение разработчикам. Не пытайтесь обходить общедоступный API с помощью !important.
Часто задаваемые вопросы
Урок «Использование дизайн-системы» бесплатный?
Да — полный текст урока «Использование дизайн-системы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Использование дизайн-системы»?
Установите библиотеку в основное приложение, примените провайдер темы, удалите неиспользуемые компоненты с помощью tree-shaking и поддерживайте актуальность версии Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Использование дизайн-системы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Storybook: истории, элементы управления и документация
- Токены дизайна со Style Dictionary
- Версионирование и публикация в npm
- Использование дизайн-системы