Руководство дизайнера

Первые шаги

🗂Типы проектов

При создании нового проекта в личном кабинете выберите его тип — от этого зависит, с чего вы начнёте.

🖥Интерфейс редактора

Редактор состоит из четырёх зон:

⌨Горячие клавиши

Инструменты

Редактирование

Навигация

❔Справка по инструментам

Прямо в редакторе есть встроенная справка с поиском — не нужно держать в голове все инструменты и клавиши.

⬡Выделение и рука

Инструмент Выделение V

Инструмент Рука H

Панорамирование холста без риска случайно сдвинуть элементы. Также можно зажать Пробел в режиме выделения — временно переключится на руку.

▭Фигуры

TТекст

Нажмите T, кликните на холсте и начните вводить. Для многострочного текста тяните рамку перед вводом.

✒Перо (Bezier)

Открыть раздел «Перо» отдельной страницей ↗

Инструмент P создаёт векторные кривые с точками Безье.

Как работают касательные

Плавность кривой задают касательные — рычаги, выходящие из точки. Их длина определяет, насколько «затянут» изгиб: чем длиннее рычаг, тем дальше кривая уходит в его сторону, прежде чем повернуть к следующей точке. Направление задаёт угол входа и выхода. Когда обе касательные точки лежат на одной прямой, переход через точку получается гладким; если развести их под углом — в этом месте появится излом.

Меньше точек — чище форма

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

Редактирование готового контура

Двойной клик по фигуре возвращает в режим правки узлов: точки можно двигать, добавлять на сегмент и удалять. Удаление точки не разрывает контур — соседние сегменты соединяются, а форма пересчитывается по оставшимся касательным. Это удобный способ упростить перегруженный путь: убирайте лишние узлы по одному и смотрите, где форма начнёт «плыть».

Замкнутый и открытый путь

Замкнутый контур можно залить цветом или градиентом — он ведёт себя как фигура. Открытый остаётся линией: у него есть обводка, толщина, пунктир и маркеры на концах (стрелка, круг, штрих). Один и тот же путь легко перевести из линии в фигуру и обратно — замкните или разомкните контур в точке.

Что дальше

Нарисованные пером фигуры участвуют в булевых операциях: объединение, вычитание, пересечение и исключение собирают из простых контуров сложную форму — иконку, логотип, маску. Это быстрее и надёжнее, чем выводить ту же форму одним путём вручную.

✦Редактирование узлов

Любой контур, нарисованный пером, можно перенастроить по точкам — двигать узлы и изгибать кривые Безье.

⬜Фреймы

Фрейм (F) — это контейнер с фиксированными размерами. Используйте для экранов, карточек, секций.

📐Стандартные размеры фреймов

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

▦Секция

Что это. Секция — контейнер для группировки нескольких фреймов в логические «разделы» (например «Онбординг», «Главные экраны», «Настройки»). Удобно структурировать большой макет.

🏷Статусы фреймов

Зачем. Статус на фрейме помогает команде видеть, какие экраны готовы, а какие ещё в работе — прямо на холсте.

💬Комментарии

Нажмите C, кликните на холсте — появится пин комментария. Введите текст и нажмите Enter.

🎨Заливка и обводка

Правая панель при выделенном элементе содержит секцию Заливка:

Секция Обводка управляет border: цвет, толщина в пикселях.

💧Пипетка

Что это. Пипетка берёт цвет прямо с холста и подставляет его в текущую заливку — удобно подобрать оттенок с другого элемента или картинки.

🪣Заливка ведром

Что это. Инструмент «Заливка» перекрашивает фигуру одним кликом в текущий цвет — быстрый способ применить подобранный пипеткой оттенок.

🌈Градиенты

В пикере цвета нажмите кнопку Gradient для переключения в режим градиента.

🌑Тени

Включите тень переключателем Shadow в правой панели. Настройки:

AaТипографика

🗂Слои

Левая панель → вкладка Слои показывает все элементы в порядке отрисовки.

🧩Компоненты

Открыть раздел «Компоненты» отдельной страницей ↗

Компоненты — переиспользуемые группы элементов. Сохраните кнопку один раз и используйте на всех экранах.

Мастер и копии: что где меняется

Компонент существует в двух ролях. Мастер — исходник, хранящий структуру и стили. Копия — экземпляр на холсте, связанный с мастером. Правка мастера расходится по всем копиям сразу: поменяли радиус кнопки один раз — обновились все экраны, где она стоит. Это и есть смысл дизайн-системы: единственный источник правды вместо десятка похожих кнопок, которые разъезжаются на третьей итерации.

Варианты вместо копий-близнецов

Кнопка редко бывает одна: primary и secondary, обычная и с иконкой, активная и заблокированная. Заводить под каждую отдельный компонент — путь к библиотеке, в которой невозможно найти нужное. Соберите их в группу вариантов: один компонент с переключаемыми состояниями. На холсте вы ставите кнопку и выбираете вариант из списка, а не ищете «Button / Primary / Disabled / With icon» среди сорока похожих имён.

Именование — половина успеха

