Дизайн-система Plasma

Обновлено 22 ноября 2023

Plasma — это дизайн-система для создания смартапов Canvas App, которые будут выглядеть как часть экосистемы виртуального ассистента Салют. Plasma основывается на React и позволяет упростить разработку внешнего вида приложений.

Дизайн-система включает в себя следующие пакеты:

• plasma-tokens — содержит набор дизайн-токенов, типографических и цветовых констант. Токены представлены в виде JS-переменных и переменных CSS.
• ui — содержит набор готовых React-компонентов для создания Canvas App. Вы можете ознакомиться с доступными компонентами в документации и на демонстрационном стенде. Перед использованием компонентов рекомендуем изучить пакет plasma-tokens.

Быстрый старт

Чтобы начать работу с Plasma:

1. Создайте основу приложения с помощью команды Create React App:

   npx create-react-app my-app

2. Перейдите в приложение:

   cd my-app

3. Установите дизайн-систему с зависимостью на styled-components:

   npm i --save styled-components @salutejs/plasma-ui 
   @salutejs/plasma-tokens @salutejs/plasma-icons

4. Создайте приложение в файле ./src/App.js:

   import React from 'react';
   
   import { Button } from '@salutejs/plasma-ui/components/Button/Button';
   
   function App() {
       return (
           <div className="App">
               <p>
                   <Button view="primary">Hello Plasma</Button>
               </p>
           </div>
       );
   }
   
   export default App;

Подробную информацию об установке и использовании дизайн-системы Plasma вы найдете по ссылке.