Руководство дизайнера
Полное описание всех инструментов, режимов и функций Rugma — дизайн-редактора без VPN.
Первые шаги
Откройте редактор по адресу
/editor. Для сохранения проектов нужна регистрация — она бесплатная.
Выберите инструмент на левой панели или нажмите горячую клавишу. Начните с R — прямоугольника.
Нарисуйте фигуру зажав мышь и потянув по холсту. Удерживайте Shift чтобы получить квадрат или круг.
Сохраните через Ctrl S. Жёлтая точка рядом с названием означает несохранённые изменения.
🗂Типы проектов
При создании нового проекта в личном кабинете выберите его тип — от этого зависит, с чего вы начнёте.
ℹ
Тип задаёт стартовую заготовку, но инструменты во всех типах одни и те же — вы не ограничены выбором. [скриншот: окно выбора типа проекта с тремя плитками]
🖥Интерфейс редактора
Редактор состоит из четырёх зон:
Топбар — сверху. Инструменты файла, переключатель режимов, название проекта, зум, экспорт.
Левая панель (инструменты) — 52px узкая колонка с иконками инструментов рисования.
Центр (холст) — рабочая область. Зум колесом мыши + Ctrl, панорама — зажатый пробел или средняя кнопка.
Левая панель (слои) — дерево всех элементов. Вкладки: Слои, Страницы, Компоненты, Переменные.
Правая панель (свойства) — параметры выделенного элемента: позиция, размер, заливка, типографика.
⌨Горячие клавиши
Инструменты
Рука (панорама)H или Пробел
Редактирование
Навигация
Сдвиг на 10pxShift + стрелки
Квадрат при рисованииShift + drag
Прямо в редакторе есть встроенная справка с поиском — не нужно держать в голове все инструменты и клавиши.
Нажмите F1 или кнопку «?» на панели — откроется окно справки.
Начните печатать в поле поиска — например «цвет», «кривая», «секция». Список инструментов отфильтруется по названию и описанию.
У каждого инструмента показаны иконка, горячая клавиша и что он делает. Esc — закрыть.
💡
Это самый быстрый способ вспомнить, чем отличаются инструменты и какие у них клавиши. [скриншот: окно справки с полем поиска и списком инструментов]
Инструмент Выделение V
Клик на элементе — выделение одного объекта.
Shift + клик — добавление к выделению.
Drag по пустому месту — выделение рамкой (лассо).
Двойной клик на тексте — режим редактирования текста.
Ручки по углам — масштабирование. Удерживайте Shift для сохранения пропорций.
Круглая ручка над элементом — поворот. Удерживайте Shift для шага 15°.
Инструмент Рука H
Панорамирование холста без риска случайно сдвинуть элементы. Также можно зажать Пробел в режиме выделения — временно переключится на руку.
TТекст
Нажмите T, кликните на холсте и начните вводить. Для многострочного текста тяните рамку перед вводом.
Шрифт — вводите название в правой панели. Используются системные шрифты + Onest, JetBrains Mono.
Размер, вес, выравнивание — управляются из правой панели при выделенном тексте.
Цвет текста — отдельный пикер в секции «Текст» правой панели.
Межстрочный интервал — параметр line-height в правой панели.
💡
Двойной клик на существующем тексте входит в режим редактирования. Esc — выход из редактирования.
Открыть раздел «Перо» отдельной страницей ↗
Инструмент P создаёт векторные кривые с точками Безье.
Клик — добавляет угловую точку (sharp corner).
Клик + тяга — добавляет плавную точку с касательными.
Клик на первую точку — замыкает контур.
Enter — завершает открытый путь без замыкания.
Esc — отменяет последнюю поставленную точку.
ℹ
При замыкании контур теперь по умолчанию прозрачный (без заливки) — как в Figma. Залить его можно вручную в секции «Заливка» правой панели или инструментом «Заливка» (ведро).
Любой контур, нарисованный пером, можно перенастроить по точкам — двигать узлы и изгибать кривые Безье.
Двойной клик по контуру — вход в режим редактирования узлов (либо выделите путь и нажмите Enter, либо кнопку «✎ Редактировать узлы» в правой панели).
Тяните узел — перемещает точку. Тяните ручку у плавной точки — меняет кривизну сегментов Безье.
Клик по сегменту — добавляет новую точку в этом месте.
Delete — удаляет выбранный узел.
Esc или Enter — выход из режима узлов.
💡
Подсказка с управлением появляется внизу экрана сразу при входе в режим. [скриншот: контур в режиме узлов с подсвеченными точками и ручками]
Фрейм (F) — это контейнер с фиксированными размерами. Используйте для экранов, карточек, секций.
Пресеты — iPhone 14, iPad, Desktop 1440 и другие можно выбрать в правой панели при создании фрейма.
Clip content — содержимое фрейма обрезается по его границам.
Auto Layout — фрейм может автоматически выстраивать дочерние элементы (см. ниже).
Прототипирование — фреймы являются «экранами» в режиме Прототип.
📐Стандартные размеры фреймов
Чтобы не подбирать размеры вручную, при создании фрейма возьмите готовый размер устройства.
Выберите инструмент Фрейм (F).
В правой панели откройте список пресетов и выберите нужный — фрейм создастся с точным размером.
Либо просто нарисуйте рамку нужного размера, либо кликните по холсту для дефолтного фрейма.
Телефоны — iPhone (SE, 13–17 всех размеров), Android.
Планшеты — iPad mini / Air / Pro.
Десктоп — 1440, 1280, 1920 и другие.
Часы — Apple Watch.
Печать — A4 / A5 (в пикселях ≈72 dpi).
Соцсети — обложки и посты под распространённые форматы.
💡
Свой размер всегда можно задать вручную в полях ширины/высоты правой панели. [скриншот: список пресетов при выбранном инструменте «Фрейм»]
Что это. Секция — контейнер для группировки нескольких фреймов в логические «разделы» (например «Онбординг», «Главные экраны», «Настройки»). Удобно структурировать большой макет.
Выберите инструмент Секция (Shift+S).
Обведите рамкой нужные фреймы — все, чьи границы попали внутрь, станут содержимым секции (либо кликните по холсту для дефолтной секции).
Двигайте секцию за заголовок — фреймы внутри перемещаются вместе с ней.
ℹ
Чем секция отличается от фрейма: секция не обрезает содержимое по границам и предназначена для группировки фреймов, а не для рисования внутри неё интерфейса. [скриншот: несколько фреймов внутри одной секции]
🏷Статусы фреймов
Зачем. Статус на фрейме помогает команде видеть, какие экраны готовы, а какие ещё в работе — прямо на холсте.
Кликните по фрейму правой кнопкой мыши — откроется контекстное меню.
Выберите статус: Готово (зелёный), В работе (оранжевый) или На ревью (фиолетовый).
Цветная метка появится у заголовка фрейма. Чтобы убрать — выберите «Снять статус».
💡
Статусы — это командный сигнал: по цвету сразу видно прогресс по экранам, не открывая каждый. [скриншот: фреймы с разными цветными метками статуса]
Нажмите C, кликните на холсте — появится пин комментария. Введите текст и нажмите Enter.
🎨Заливка и обводка
Правая панель при выделенном элементе содержит секцию Заливка:
Solid — сплошной цвет. Кликните на цветной квадрат для открытия пикера с hex-вводом и альфа-каналом.
Palette — 15 быстрых цветов внизу пикера для часто используемых значений.
None — прозрачная заливка. Оставьте только обводку для получения «outline»-стиля.
Opacity — прозрачность всего элемента (0–100%) в правой панели.
Секция Обводка управляет border: цвет, толщина в пикселях.
Что это. Пипетка берёт цвет прямо с холста и подставляет его в текущую заливку — удобно подобрать оттенок с другого элемента или картинки.
Нажмите I (или иконку пипетки в пикере цвета).
Наведите на нужный пиксель холста и кликните.
Взятый цвет становится текущей заливкой — им же красят новые фигуры и инструмент «Заливка».
ℹ
Это собственная пипетка Rugma по холсту (не системная), поэтому работает одинаково во всех браузерах. [скриншот: курсор-пипетка над холстом]
Что это. Инструмент «Заливка» перекрашивает фигуру одним кликом в текущий цвет — быстрый способ применить подобранный пипеткой оттенок.
Выберите инструмент Заливка (ведро) на панели инструментов.
Кликните по фигуре — она перекрасится в текущий цвет (свотч цвета виден на панели инструментов).
Чтобы сменить цвет — возьмите его пипеткой или кликните по свотчу и выберите в пикере.
💡
Связка с пипеткой: I — взять цвет, затем «Заливка» — нанести. Линии и незамкнутые контуры залить нельзя (Rugma подскажет это сообщением).
🌈Градиенты
В пикере цвета нажмите кнопку Gradient для переключения в режим градиента.
Ползунки на полосе — точки градиента. Кликните на полосу чтобы добавить точку.
Угол — направление линейного градиента в градусах.
Solid — кнопка возврата к сплошному цвету.
🌑Тени
Включите тень переключателем Shadow в правой панели. Настройки:
X, Y — смещение тени по горизонтали и вертикали.
Blur — размытие (мягкость) тени.
Spread — расширение тени за пределы элемента.
Цвет — цвет тени с прозрачностью через пикер.
AaТипографика
Font Family — название шрифта. Работают все установленные в системе + веб-шрифты если подключены.
Font Size — размер в пикселях.
Font Weight — 100 (thin) → 900 (black). Обычный: 400, жирный: 700.
Text Align — left, center, right.
Line Height — межстрочный интервал.
Text Color — цвет текста (отдельно от заливки фигуры).
🗂Слои
Левая панель → вкладка Слои показывает все элементы в порядке отрисовки.
Порядок — элементы сверху списка отрисовываются поверх. Меняйте через ] и [ или через правую кнопку мыши.
Видимость — иконка глаза рядом с элементом.
Блокировка — иконка замка. Заблокированный элемент нельзя выделить и переместить случайно.
Переименование — двойной клик на названии слоя.
🧩Компоненты
Открыть раздел «Компоненты» отдельной страницей ↗
Компоненты — переиспользуемые группы элементов. Сохраните кнопку один раз и используйте на всех экранах.
Выделите нужные элементы и нажмите правую кнопку мыши → Сохранить как компонент.
Дайте компоненту понятное название (например «Button / Primary»).
Откройте вкладку Компоненты в левой панели и перетащите компонент на холст.
ℹ
Системные компоненты (кнопки, карточки, навбары) из библиотеки Rugma всегда доступны в верхней части списка.
🔢Переменные дизайна
Переменные хранят цвета, числа и шрифты в именованных коллекциях. Идеально для дизайн-систем с тёмной/светлой темой.
Коллекция — группа переменных. По умолчанию есть «Глобальные» с базовой палитрой.
Режимы — каждая коллекция имеет режимы (Светлая / Тёмная). Переключайте кликом на название режима.
Применение — кликните на переменную чтобы применить её значение к выделенному элементу.
Создание — кнопка + Добавить в нижней части панели переменных.
🕐История версий
Rugma автоматически сохраняет версии при каждом сохранении. Создавайте именованные версии вручную для важных вех.
Просмотр версий — левая панель → иконка часов (Версии).
Именованная версия — нажмите Пометить версию и введите название (например «v1.0 Дизайн утверждён»).
Восстановление — кликните на версию и нажмите Восстановить. Текущее состояние тоже сохранится.
Хранится — последние 50 автосохранений и все именованные версии.
⊞Привязка к сетке
Нажмите G или кнопку ⊞ в топбаре для включения сетки с шагом 8px.
При перемещении элементы автоматически прилипают к ближайшим узлам сетки.
При рисовании размеры округляются до кратных 8px.
Фиолетовая сетка видна на холсте когда привязка включена.
💡
Шаг 8px — это основа Material Design и большинства современных дизайн-систем. Все размеры кратны 8: 8, 16, 24, 32, 48, 64...
⟺Auto Layout
Открыть раздел «Auto Layout» отдельной страницей ↗
Auto Layout автоматически выстраивает дочерние элементы фрейма в ряд или колонку с отступами.
Выделите фрейм и найдите секцию Auto Layout в правой панели.
Выберите направление: Row (горизонталь) или Column (вертикаль).
Настройте Gap (зазор между элементами) и Padding (внутренние отступы).
Добавляйте или удаляйте дочерние элементы — фрейм автоматически пересчитывает размер.
▶Режим Прототип
Переключитесь кнопкой Прототип в топбаре для создания интерактивных переходов между экранами.
Кликните на элемент — появится стрелка для создания связи.
Потяните стрелку на целевой фрейм-экран.
Выберите анимацию: slide, fade, instant и направление.
Нажмите ▶ Запустить для предпросмотра прототипа в полноэкранном режиме.
💡
В режиме просмотра кликайте по элементам с заданными переходами — работает как настоящее приложение. Кнопка ← возвращает на предыдущий экран.
{'}'}Dev Mode
Переключите режим Dev и выделите любой элемент — правая панель покажет готовый код.
CSS — точные стили: position, size, colors, border-radius, box-shadow, font.
React — JSX-компонент с инлайн-стилями, готовый к вставке в проект.
Копирование — кнопка Copy рядом с каждым блоком кода.
ℹ
Dev mode предназначен только для чтения — элементы в этом режиме нельзя редактировать. Переключитесь обратно в Дизайн для внесения изменений.
📋Доска
Режим Доска — бесконечный холст для брейнштормов и набросков.
Стикеры — жёлтые заметки. Нажмите кнопку 📝 в нижнем тулбаре. Двойной клик для редактирования текста.
Маркер — рисование от руки. Выберите цвет в нижнем тулбаре и рисуйте зажав мышь.
Цвета маркера — жёлтый, розовый, зелёный, фиолетовый, белый.
Очистить штрихи — кнопка 🗑 удаляет все нарисованные линии (стикеры остаются).
👥Совместная работа
Rugma поддерживает реалтайм-коллаборацию — несколько человек видят курсоры друг друга и все изменения мгновенно.
Нажмите кнопку 👥 в топбаре для открытия панели совместной работы.
Скопируйте ссылку Пригласить и отправьте коллегам.
Коллеги открывают ссылку — их курсоры появляются на вашем холсте с именами и цветами.
⚠
Если индикатор соединения в нижнем баре показывает «Автономно» — коллаборация не работает. Проверьте что сервис collab запущен.
Нажмите C для активации инструмента комментирования.
Кликните на любое место холста — появится форма ввода комментария.
Комментарии видны всем участникам проекта в реальном времени.
Кликните на пин для просмотра треда. Можно оставить ответ.
Отметьте комментарий как Решённый — пин станет серым.
📤Форматы экспорта
Кнопка Экспорт ↓ в топбаре открывает модал со всеми форматами.
💡
Файлы скачиваются с понятными именами и расширениями (имя.png, имя.svg, имя.rugma) и работают во всех браузерах, включая Safari. Если запрос не удался — вместо «пустого» файла Rugma покажет сообщение об ошибке.
✂️Обрезка области
Что это. Экспорт произвольного прямоугольного фрагмента холста в растр — удобно вырезать иконку, баннер или один экран в нужном разрешении.
Откройте Экспорт ↓ → «Обрезка области» — включится режим рамки.
Задайте область рамкой с ручками (по реальному размеру в пикселях).
Выберите формат — PNG, JPG или WebP — и масштаб 1x / 2x / 3x (для Retina берите 2x–3x).
Нажмите экспорт — фрагмент скачается с именем вида имя-ШИРИНАxВЫСОТА.png.
ℹ
Для JPG можно задать фон (у PNG/WebP поддерживается прозрачность). [скриншот: рамка обрезки с выбором формата и масштаба]
⚛Генерация кода
Rugma превращает дизайн в работающий код одним кликом.
💡
Чем аккуратнее названы слои — тем лучше имена CSS-классов. Слой «Button / Primary» станет классом .button-primary.
</>Импорт HTML / CSS
Что это. Вставьте готовую разметку и стили — Rugma превратит их в элементы холста, чтобы доработать дизайн визуально.
На панели инструментов нажмите кнопку «Импорт HTML/CSS» — откроется окно с двумя полями.
Вставьте HTML в одно поле и CSS в другое.
Подтвердите — блоки, текст и стили станут элементами на холсте.
ℹ
Это аппроксимация: скрипты не выполняются, а сложный CSS переносится по возможности. Простая верстка (блоки, цвета, текст, отступы, скругления) переносится лучше всего. [скриншот: окно импорта с полями HTML и CSS]
🌐Публикация сайта
Что это. Превратите дизайн в готовую веб-страницу: скачайте цельный HTML-файл или опубликуйте его по ссылке.
Нажмите «↗ Сайт» на панели (или Экспорт ↓ → «Опубликовать как сайт»).
Скачать HTML — получите один самодостаточный файл (стили внутри), его можно открыть локально или захостить где угодно.
Опубликовать по ссылке — страница становится доступна на отдельном домене публикаций rugma.online/<адрес>, ссылкой можно делиться.
Передумали — кнопка «Снять с публикации» убирает страницу (ссылка перестаёт открываться).
💡
Публикация — это статическая страница-снимок вашего макета: быстрый способ показать дизайн заказчику живой ссылкой. [скриншот: окно публикации с готовой ссылкой и кнопкой «Снять с публикации»]