consta.design Open in urlscan Pro
84.201.177.84  Public Scan

Form analysis
0 forms found in the DOM

Text Content

You need to enable JavaScript to run this app.
 * Компоненты
 * Figma
 * GitHub
 * Новости в Telegram

 * Компоненты
 * Figma
 * GitHub
 * Новости в Telegram


ДИЗАЙН‑СИСТЕМА ДЛЯ БЫСТРОЙ РАЗРАБОТКИ ИНТЕРФЕЙСОВ

Компоненты


ЧТО ТАКОЕ ДИЗАЙН‑СИСТЕМА?

Это библиотеки компонентов и понятные правила их взаимодействия — всё, что нужно
дизайнерам и разработчикам для создания интерфейсов.


ВСЕМ-ВСЕМ

Витрина компонентов с подробной документацией и правилами использования.

Смотреть


ДИЗАЙНЕРАМ

Правила использования и библиотека компонентов в Figma Community.

Смотреть


РАЗРАБОТЧИКАМ

Репозитории библиотек на GitHub.

Смотреть

Дизайн-систему можно использовать бесплатно, она распространяется на условиях
открытой лицензии MIT.


ЗАЧЕМ ВАМ ДИЗАЙН‑СИСТЕМА?

Запускать продукты быстрее и дешевле. Часть работы по созданию интерфейса уже
сделана — в рамках нашей дизайн‑системы.

Просто проверять гипотезы. Вы сможете собрать прототип интерфейса, показать
пользователям и проверить, что в интерфейсе всё понятно — до начала разработки.

Только лучшие практики. Мы проверяем работу компонентов в реальных продуктах
нашей компании и выбираем наилучшие варианты. Постоянно добавляем в библиотеку
новые компоненты и улучшаем то, что есть.

Довольные пользователи. Проще осваивать новое, когда продукты компании выглядят
похоже и построены по сходным принципам. А вам — меньше доработок и затрат
на поддержку продукта.


ГИБКАЯ ТЕМАТИЗАЦИЯ

С библиотекой Consta можно мгновенно поменять внешний вид проекта — цвета,
шрифты, отступы и не только. Просто нажмите на кнопку и посмотрите, как меняется
эта страница.

Статус


ЗАГОЛОВОК

Эта карточка — просто абстрактный пример интерфейса

Выбери меня

Нет, меня
м
кг
Нажми на кнопку

Пресеты

КомпанияВа-банкАлюмикель

Цветовая тема



Шрифт

Промо

Системный

Размер текста

Крупный

Средний

Пространство

Просторнее

Теснее


ИСПОЛЬЗУЙТЕ ГОТОВЫЕ КОМПОНЕНТЫ

Основа, из которой легко построить интерфейс — для любых задач. Большой выбор,
много вариантов, можно менять и дорабатывать. Посмотреть, как выглядят и
работают компоненты дизайн-системы, можно в нашей библиотеке.

СкачатьРедактировать
Люди

Активы

Экология
Читать далееЗапустить расчётПродолжить
Выберите город
КомментарииСкачатьРедактировать
Люди

Активы

Экология
Читать далееЗапустить расчётПродолжить
Выберите город
КомментарииСкачатьРедактировать
Люди

Активы

Экология
Читать далееЗапустить расчётПродолжить
Выберите город
Комментарии
Выпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Выберите напиток
АлюминийЖелезоМедь
об/мин
ПроверитьВыпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Выберите напиток
АлюминийЖелезоМедь
об/мин
ПроверитьВыпустить кракена

СУ
+23%
-15%
Задержка
Принять изменения
ЭК
Эдуард Когнитивченко
Выберите напиток
АлюминийЖелезоМедь
об/мин
Проверить
Выберите город
Сегодня

Вчера

Неделя

Месяц
Нефть

Газ


ВойтиПолучать уведомленияВыбрать
Выберите город
Сегодня

Вчера

Неделя

Месяц
Нефть

Газ


ВойтиПолучать уведомленияВыбрать
Выберите город
Сегодня

Вчера

Неделя

Месяц
Нефть

Газ


ВойтиПолучать уведомленияВыбрать
Выберите город
Показывать статистику
СП
Серж Послоян
Netback

CAPEX

OPEX
В проектВ группу
Согласовано
ОК

Оценить
Выберите город
Показывать статистику
СП
Серж Послоян
Netback

CAPEX

OPEX
В проектВ группу
Согласовано
ОК

Оценить
Выберите город
Показывать статистику
СП
Серж Послоян
Netback

CAPEX

OPEX
В проектВ группу
Согласовано
ОК

Оценить
XS

S

M

L

XL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
Люди

Активы

Экология
XS

S

M

L

XL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
Люди

Активы

Экология
XS

S

M

L

XL



ГС
Ошибка
Отказать