Разделяйте имена косой чертой: Button / Primary, Button / Ghost, Card / Product. Rugma строит по этим путям дерево в панели компонентов, и библиотека остаётся навигируемой, когда элементов станет сто. Имя должно описывать роль, а не внешность: Button / Danger переживёт смену красного на оранжевый, а Button / Red — нет.

Токены вместо захардкоженных значений

Цвета, отступы и радиусы лучше держать в переменных: компонент ссылается на токен, а не на конкретный #7C5CFF. Тогда смена акцентного цвета или переход на тёмную тему — правка одного значения, а не обход всех компонентов. Переменные живут в панели Variables и поддерживают режимы — светлый и тёмный набор значений под одним именем.

Когда компонент не нужен

Не превращайте в компонент всё подряд. Хороший критерий: элемент повторяется минимум трижды и вы ожидаете, что он будет меняться. Разовый декоративный блок в компоненте только засорит библиотеку и добавит лишний слой связей, который придётся распутывать.

🔢Переменные дизайна

Переменные хранят цвета, числа и шрифты в именованных коллекциях. Идеально для дизайн-систем с тёмной/светлой темой.

🕐История версий

Rugma автоматически сохраняет версии при каждом сохранении. Создавайте именованные версии вручную для важных вех.

⊞Привязка к сетке

Нажмите G или кнопку ⊞ в топбаре для включения сетки с шагом 8px.

⟺Auto Layout

Открыть раздел «Auto Layout» отдельной страницей ↗

Auto Layout автоматически выстраивает дочерние элементы фрейма в ряд или колонку с отступами.

Ручное выравнивание — самая дорогая рутина в макете: добавили пункт в список, и вы двигаете каждую карточку ниже, потом ещё раз, когда текст стал на строку длиннее. Auto Layout снимает эту работу: вы задаёте не координаты, а правила, по которым элементы встают сами.

Три параметра, которые решают всё

Направление задаёт ось потока — Row выстраивает детей слева направо, Column сверху вниз. Gap — расстояние между соседями, единый шаг ритма вместо подогнанных на глаз отступов. Padding — внутренние поля самого фрейма; в Rugma можно задать общий отступ или развести горизонтальный и вертикальный.

Hug, Fill и Fixed — кто кем управляет

У каждого элемента внутри авто-раскладки есть режим размера по оси. Hug сжимает контейнер по содержимому: кнопка обнимает надпись, и при смене текста ширина пересчитывается сама. Fill растягивает элемент на всё свободное место — так ведут себя поля ввода и текстовые блоки в строке. Fixed держит заданный размер несмотря ни на что: иконка 24×24 остаётся 24×24.

Соберите карточку товара и увидите, зачем это нужно: изображение сверху — Fixed по высоте, название и описание — Fill по ширине, кнопка прижата к низу выравниванием. Теперь меняйте длину названия, ширину карточки или их количество в ряду — вёрстка держится, потому что задано намерение, а не пиксели.

Вложенность

Одна авто-раскладка — удобство, вложенные — уже система. Строка списка: слева аватар (Fixed), в середине блок из имени и статуса (вертикальная раскладка, Fill), справа время (Hug). Оберните десяток таких строк в вертикальный контейнер с Gap — получится лента, которая переживёт любую правку контента без ручных сдвигов.

Частые ошибки

Если фрейм «не хочет» сжиматься по содержимому — проверьте, не стоит ли у него Fixed по этой оси: Hug работает только там, где размер не зафиксирован. Если элементы наезжают друг на друга, чаще всего Gap задан отрицательным или ребёнок вынесен из фрейма и потерял связь с раскладкой. И помните: авто-раскладка управляет только прямыми детьми фрейма — внуки подчиняются своему контейнеру, а не верхнему.

Скорее всего вам пригодятся привязка к сетке (G) и умные направляющие (Shift+G): пока вы приноравливаетесь, они подсказывают, куда встанет элемент. Готовый блок группируется в Ctrl+G и размножается Ctrl+D.

▶Режим Прототип

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

{'}'}Dev Mode

Переключите режим Dev и выделите любой элемент — правая панель покажет готовый код.

📋Доска

Режим Доска — бесконечный холст для брейнштормов и набросков.

👥Совместная работа

Rugma поддерживает реалтайм-коллаборацию — несколько человек видят курсоры друг друга и все изменения мгновенно.

💬Комментарии к дизайну

📤Форматы экспорта

Кнопка Экспорт ↓ в топбаре открывает модал со всеми форматами.

✂️Обрезка области

Что это. Экспорт произвольного прямоугольного фрагмента холста в растр — удобно вырезать иконку, баннер или один экран в нужном разрешении.

⚛Генерация кода

Rugma превращает дизайн в работающий код одним кликом.

</>Импорт HTML / CSS

Что это. Вставьте готовую разметку и стили — Rugma превратит их в элементы холста, чтобы доработать дизайн визуально.

🌐Публикация сайта

Что это. Превратите дизайн в готовую веб-страницу: скачайте цельный HTML-файл или опубликуйте его по ссылке.

Карта сайта · Блог · Компоненты