Редактор интерфейсов онлайн
Инструмент продуктового дизайна целиком: от каркаса экрана до кода, который получит разработчик. Не «рисовалка картинок», а среда, где макет остаётся живым документом.
Полный цикл работы над продуктом
Начинается всё с каркаса: фреймы под нужные разрешения, сетка, основные блоки. Auto Layout собирает содержимое так, что при смене текста или добавлении элемента экран перестраивается сам — не приходится вручную двигать всё, что ниже.
Дальше появляется дизайн-система. Повторяющиеся блоки становятся компонентами, разные состояния — вариантами, цвета и отступы переезжают в переменные-токены. Правка мастера или токена расходится по всем экранам сразу, поэтому смена акцентного цвета перестаёт быть днём работы.
Готовые экраны связываются в прототип и показываются заказчику по ссылке в режиме презентации — без установки чего-либо на его стороне. Комментарии он оставляет прямо на элементах, а не в переписке отдельным списком.
Финал — передача разработчику. Dev Mode показывает размеры, отступы и свойства слоёв и отдаёт готовый CSS, React, HTML или Tailwind. Макет и код не расходятся, потому что код берётся из тех же слоёв.
Что помогает в ежедневной работе
Состояния и варианты
Кнопка с hover, disabled и loading — один компонент, а не пять копий.
Умные направляющие
Привязки к граням и центрам соседей, измерение расстояний по Alt.
Токены
Цвета, отступы и типографика в переменных с режимами светлой и тёмной темы.
Командная работа
Курсоры, комментарии, история версий, откат.
Command Palette
Ctrl+K — любое действие с клавиатуры.
Экспорт ассетов
Настройки экспорта на самом элементе: масштаб, формат, суффикс.
Частые вопросы
Подходит для мобильных приложений?
Да. Фреймы под любые разрешения, компоненты и прототипы работают одинаково для веба и мобильных.
Есть ли дизайн-система?
Да: компоненты, варианты и переменные-токены с режимами тем.
Как передать макет разработчику?
Dev Mode: размеры, свойства слоёв и готовый CSS, React, HTML или Tailwind.
Смотрите также
Аналог Figma: российский редактор интерфейсов в браузере
Rugma повторяет рабочий процесс Figma, но открывается из России без VPN и не требует установки.
Графический редактор онлайн
Полноценный графический редактор, который открывается по ссылке.
Редактор онлайн бесплатно
Бесплатный тариф Rugma — это весь редактор, а не демо-режим.
Графический редактор в браузере
Rugma работает во вкладке браузера.
Векторный редактор онлайн
Векторная графика в браузере: кривые Безье, булевы операции над фигурами, точная работа с обводками.
Откройте редактор прямо сейчас
Бесплатно, без установки и без VPN. Первый проект — за минуту.