ед.
₽
Сделайте выбор
КЦДОПОПоиск
Люди

Активы

Экология


ЧАСТЫЕ ВОПРОСЫ И РЕШЕНИЯ

Для каких задач подходит дизайн-система?

Для разработки пользовательских интерфейсов цифровых продуктов.

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

Это может быть продукт, который открывают на ноутбуке, офисном компьютере или
видео-стене.

Какие технологии использует дизайн-система?

Для разработки

React — JavaScript-библиотека для создания пользовательских интерфейсов

TypeScript — язык программирования для разработки веб-приложений, расширяющий
возможности JavaScript

PostCSS — автоматизирует рутинные операции в CSS с помощью расширений,
написанных на JavaScript

Для дизайна

Figma — инструмент для разработки интерфейсов и прототипирования

Это только для новых продуктов?

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

Можем ли мы использовать Consta, если у нас готовый продукт «из коробки»?

Это зависит от вашего проекта и от решения, которое вы используете. Есть два
варианта: создать свой веб-интерфейс для коробочного продукта или настроить то,
как он выглядит

Создать свой веб-интерфейс

Для некоторых готовых решений можно создать свой веб-интерфейс на дизайн-системе
Consta (например, у 1С, Bitrix и QlikSense есть API, который это позволяет). Это
большая задача, её стоит планировать, если у сервиса много пользователей, вам
очень важно качество пользовательского опыта и удобный интерфейс. Например, если
это дашборд или личный кабинет сотрудника в большой компании.

Настроить внешний вид

У других готовых решений настраивается интерфейс (например, у QlikView и
Terrasoft). В этом случае дизайн-систему не получится использовать полностью, но
на неё можно опираться при выборе шрифтов, цветов, формы контролов.

Как использовать дизайн-систему?

Это зависит от ваших задач и технологий. Есть несколько вариантов.

Посмотреть и сделать так же

Eсли по каким-то причинам наши наработки вы использовать не можете. Например,
разрабатываете мобильное приложение. В этом случае дизайн-систему можно
использовать как гайдлайн.

Использовать все возможности

Если вы запускаете веб-проект и готовы вести разработку на React, разработчики
могут подключить нашу библиотеку с элементами интерфейса. Если нет, дизайнеры
могут собрать макет интерфейса на основе шаблонов в Figma.

Дополнять и дорабатывать

Всё в открытом доступе. Вы можете посмотреть исходный код нашей библиотеки на
GitHub и предложить изменения.

А если мы работаем с подрядчиками?

Отлично, отправьте им ссылку на описание дизайн-системы. Все ресурсы публичные,
можно использовать и «внутри» компании, и «снаружи».

На каких условиях можно использовать дизайн-систему?

Дизайн-система распространяется бесплатно, на условиях открытой лицензии MIT.

Посмотреть все условия
Как принять участие в разработке?

Очень просто: дизайн-система в публичном репозитории на GitHub, вы можете
прислать заявку на изменения или даже сделать доработку.

Как это сделать
В какой момент её лучше подключать?

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

Как проходит разработка интерфейса с дизайн-системой?

Это зависит от вашего процесса разработки. Вот один из вариантов:

 1. Менеджер или заказчик ставит задачу на создание продукта
 2. Дизайнеры создают макет — из компонентов дизайн-системы, на основе наших
    шаблонов в Figma.
 3. Разработчики собирают интерфейс на основе макета — берут компоненты из npm
    пакета @consta/uikit, встраивают в свой проект, оживляют с помощью скриптов
    и подключают к бэкенду (например, к базе данных).
 4. Тестировщики проверяют, что всё работает (поведение кнопок, списков и других
    элементов из дизайн-системы проверять не нужно).

Готово, можно показывать продукт пользователям.

Где найти специалистов для работы над проектом?

Вы можете найти любых специалистов и даже всю команду на платформе Профессионалы
4.0. Разместите описание вашего проекта или задачи и ждите откликов. После сбора
команды П4.0 возьмут всю работу по заключению договора на себя. Если хотите
разрабатывать интерфейс на дизайн-системе Consta, обязательно напишите об этом в
описании проекта.


БЕРИТЕ И ПОЛЬЗУЙТЕСЬ

Витрина компонентов и документация

Посмотрите, как выглядят компоненты, как они меняются и прочитайте, где и когда
их лучше использовать.

Смотреть
Библиотека в Figma

Набор компонентов для создания макетов проекта в Figma Community. Отправьте эту
ссылку дизайнеру — он разберётся.

Смотреть
React-библиотека

Репозитории библиотек на React, TypeScript и PostCSS. Отправьте эту ссылку
фронтенд разработчику — он знает, что с ней делать.

Смотреть

Следите за обновлениями в Телеграм-канале.


ОСТАЛИСЬ ВОПРОСЫ?

Пишите нам в чате.

Репозиторий этой страницы