Дизайн-система Атомаро для команд

Создавай потрясающие дизайн-системы легко!

Ускорь себя, компанию и продукт! Дизайн и разработка теперь быстрее и круче, чем когда-либо

компоненты
Атомаро — это сервис и конструктор для создания дизайн-систем для любой  задачи
Декор

Какие задачи решает

  • —  Повышает перфоманс команды
  • —  Разработка и дизайн быстрее, эффективнее и в комфорте
  • —  Снижает сроки и стоимость разработки
  • —  Поднимает качество дизайна в компании
  • —  Создание дизайн-системы для компании. Теперь это просто

Для кого

Теги и аватары
Декор

Сферы применения

  • B2B. Высоконагруженные интерфейсы и системы
  • B2G. Проекты для правительства и министерств
  • B2O. Биллинг, личные кабинеты
  • B2C. Массовый пользовательский сектор

Что можно реализовать

  • Личные кабинеты
  • Дизайн-систему для компании
  • Корпоративные порталы
  • Сквозная авторизация
  • CRM-системы
  • Web-продукты
  • Базы данных
  • Админ-системы
  • Аналитические системы и многие другие
  • Финансовые системы и биллинг
  • Онлайн-образование и курсы
  • Вики и документация
  • Сайты-визитки
  • E-commerce
  • Лендинг и посадочные страницы
Декор

Сервис

Атомаро — это не просто дизайн-система, это сервис из инструментов, обучающих материалов, утилит, и техподдержки, которые помогают бизнесу в создании цифровых продуктов

  • Figma
  • React
  • Конструктор и Токены
  • Паттерны
  • Документация
  • Поддержка и обновления
  • Про дизайн-системы
О пользе для бизнеса

Проектируй потрясающие проекты ещё Иконка быстрее

Мы уже поработали за вас и сделали красивый дизайн и производительные надежные компоненты. Не тратьте своё время, сфокусируйтесь на пользе

Figma библиотека

Создавайте красивые, согласованные пользовательские интерфейсы. Компоненты, иконки, переменные — всё синхронизировано с кодом.
Картинка Figma библиотека

React библиотека

Одна из наших главных целей — предоставить наилучшие возможности для разработчиков. Меньше рутины на вёрстку, больше внимания на логику проекта
Картинка React библиотека

Документация и гайды

Подробная документация и примеры для разработчиков, дизайн-гайды и подсказки для дизайнеров
Картинка документация и гайды

Дизайн-токены в основе, вау!Изображение лейблов

Рабочий процесс на новом уровне. С легкостью создавайте свой уникальный интерфейс, работайте с мультибрендовыми продуктами

Изображение токенов

Продуманная архитектура для простоты настройки

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

Гибкие возможности с понятной семантикой

Атомаро помогает принять верное дизайн-решение в различных контекстах, при этом оставляет простор для выражения.

Семантические цветовые палитры позволяют задавать тонкие оттенки и яркие контрасты, при этом понятно организованны и не избыточны. Тёмная тема генерится автоматически!

Изображение палитры токенов

Синхронизация дизайна и кода на раз-два

Настрой тему в Figma-плагине Token Studio и Атомаро сгенерирует и обновит тему на проде. Предпочитаешь работать напрямую с кодом? Измени JSON с токенами и примени его на дизайн, все компоненты обновятся
CSS-переменные
Стрелка влево
Токены в JSON формате
Стрелка влево вправо
Токены в Tokens Studio
Стрелка вправо
Переменные и стили в Figma

Разумный баланс функциональности и Иконка гибкости

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

Изображение баланса в компонентах Атомаро
Декор
Оптимальные возможности

Архитектура и структура API создана опытными разработчиками и дизайнерами для решения большинства типовых задач

Декор
Расширяй для своих задач

Для большей гибкости предусмотрены контейнеры, позволяющие расширить возможности компонента. В коде это React node, в Figma передовая система слотов (не требует детача!)

Декор
Проверено в работе

Все компоненты тщательно протестированы и описаны юнит-тестами. Атомаро уже используется в сотнях проектов

Библиотека

FigmaReact

Библиотека

FigmaReact

Качественный UI-kit

Настраиваемые компоненты со всеми необходимыми состояниями и пропсами
Картинка Качественный UI-kit

Консистентный UI

Тщательно подобранные цветовые палитры, типографика и согласованный стиль всех элементов
Картинка Консистентный UI

1000+ иконок

Pixel Perfect, 24×24 и 16×16, отсортированы по категориям. Подписаны тегами для быстрого поиска
Картинка 1000+ иконок

Variants и Properties

Булевы и текстовые свойства, Instance Swap и Nested Instances для скорости и удобной работы
Картинка Variants и Properties

Передовые техники

Никакого мусора в слоях, компоненты собраны разумно и используют нововведения от Figma
Картинка Передовые техники

Дизайн-гайды

Подробный онлайн справочник с рекомендацими, примерами и лучшими UX практиками
Картинка Дизайн-гайды

Полноценная дизайн-система

Все части системы реализованы в дизайне и коде. Используй Атомаро для моментального запуска продукта. Или собери свою дизайн-систему
Картинка Полноценная дизайн-система

Autolayout 5.0

Отзывчивые компоненты для корректной вёрстки экранов любой сложности
Картинка [object Object]

