Design EditorДокументацияРабота в редакторе
Холст и инструменты
Холст занимает всё окно, а панели располагаются поверх него. Каждый инструмент вызывается одной клавишей.
1Инструменты
| Инструмент | Что делает |
|---|---|
Выделение V | Выделяет и перемещает слои, меняет их размер. |
Фрейм F | Рисует фрейм. Фрейм верхнего уровня — это артборд, экран или слайд. |
Прямоугольник R | Общая кнопка фигур. В её меню также есть «Полигон», «Звезда», «Линия», «Иконка» и «Браузер». |
Эллипс O | Круги и эллипсы, в том числе дуги и кольца. |
Полигон Y, Линия L | Правильные многоугольники и прямые линии. |
Перо P | Контуры из нескольких опорных точек. Enter или Escape завершает контур. |
Карандаш Shift+P | Линии от руки, сглаженные в кривые. |
Текст T | Щелчок создаёт поле, которое растёт вместе с текстом, перетаскивание — поле фиксированной ширины. |
Заметка N | Карточки заметок, контекста и промптов для себя или для агента. |
| Изображение | Вставляет файл PNG, JPEG, GIF, WebP или SVG. |
Рука H | Перемещает холст. То же самое делает зажатый пробел. |
2Особые фигуры
- Звезда — многоугольник с внутренним радиусом. Число лучей и внутренний радиус задаются на панели.
- Дуги эллипса: параметры «Начало», «Размах» и «Внутр.» на панели превращают эллипс в сектор, дугу или кольцо.
- Иконка: наборы Lucide, Feather, Simple Icons (бренды), Material Symbols в контурном, скруглённом и угловатом вариантах, а также Phosphor.
- Сглаживание карандаша: «Точно», «Баланс» или «Плавно» в разделе «Настройки» → «Система». Там же выбирается стиль курсора карандаша.
3Живые веб-страницы на холсте
Фигура «Браузер» показывает настоящую веб-страницу на устройстве «Десктоп», «Планшет» или «Телефон» — с URL, масштабом и прокруткой. Она использует Chrome, Chromium, Edge или Brave, уже установленный на компьютере; чтобы выбрать другой браузер, задайте DE_BROWSER_PATH.
Страницы в открытом файле остаются на паузе, пока вы не нажмёте «Загрузить страницы», поэтому при открытии файла приложение никогда не заходит на сайты само.
4Заметки и скрипты
Карточки заметок, контекста и промптов существуют только на холсте. Они не попадают ни в один экспорт, так что рядом с дизайном можно оставлять инструкции для агента.
Узел скрипта — это фрейм, который рисует JavaScript. Его параметры @input отображаются как поля в разделе «Скрипт» на панели.
6Выравнивание, привязка и объединение
При перетаскивании слоя появляются умные направляющие, и слой привязывается к краям и центрам соседних слоёв.
На панели можно выровнять слои по левому краю, центру, правому краю, верху, середине или низу. Когда выделено три слоя или больше, их можно распределить по горизонтали или по вертикали.
Булевы операции объединяют фигуры: «Объединение» Cmd+Alt+U, «Вычитание» Cmd+Alt+S, «Пересечение» Cmd+Alt+I, «Исключение» Cmd+Alt+X. Они также есть в меню слоя. Фреймы, содержащие другие слои, объединять нельзя.
7Копирование и вставка
Копирование, вырезание и вставка работают со слоями. Слои, скопированные в Figma и вставленные сюда, становятся редактируемыми слоями. HTML, вставленный откуда угодно, тоже превращается в слои.