Дизайн-токены и variables

Базовый, семантический и компонентный слои токенов. Простая настройка и полный контроль над темой. Синхронизация темы с кодом
Картинк�а [object Object]

Тёмный режим из коробки

Переключайте режим без плагинов благодаря variables и автоматической генерации тёмного режима
Картинка [object Object]

Система слотов

Контейнеры для пробрасывания любого контента в компонент. Расширяйте компоненты без детача
Картинка Система слотов

Постоянное развитие и поддержка

Атомаро растёт и улучшается. Мы добавляем новые функции и инструменты, развиваем продукт
Картинка [object Object]

Качественный UI-kit

Настраиваемые компоненты со всеми необходимыми состояниями и пропсами
Картинка Качественный UI-kit

Консистентный UI

Тщательно подобранные цветовые палитры, типографика и согласованный стиль всех элементов
Картинка Консистентный UI

1000+ иконок

Pixel Perfect, 24×24 и 16×16, отсортированы по категориям. Подписаны тегами для быстрого поиска
Картинка 1000+ иконок

Variants и Properties

Булевы и текстовые свойства, Instance Swap и Nested Instances для скорости и удобной работы
Картинка Variants и Properties

Передовые техники

Никакого мусора в слоях, компоненты собраны разумно и используют нововведения от Figma
Картинка Передовые техники

Дизайн-гайды

Подробный онлайн справочник с рекомендацими, примерами и лучшими UX практиками
Картинка Дизайн-гайды

Полноценная дизайн-система

Все части системы реализованы в дизайне и коде. Используй Атомаро для моментального запуска продукта. Или собери свою дизайн-систему
Картинка Полноценная дизайн-система

Autolayout 5.0

Отзывчивые компоненты для корректной вёрстки экранов любой сложности
Картинка [object Object]

Дизайн-токены и variables

Базовый, семантический и компонентный слои токенов. Простая настройка и полный контроль над темой. Синхронизация темы с кодом
Картинка [object Object]

Тёмный режим из коробки

Переключайте режим без плагинов благодаря variables и автоматической генерации тёмного режима
Картинка [object Object]

Система слотов

Контейнеры для пробрасывания любого контента в компонент. Расширяйте компоненты без детача
Картинка Система слотов

Постоянное развитие и поддержка

Атомаро растёт и улучшается. Мы добавляем новые функции и инструменты, развиваем продукт
Картинка [object Object]
Библиотеки в Community

Атомаро Про+

Продвинутые паттерны и компоненты для сложных систем с большим объемом данных

Table Grid — компонент для табличного представления данных

Широкие возможности для работы с большими объемами данных в виде таблиц. Основа для создания CRM-систем:

Сортировка и фильтрыРесайз и перемещение колонокМногоуровневая вложенностьВыбор строк, пагинация, плотность
Изображение компонента таблицы

Tree — иерархическое дерево

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

Многоуровневая вложенностьРазмеры small и mediumAccordion treeDirectory tree
Изображение компонента дерева

Атомаро помогает бизнесу поднять перфоманс разработки и снизить TTM

Опыт «Ростелеком Информационные Технологии»

мем

+30%

К скорости разработки веб-проектов (Time To Market)
мем

на 33%

снижение потерь времени фронтендеров на рутину
мем

на 60%

в среднем ускоряется проектирование и дизайн
Декор

Реализация проекта без Атомаро

Аналитика
Аналитика
Проектирование сценариев
Проектирование сценариев
UI-UX
UI-UX
Разработка и тестирование
Разработка и тестирование
Релиз
Релиз
Поддержка и развитие
Поддержка и развитие

Реализация проекта с Атомаро

Аналитика
Аналитика
Проектирование сценариев
Проектирование сценариев
UI-UX
UI-UX
Разработка и тестирование
Разработка и тестирование
Релиз
Релиз
Поддержка и развитие
Поддержка и развитие
Подробнее о пользе для бизнеса

Тарифы

Атомаро ПроБесплатно!

Библиотеки с профессиональным набором компонентов

  • —  Индивидуальная лицензия
  • —  Компоненты в Figma
  • —  Компоненты в React
  • —  Библиотека иконок
  • —  Документация
  • —  Генерация тем
  • —  Figma-CSS дизайн-токены
  • — Неограниченное количество проектов

Атомаро Про+50 000 ₽ на год

Продвинутые профессиональные компоненты для сложных систем

  • —  Командная лицензия на коммерческое использование
  • —  Включает Атомаро Про
  • —  Компоненты в Figma
  • —  Компоненты в React
  • —  Библиотека иконок
  • —  Документация
  • —  Генерация тем
  • —  Figma-CSS дизайн-токены
  • —  Неограниченное количество проектов
  • —  Супер-паттерны в Figma (Table, Tree)

Атомаро Энтерпрайз

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

  • —  Лицензия для компании на коммерческое использование
  • —  Включает Атомаро Про+
  • —  Компоненты в Figma
  • —  Компоненты в React
  • —  Библиотека иконок
  • —  Документация
  • —  Генерация тем
  • —  Figma-CSS дизайн-токены
  • —  Супер-паттерны в Figma и React (Table, Tree)
  • —  Консультирование и аудит
  • —  Сетап команды
  • —  Поддержка