Все видео в контексте
На странице собраны все идеи, запланированные сценарии и записанные видео из русской документации для дизайнеров. Для каждого показаны учебная цель, текстовый контекст, ссылка на исходную статью и точная метка.
Всего: 79 · идей: 0 · запланировано: 0 · записано: 79.
Анимация
Статус: Записано
Цель: Дать представление о диапазоне анимаций через несколько коротких готовых примеров, включая Scroll.
Тип: showcase
Контекст перед видео
Секция Animation управляет появлением и движением виджета. К одному виджету можно добавить несколько анимаций.
Сначала посмотрите, насколько разными могут быть готовые эффекты: от реакции на курсор до движения, связанного с прокруткой.
Видео
Метка
<!-- @video animation-effects-showcase
goal: Дать представление о диапазоне анимаций через несколько коротких готовых примеров, включая Scroll.
kind: showcase
fixture: animation-showcase
scenario: animation-effects-showcase
start: Preview открыт перед композицией из четырёх подписанных виджетов с настроенными Hover, Click, Visibility и Scroll-анимациями.
steps: Навести указатель на Hover-пример; нажать Click-пример; прокрутить композицию через Visibility и Scroll-примеры.
result: В одном ролике видны четыре разных способа запуска и заметно, что Scroll-анимация следует за прокруткой.
crop: Композиция с четырьмя примерами в Preview без панелей редактора.
-->Анимация — Быстрый старт
Статус: Записано
Цель: Научить добавить первую анимацию, выбрать триггер и проверить её в Preview.
Тип: workflow
Контекст перед видео
- Нажмите
+в секцииAnimation. - Выберите триггер — событие, которое запускает анимацию.
- Откройте настройки кнопкой с иконкой анимации.
- Выберите
Presetили настройте начальное и конечное состояния вручную. - Проверьте результат в предпросмотре.
В коротком сценарии ниже важен весь путь: добавление анимации, выбор события, настройка эффекта и проверка результата.
Видео
Метка
<!-- @video animation-quick-start
goal: Научить добавить первую анимацию, выбрать триггер и проверить её в Preview.
kind: workflow
fixture: animation-showcase
scenario: animation-quick-start
start: В Edit выделена фигура без анимаций, секция Animation раскрыта, кнопка добавления видна.
steps: Нажать +; выбрать Hover; открыть настройки анимации; выбрать заметный Preset; перейти в Preview; навести указатель на фигуру.
result: В списке появляется настроенная Hover-анимация, а фигура в Preview проигрывает выбранный эффект.
crop: Фигура на холсте и секция Animation, затем та же фигура в Preview.
-->Анимация — Триггеры
Статус: Записано
Цель: Показать прямую связь между прокруткой страницы и прогрессом Scroll-анимации.
Тип: behavior
Контекст перед видео
Hover— наведение на виджет.Click— клик по виджету.Scroll— прокрутка страницы.Visibility— появление виджета в области просмотра.Mouse Move— движение курсора.
Для Scroll и Visibility можно выбрать точку старта и отступ. У Mouse Move настраиваются начальная точка и скорость по осям. Поле Behavior определяет, вернётся ли виджет в исходное состояние после повторного действия, ухода курсора или обратной прокрутки.
У Scroll положение виджета должно зависеть от текущего прогресса прокрутки, а не просто запускаться один раз.
Видео
Метка
<!-- @video animation-scroll-trigger
goal: Показать прямую связь между прокруткой страницы и прогрессом Scroll-анимации.
kind: behavior
fixture: animation-showcase
scenario: animation-scroll-trigger
start: Preview открыт перед фигурой с настроенной Scroll-анимацией, точка старта ещё не достигнута.
steps: Плавно прокрутить вниз через всю дистанцию анимации; сделать паузу в конечном состоянии; плавно прокрутить обратно вверх.
result: Фигура последовательно проходит промежуточные состояния вслед за прокруткой и возвращается при обратном движении.
crop: Фигура, окружающий контент и вертикальный участок Preview, достаточный для чтения прогресса.
-->Анимация — Триггеры
Статус: Записано
Цель: Показать, как Mouse Move переводит виджет между состояниями вслед за положением указателя.
Тип: behavior
Контекст перед видео
У Mouse Move полезно видеть раздельную реакцию по горизонтальной и вертикальной оси.
Видео
Метка
<!-- @video animation-mouse-move-trigger
goal: Показать, как Mouse Move переводит виджет между состояниями вслед за положением указателя.
kind: behavior
fixture: animation-showcase
scenario: animation-mouse-move-trigger
start: Preview открыт, виджет с настроенными осями Mouse Move находится в центре, указатель стоит в центре активной области.
steps: Плавно провести указатель к левому верхнему углу; провести к правому нижнему углу; вернуть в центр.
result: Положение и поворот виджета непрерывно следуют за движением указателя по обеим осям и возвращаются в нейтральное состояние.
crop: Активная область Mouse Move и виджет целиком в Preview.
-->Анимация — Состояния
Статус: Записано
Цель: Показать полный цикл Ping pong от Start к End и обратно к Start.
Тип: behavior
Контекст перед видео
В Effect задаются состояния Start и End: положение, поворот, масштаб, цвет, прозрачность, скругление, размытие и тень. Режим 3D добавляет третью ось и объёмные повороты.
Primary указывает обычное состояние виджета. Ping pong проигрывает движение туда и обратно.
На примере ниже Ping pong должен читаться как единый цикл туда и обратно, а не как два отдельных запуска.
Видео
Метка
<!-- @video animation-ping-pong
goal: Показать полный цикл Ping pong от Start к End и обратно к Start.
kind: behavior
fixture: animation-showcase
scenario: animation-ping-pong
start: Preview открыт, виджет с Click-анимацией и включённым Ping pong находится в состоянии Start.
steps: Нажать виджет один раз; дождаться прямой и обратной частей движения.
result: После одного клика виджет достигает End, автоматически возвращается в Start и останавливается там.
crop: Анимируемый виджет и короткая видимая траектория движения в Preview.
-->Анимация — Переход
Статус: Записано
Цель: Сравнить влияние Duration и Easing на одно и то же движение.
Тип: comparison
Контекст перед видео
В Transition настраиваются длительность или дистанция, задержка, характер ускорения, скорость и количество повторов. Для анимаций от прокрутки время заменяется расстоянием в пикселях.
Сравнение одинакового движения помогает понять влияние easing и длительности лучше, чем отдельные значения в панели.
Видео
Метка
<!-- @video animation-transition-comparison
goal: Сравнить влияние Duration и Easing на одно и то же движение.
kind: comparison
fixture: animation-showcase
scenario: animation-transition-comparison
start: Preview открыт, рядом стоят три одинаковые фигуры с общей дистанцией движения, но разными Duration и Easing.
steps: Запустить все три Click-анимации одним управляющим элементом; дождаться завершения; повторить один раз.
result: Фигуры проходят одинаковую дистанцию с различимыми скоростью и характером ускорения.
crop: Три подписанных фигуры и их общая траектория в Preview.
-->Фиксация при прокрутке
Статус: Записано
Цель: Научить настроить Start, Offset и Distance для фиксации виджета.
Тип: workflow
Контекст перед видео
Fix on Scroll удерживает виджет на экране во время прокрутки части материала.
Сначала настройте точку фиксации и её длину, чтобы в Preview оставалось проверить только движение.
Видео
Метка
<!-- @video fix-on-scroll-setup
goal: Научить настроить Start, Offset и Distance для фиксации виджета.
kind: workflow
fixture: long-scroll-story
scenario: fix-on-scroll-setup
start: В Edit выделен виджет без анимаций, секция Fix on Scroll раскрыта и готова к добавлению настройки.
steps: Нажать +; выбрать Start → Top; задать Offset; задать Distance; перейти в Preview.
result: У виджета появляется настройка Fix on Scroll с выбранной верхней точкой, отступом и дистанцией, Preview открыт перед проверкой.
crop: Виджет и секция Fix on Scroll, затем колонка материала в Preview.
-->Фиксация при прокрутке
Статус: Записано
Цель: Показать момент фиксации виджета, удержание на Distance и последующее освобождение.
Тип: behavior
Контекст перед видео
- Добавьте
Fix on Scrollкнопкой+. - В
Startвыберите точку фиксации:Top,CenterилиBottom. - В
Offsetзадайте отступ от этой точки. - В
Distanceукажите, сколько пикселей прокрутки виджет должен оставаться зафиксированным. - Проверьте результат в предпросмотре.
В готовом состоянии виджет сначала движется с материалом, затем остаётся на месте и освобождается после заданной дистанции.
Видео
Метка
<!-- @video fix-on-scroll-behavior
goal: Показать момент фиксации виджета, удержание на Distance и последующее освобождение.
kind: behavior
fixture: long-scroll-story
scenario: fix-on-scroll-behavior
start: Preview открыт перед виджетом с настроенными Start → Top, Offset и Distance.
steps: Плавно прокрутить до точки фиксации; продолжить прокрутку внутри Distance; прокрутить дальше точки освобождения; немного прокрутить обратно.
result: Виджет достигает верхней точки с отступом, остаётся зафиксированным на заданной дистанции и снова включается в поток.
crop: Виджет, окружающий контент и верхняя граница viewport в Preview.
-->Интерактивные связи — Создание связи
Статус: Записано
Цель: Научить связать Click на одном виджете с анимацией другого через Pick container.
Тип: workflow
Контекст перед видео
- Выделите виджет, который будет запускать действие.
- Нажмите
+в секцииInteractions. - Выберите событие
ClickилиHover. - Нажмите
Pick container, затем выберите связанный виджет на холсте. - Кликните по связанному виджету в списке и настройте созданную для него анимацию.
- Проверьте связь в предпросмотре.
В этом сценарии видно не только готовое действие, но и выбор конкретной цели через Pick container.
Видео
Метка
<!-- @video interaction-create-connection
goal: Научить связать Click на одном виджете с анимацией другого через Pick container.
kind: workflow
fixture: layout-structure
scenario: interaction-create-connection
start: В Edit выделена кнопка без Interactions, рядом на холсте видна карточка с понятным именем в Layers.
steps: Нажать + в Interactions; выбрать Click; нажать Pick container; выбрать карточку на холсте; открыть созданную связь; настроить заметное End-состояние; перейти в Preview; нажать кнопку.
result: Карточка появляется в Connected containers и меняется после клика по кнопке в Preview.
crop: Кнопка, карточка и секция Interactions, затем оба виджета в Preview.
-->Интерактивные связи — Создание связи
Статус: Записано
Цель: Показать, как Toggle и Close others оставляют открытой только последнюю выбранную цель.
Тип: behavior
Контекст перед видео
Для связанного виджета доступны два режима:
Toggleпереключает начальное и конечное состояния при повторном действии.Onceпроигрывает переход один раз.
Close others возвращает другие активные цели в режиме Toggle к начальному состоянию. Это удобно для меню, вкладок и аккордеонов, где одновременно должен быть открыт один блок.
Аккордеон из трёх пунктов наглядно показывает разницу между обычным Toggle и включённым Close others.
Видео
Метка
<!-- @video interaction-toggle-close-others
goal: Показать, как Toggle и Close others оставляют открытой только последнюю выбранную цель.
kind: behavior
fixture: layout-structure
scenario: interaction-toggle-close-others
start: Preview открыт, видны три кнопки и три закрытые связанные карточки; у связей включены Toggle и Close others.
steps: Нажать первую кнопку; нажать вторую; нажать вторую повторно; нажать третью.
result: Новая карточка открывается с одновременным закрытием предыдущей, повторный клик закрывает активную карточку.
crop: Три кнопки и три связанные карточки в Preview.
-->Параллакс
Статус: Записано
Цель: Показать относительное смещение виджета с Scroll-параллаксом при прямой и обратной прокрутке.
Тип: behavior
Контекст перед видео
Parallax смещает виджет вслед за прокруткой страницы или движением курсора. Это быстрый способ добавить глубину без ручной настройки обычной анимации.
- Добавьте
Parallaxкнопкой+. - Выберите режим
ScrollилиMouse. - Настройте
X SpeedиY Speed. - Проверьте движение в предпросмотре.
В режиме Scroll эффект лучше оценивать рядом со статичным ориентиром и обязательно в обоих направлениях прокрутки.
Видео
Метка
<!-- @video parallax-scroll-behavior
goal: Показать относительное смещение виджета с Scroll-параллаксом при прямой и обратной прокрутке.
kind: behavior
fixture: long-scroll-story
scenario: parallax-scroll-behavior
start: Preview открыт перед виджетом с Parallax → Scroll и ненулевым Y Speed; рядом виден статичный контент.
steps: Плавно прокрутить материал вниз; сделать короткую паузу; плавно прокрутить обратно вверх.
result: Виджет движется по вертикали с другой скоростью, чем статичный контент, и возвращается при обратной прокрутке.
crop: Виджет и статичный ориентир в Preview.
-->Параллакс
Статус: Записано
Цель: Показать движение Mouse-параллакса по двум осям вслед за указателем.
Тип: behavior
Контекст перед видео
В режиме Mouse знак и величина скоростей должны читаться по реакции на перемещение указателя по всей активной области.
Видео
Метка
<!-- @video parallax-mouse-behavior
goal: Показать движение Mouse-параллакса по двум осям вслед за указателем.
kind: behavior
fixture: long-scroll-story
scenario: parallax-mouse-behavior
start: Preview открыт, виджет с Parallax → Mouse и ненулевыми X Speed и Y Speed находится в центре активной области.
steps: Плавно провести указатель по горизонтали в обе стороны; затем провести по вертикали; вернуть указатель в центр.
result: Виджет смещается по обеим осям с направлением и амплитудой, заданными скоростями.
crop: Активная область и параллакс-виджет целиком в Preview.
-->Брейкпоинты — Подключите фреймы к адаптиву
Статус: Записано
Цель: Научить подключить Desktop и Mobile к адаптиву через Role → Breakpoint.
Тип: workflow
Контекст перед видео
- Выделите фрейм.
- В секции
FrameустановитеRole→Breakpoint. - Повторите для остальных адаптивных версий.
- Снимите выделение, чтобы открыть настройки Canvas.
В секции Breakpoints появится шкала. Каждый сегмент подписан именем фрейма, поэтому полезно заранее назвать версии понятно.
В этом сценарии шкала появляется только после назначения роли обоим верхнеуровневым фреймам.
Видео
Метка
<!-- @video breakpoints-assign-frames
goal: Научить подключить Desktop и Mobile к адаптиву через Role → Breakpoint.
kind: workflow
fixture: editor-basics
scenario: breakpoints-assign-frames
start: На холсте видны два именованных верхнеуровневых фрейма с Role → Frame, секция Frame раскрыта для Desktop.
steps: Выбрать Role → Breakpoint для Desktop; выбрать Mobile; выбрать Role → Breakpoint; снять выделение.
result: В настройках Canvas появляется шкала Breakpoints с отдельными сегментами Desktop и Mobile.
crop: Оба фрейма на холсте и секции Frame и Breakpoints в правой панели.
-->Брейкпоинты — Соберите Mobile через Generate
Статус: Записано
Цель: Научить собрать стартовую Mobile-версию из готового Desktop-фрейма через Generate.
Тип: workflow
Контекст перед видео
Если Desktop уже готов, его можно использовать как основу для узкой версии.
- Создайте пустой фрейм Mobile и назначьте ему роль
Breakpoint. - Выделите только Mobile. Рядом с названием фрейма появится кнопка
Generate. - Нажмите
Generateи выберите исходный фрейм в полеSource. - Настройте
Width— ширину колонки — иGap— расстояние между верхнеуровневыми блоками. Результат меняется на холсте сразу. - Нажмите
Apply, когда стартовая раскладка готова.
Generate копирует содержимое исходного фрейма и собирает верхнеуровневые блоки в вертикальную колонку. После этого проверьте размеры, композицию и переносы текста вручную: генерация даёт основу, а не финальный адаптивный макет.
Связи между скопированными виджетами сохраняются. Действия, которые вели к виджетам или группам за пределами исходного фрейма, не переносятся.
Следите одновременно за параметрами Width и Gap и за живым результатом внутри Mobile до нажатия Apply.
Видео
Метка
<!-- @video breakpoint-generate-mobile-workflow
goal: Научить собрать стартовую Mobile-версию из готового Desktop-фрейма через Generate.
kind: workflow
fixture: editor-basics
scenario: breakpoint-generate-mobile-workflow
start: На холсте видны заполненный Desktop и пустой Mobile с ролью Breakpoint, у Mobile доступна кнопка Generate.
steps: Нажать Generate; выбрать Source → Desktop; изменить Width; изменить Gap; оценить живую раскладку; нажать Apply.
result: Mobile заполняется копиями верхнеуровневых блоков Desktop, собранными в колонку с выбранными шириной и расстоянием.
crop: Desktop и Mobile на холсте вместе с окном Generate.
-->Брейкпоинты — Настройте диапазоны
Статус: Записано
Цель: Научить изменить общую границу Mobile и Desktop перетаскиванием и точным вводом.
Тип: workflow
Контекст перед видео
Перетащите круглый разделитель на шкале или отредактируйте число под ним. У соседних диапазонов общая граница: максимум одного фрейма становится минимумом следующего.
Limit width задаёт верхнюю границу самого широкого диапазона. Это ширина области материала, а не всего окна браузера.
Общую границу удобно сначала подобрать перетаскиванием, а затем уточнить числом.
Видео
Метка
<!-- @video breakpoints-range-and-limit
goal: Научить изменить общую границу Mobile и Desktop перетаскиванием и точным вводом.
kind: workflow
fixture: editor-basics
scenario: breakpoints-range-and-limit
start: Выделение снято, секция Breakpoints раскрыта, на шкале видны соседние диапазоны Mobile и Desktop.
steps: Плавно перетащить общий разделитель; отпустить его на новой ширине; ввести точное значение под разделителем; изменить Limit width.
result: Максимум Mobile и минимум Desktop меняются вместе, а самый широкий диапазон получает новую верхнюю границу.
crop: Секция Breakpoints со шкалой, общим разделителем и Limit width.
-->Брейкпоинты — Параметры фрейма
Статус: Записано
Цель: Сравнить поведение одинакового breakpoint-фрейма в режимах Fixed и Scalable.
Тип: comparison
Контекст перед видео
Для Breakpoint доступны дополнительные настройки:
Scalableразрешает масштабировать содержимое внутри диапазона фрейма.Gap belowоставляет пространство после фрейма в материале.
Разницу между Fixed и Scalable лучше оценивать на одном и том же макете при плавном изменении ширины.
Видео
Метка
<!-- @video breakpoint-fixed-scalable-comparison
goal: Сравнить поведение одинакового breakpoint-фрейма в режимах Fixed и Scalable.
kind: comparison
fixture: editor-basics
scenario: breakpoint-fixed-scalable-comparison
start: Preview открыт на промежуточной ширине, рядом подготовлены две одинаковые версии макета с наглядными границами содержимого.
steps: Плавно уменьшить ширину для Fixed-примера; вернуть ширину; повторить изменение для Scalable-примера.
result: В Fixed геометрия содержимого сохраняется, а в Scalable композиция пропорционально подстраивается внутри диапазона.
crop: Колонка Preview с подписанными Fixed и Scalable примерами и ручкой ширины.
-->Брейкпоинты — Параметры фрейма
Статус: Записано
Цель: Показать, как Gap below добавляет пространство после breakpoint-фрейма.
Тип: behavior
Контекст перед видео
Gap below должен быть заметен как часть потока материала, поэтому его стоит показать между двумя соседними блоками.
Видео
Метка
<!-- @video breakpoint-gap-below
goal: Показать, как Gap below добавляет пространство после breakpoint-фрейма.
kind: behavior
fixture: editor-basics
scenario: breakpoint-gap-below
start: Preview открыт в конце первого breakpoint-фрейма, ниже виден следующий блок; Gap below установлен в ноль.
steps: Вернуться в Edit; задать заметный Gap below; перейти в Preview к прежней позиции; прокрутить через границу фреймов.
result: Между концом первого фрейма и следующим блоком появляется заданный вертикальный промежуток.
crop: Нижняя граница breakpoint-фрейма и следующий блок, затем поле Gap below в Edit.
-->Брейкпоинты — Проверьте результат
Статус: Записано
Цель: Показать автоматическое переключение Desktop и Mobile при пересечении границы диапазонов.
Тип: behavior
Контекст перед видео
Откройте Preview и переключите ширину между 960 и 400 px. Активный фрейм должен меняться в соответствии со шкалой.
При плавном перетаскивании ручки момент перехода должен совпасть с границей на шкале Breakpoints.
Видео
Метка
<!-- @video breakpoints-preview-switch
goal: Показать автоматическое переключение Desktop и Mobile при пересечении границы диапазонов.
kind: behavior
fixture: editor-basics
scenario: breakpoints-preview-switch
start: Preview открыт на ширине 960 px и показывает Desktop, граница Mobile и Desktop заранее настроена.
steps: Плавно уменьшать ширину ручкой до перехода на Mobile; немного пройти ниже границы; плавно вернуть ширину до Desktop.
result: Preview переключает фрейм точно при пересечении настроенной границы и возвращает Desktop при обратном движении.
crop: Колонка материала, индикатор ширины и боковая ручка Preview.
-->Холст, масштаб и сетка — Масштаб
Статус: Записано
Цель: Показать работу Zoom to Fit, Zoom to 100% и пошагового изменения масштаба.
Тип: workflow
Контекст перед видео
Текущий процент находится в правой части шапки. Он меняет только вид холста.
Zoom to Fitпомещает рабочие фреймы в доступную область.Zoom to 100%возвращает масштаб 100 %.⌘=/Ctrl+=и⌘−/Ctrl+−приближают и отдаляют.Shift+1выполняетZoom to Fit.
Эти действия также доступны в контекстном меню пустого места на холсте.
Сравнение Zoom to Fit и 100 % показывает, что масштаб меняет только рабочее представление, а не геометрию материала.
Видео
Метка
<!-- @video canvas-zoom-controls
goal: Показать работу Zoom to Fit, Zoom to 100% и пошагового изменения масштаба.
kind: workflow
fixture: editor-basics
scenario: canvas-zoom-controls
start: В Edit на холсте видны части Desktop и Mobile при произвольном масштабе, выделение снято.
steps: Выполнить Zoom to Fit; переключить Zoom to 100%; дважды уменьшить масштаб; один раз увеличить.
result: Фреймы сохраняют размеры и взаимное расположение, меняется только их отображаемый масштаб на холсте.
crop: Холст с обоими фреймами и индикатор масштаба в шапке.
-->Холст, масштаб и сетка — Сетка фрейма
Статус: Записано
Цель: Сравнить свободное перемещение по видимой сетке и перемещение с включённым Snap to Grid.
Тип: comparison
Контекст перед видео
Команда Show Frame Grid показывает сетку внутри фреймов. Snap to Grid включает привязку при перемещении и изменении размера виджетов. Включать их можно независимо: иногда полезно видеть колонки, но двигать объект свободно.
Для показа сетки нажмите W. Для привязки используйте ⇧⌘' на macOS или Ctrl+Shift+' на Windows и Linux.
Одинаковое перемещение с выключенной и включённой привязкой наглядно разделяет показ сетки и Snap to Grid.
Видео
Метка
<!-- @video canvas-grid-snap-comparison
goal: Сравнить свободное перемещение по видимой сетке и перемещение с включённым Snap to Grid.
kind: comparison
fixture: editor-basics
scenario: canvas-grid-snap-comparison
start: В Edit показана сетка Desktop, текстовый виджет выделен, Snap to Grid выключен.
steps: Перетащить виджет между линиями сетки; включить Snap to Grid; перетащить виджет к тому же участку ещё раз.
result: При выключенной привязке виджет остаётся между линиями, а при включённой его граница прилипает к сетке.
crop: Выделенный виджет и ближайшие линии сетки внутри Desktop.
-->Холст, масштаб и сетка — Выделение и перемещение
Статус: Записано
Цель: Научить плавно переместить виджет и изменить его ширину ручкой.
Тип: workflow
Контекст перед видео
Выберите виджет на холсте или в Layers. У выделения появятся границы и ручки изменения размера. Несколько виджетов можно выровнять или распределить кнопками над секцией Layout.
При drag виджет и ручка размера должны непрерывно следовать за курсором до отпускания.
Видео
Метка
<!-- @video canvas-free-move-resize
goal: Научить плавно переместить виджет и изменить его ширину ручкой.
kind: workflow
fixture: editor-basics
scenario: canvas-free-move-resize
start: В Desktop выделен текстовый виджет, видны его границы и правая ручка изменения размера.
steps: Плавно перетащить виджет на свободное место и отпустить; плавно перетащить правую ручку; отпустить после заметного изменения ширины.
result: Виджет и его рамка следуют за указателем, после каждого отпускания сохраняются новые положение и ширина.
crop: Выделенный виджет, его траектория и правая ручка внутри Desktop.
-->Редакторские проверки
Статус: Записано
Цель: Научить включить поиск ограниченных слов и пройти по найденным совпадениям.
Тип: workflow
Контекст перед видео
Секция Editorial checks помогает найти в тексте слова из встроенного списка ограничений.
Снимите выделение с виджетов и включите Find restricted words. Совпадения подсветятся в текстовых виджетах. Кнопки Prev и Next переводят к предыдущему или следующему совпадению, а счётчик показывает текущую позицию.
Навигация должна показать несколько совпадений в разных местах материала и возвращение к предыдущему.
Видео
Метка
<!-- @video editorial-checks-navigation
goal: Научить включить поиск ограниченных слов и пройти по найденным совпадениям.
kind: workflow
fixture: paste-content
scenario: editorial-checks-navigation
start: В Edit выделение снято, секция Editorial checks раскрыта, Find restricted words выключен, в тексте подготовлены три совпадения.
steps: Включить Find restricted words; нажать Next два раза; нажать Prev; выключить проверку.
result: Совпадения последовательно подсвечиваются, счётчик меняется, а после выключения вся подсветка исчезает.
crop: Текстовые виджеты с совпадениями и секция Editorial checks.
-->Слои и группы — Работа со слоями
Статус: Записано
Цель: Научить менять порядок слоёв и переносить виджет внутрь группы через Layers.
Тип: workflow
Контекст перед видео
- Нажмите строку, чтобы выделить виджет на холсте.
- Перетащите строку, чтобы изменить порядок или вложенность.
- Отредактируйте имя прямо в строке. Названия вроде «Заголовок» и «Обложка» быстрее читаются, чем набор одинаковых
Text 1. - Кнопка с замком блокирует виджет от случайных изменений.
- Кнопка с глазом скрывает его.
- Кнопка в заголовке
Layersсворачивает дерево, оставляя путь к текущему выделению.
Перетаскивание одной строки может изменить и порядок, и родителя; индикатор вставки должен ясно показывать будущую позицию.
Видео
Метка
<!-- @video layers-reorder-and-nest
goal: Научить менять порядок слоёв и переносить виджет внутрь группы через Layers.
kind: workflow
fixture: widgets-lab
scenario: layers-reorder-and-nest
start: В Layers раскрыты Desktop и группа, на холсте видны соответствующие виджеты, выделение снято.
steps: Перетащить строку фигуры выше соседнего виджета; затем перетащить ту же строку внутрь раскрытой группы.
result: Индикатор вставки следует за указателем, порядок строк меняется, а фигура становится дочерним элементом группы.
crop: Вкладка Layers и область холста с группой и перемещаемой фигурой.
-->Слои и группы — Работа со слоями
Статус: Записано
Цель: Показать наследование скрытия и блокировки от группы к вложенным виджетам.
Тип: behavior
Контекст перед видео
Если родитель скрыт или заблокирован, это состояние наследуют вложенные виджеты.
Наследование проще всего увидеть на раскрытой группе с двумя дочерними виджетами.
Видео
Метка
<!-- @video layers-visibility-lock-inheritance
goal: Показать наследование скрытия и блокировки от группы к вложенным виджетам.
kind: behavior
fixture: layout-structure
scenario: layers-visibility-lock-inheritance
start: В Layers раскрыта группа с двумя видимыми и разблокированными дочерними виджетами.
steps: Скрыть группу; снова показать её; заблокировать группу; попытаться выбрать дочерний виджет на холсте; снять блокировку.
result: Дочерние виджеты исчезают вместе с группой и недоступны для изменения, пока родитель заблокирован.
crop: Раскрытая группа в Layers и её содержимое на холсте.
-->Слои и группы — Группы
Статус: Записано
Цель: Показать создание и разбор группы без изменения взаимного расположения виджетов.
Тип: workflow
Контекст перед видео
Выделите несколько виджетов и выберите Group в контекстном меню или нажмите ⌘G / Ctrl+G. Редактор создаст общий контейнер, который можно перемещать и масштабировать целиком.
Чтобы вернуть виджеты на уровень выше, выделите группу и выберите Ungroup или нажмите ⇧⌘G / Ctrl+Shift+G.
При группировке и разгруппировке геометрия виджетов не должна меняться.
Видео
Метка
<!-- @video layers-group-ungroup
goal: Показать создание и разбор группы без изменения взаимного расположения виджетов.
kind: workflow
fixture: widgets-lab
scenario: layers-group-ungroup
start: В Edit выделены текст и фигура внутри одного фрейма, в Layers видны две соседние строки.
steps: Открыть контекстное меню и выбрать Group; показать новую группу в Layers; выбрать Ungroup.
result: После Group появляется общий родитель, после Ungroup виджеты возвращаются на прежний уровень и сохраняют геометрию.
crop: Два виджета на холсте и соответствующий участок Layers.
-->Как устроен материал
Статус: Записано
Цель: Показать соответствие Canvas, Frame, Group и Widget между Layers и холстом.
Тип: behavior
Контекст перед видео
Материал в Verstka — это набор фреймов, групп и виджетов на общем холсте. Обычно дизайнер собирает отдельные фреймы для широкого и узкого экрана, а редактор показывает читателю подходящую версию по ширине страницы.
Структура выглядит так:
- Canvas — корень материала и вся рабочая область.
- Frame — самостоятельная область макета. Фрейм с ролью
Breakpointучаствует в адаптиве. - Group — несколько виджетов, с которыми удобно работать как с одним объектом.
- Widget — содержимое материала: текст, изображение, видео, фигура, embed или слайдер.
Дерево и холст полезно смотреть вместе: выбор уровня в Layers сразу показывает границы соответствующего контейнера.
Видео
Метка
<!-- @video material-container-hierarchy
goal: Показать соответствие Canvas, Frame, Group и Widget между Layers и холстом.
kind: behavior
fixture: layout-structure
scenario: material-container-hierarchy
start: В Edit открыта вкладка Layers с раскрытыми Canvas, Desktop, группой и двумя вложенными виджетами; выделение снято.
steps: Последовательно выбрать Desktop, группу и вложенный виджет в Layers; в конце снять выделение.
result: На холсте для каждого уровня появляется своя граница, а дерево сохраняет понятную вложенность контейнеров.
crop: Вкладка Layers и соответствующая область Desktop-фрейма на холсте.
-->Вставка из буфера — Что можно вставить
Статус: Записано
Цель: Показать вставку нескольких скопированных виджетов с сохранением взаимного расположения.
Тип: behavior
Контекст перед видео
- виджеты, скопированные внутри Verstka;
- текст и форматированный HTML;
- изображения и другие поддерживаемые медиафайлы;
- ссылку на видео.
При вставке собственного набора виджетов редактор сохраняет их относительное расположение. Обычный текст создаёт текстовый виджет, файл изображения — виджет изображения, ссылка на видео — видео.
Скопированный внутри Verstka набор должен появиться у указателя как единая композиция с прежними расстояниями.
Видео
Метка
<!-- @video paste-widget-composition
goal: Показать вставку нескольких скопированных виджетов с сохранением взаимного расположения.
kind: behavior
fixture: paste-content
scenario: paste-widget-composition
start: В Edit скопирована композиция из трёх виджетов, указатель находится на свободном участке другого фрейма.
steps: Выполнить вставку; выделить появившиеся виджеты рамкой.
result: Три виджета появляются возле последнего положения указателя и сохраняют исходные расстояния и порядок.
crop: Исходная композиция и свободный участок фрейма, куда выполняется вставка.
-->Вставка из буфера — Что можно вставить
Статус: Записано
Цель: Показать создание подходящих виджетов из текста, изображения и ссылки на видео.
Тип: showcase
Контекст перед видео
Для внешнего содержимого полезно увидеть, как редактор выбирает тип виджета по данным в буфере.
Видео
Метка
<!-- @video paste-content-type-showcase
goal: Показать создание подходящих виджетов из текста, изображения и ссылки на видео.
kind: showcase
fixture: paste-content
scenario: paste-content-type-showcase
start: В Edit открыт пустой участок фрейма, заранее подготовлены три последовательных содержимых буфера: текст, изображение и ссылка на видео.
steps: Вставить текст; переместить указатель и вставить изображение; переместить указатель и вставить ссылку на видео.
result: На холсте появляются соответственно Text, Image и Video в точках вставки.
crop: Пустой участок фрейма и три создаваемых виджета.
-->Вставка из буфера — Paste settings
Статус: Записано
Цель: Показать влияние Paste settings на очистку форматированного текста.
Тип: comparison
Контекст перед видео
Снимите выделение и откройте Paste settings в правой панели. Кнопка Open paste settings открывает правила очистки форматированного текста.
Можно отдельно сохранить:
- жирное и курсивное начертание;
- оформление и адрес ссылки;
- переносы строк и списки;
- выравнивание текста.
В разделе Images настройка Always create separate images and do not show this dialog again сразу создаёт отдельные виджеты для вставленных картинок. Reset to defaults возвращает исходные правила.
Один и тот же HTML-фрагмент до и после изменения правил покажет, какие элементы форматирования действительно сохраняются.
Видео
Метка
<!-- @video paste-formatted-text-settings
goal: Показать влияние Paste settings на очистку форматированного текста.
kind: comparison
fixture: paste-content
scenario: paste-formatted-text-settings
start: В Edit открыт Paste settings с исходными правилами, в буфере подготовлен HTML с жирным текстом, ссылкой и списком.
steps: Вставить фрагмент с исходными правилами; открыть Paste settings; отключить стиль ссылки, её URL и список; вставить тот же фрагмент рядом.
result: Первая вставка сохраняет ссылку и список, вторая показывает обычный текст без ссылки и структуры списка.
crop: Два текстовых виджета на холсте и окно Paste settings.
-->Режим превью — Откройте и закройте превью
Статус: Записано
Цель: Показать сохранение примерной позиции при переходах Edit → Preview → Edit.
Тип: behavior
Контекст перед видео
Нажмите кнопку с иконкой Play в левой части шапки или клавишу V. Чтобы вернуться к правке, нажмите Edit или снова V.
Редактор сохраняет примерное место просмотра, поэтому после переключения не приходится заново искать нужный фрагмент длинного материала.
Проверка на длинном материале должна показать сохранение позиции в обе стороны между Edit и Preview.
Видео
Метка
<!-- @video preview-edit-position
goal: Показать сохранение примерной позиции при переходах Edit → Preview → Edit.
kind: behavior
fixture: long-scroll-story
scenario: preview-edit-position
start: В Edit длинный материал прокручен до подписанного блока в середине страницы.
steps: Перейти в Preview; немного прокрутить внутри блока; вернуться в Edit; снова перейти в Preview.
result: После каждого переключения остаётся виден тот же участок материала без возврата к началу.
crop: Центральная колонка редактора с подписанным ориентиром и кнопкой Edit или Preview.
-->Режим превью — Проверьте ширины
Статус: Записано
Цель: Показать пресеты 960 и 400 px, ручное изменение ширины и переключение breakpoint-фрейма.
Тип: workflow
Контекст перед видео
В превью индикатор масштаба показывает ширину колонки в пикселях. Кнопка устройства переключает два быстрых значения:
- 960 px — широкая версия;
- 400 px — узкая версия.
Ширину также можно менять вертикальными ручками по краям колонки. После ручного изменения выбранное значение сохраняется, пока вы не переключите пресет.
Ручка позволяет увидеть не только два пресета, но и точный момент выбора другого breakpoint-фрейма.
Видео
Метка
<!-- @video preview-width-controls
goal: Показать пресеты 960 и 400 px, ручное изменение ширины и переключение breakpoint-фрейма.
kind: workflow
fixture: editor-basics
scenario: preview-width-controls
start: Preview открыт на 960 px и показывает Desktop, видны индикатор ширины, кнопка устройства и боковая ручка.
steps: Нажать кнопку устройства для перехода на 400 px; вернуть 960 px; плавно перетащить боковую ручку через границу breakpoint; отпустить на промежуточной ширине.
result: Индикатор показывает актуальные значения, пресеты переключаются, а материал выбирает Mobile при пересечении его диапазона.
crop: Колонка материала, верхняя панель Preview и одна боковая ручка.
-->Сохранение материала — Обычное и принудительное сохранение
Статус: Записано
Цель: Показать успешное сохранение, создание версии и отсутствие лишней версии без новых изменений.
Тип: behavior
Контекст перед видео
Обычное сохранение отправляет текущую структуру материала и связанные файлы. Если нужно повторно отправить файлы, используйте ⇧⌘S на macOS или Ctrl+Shift+S на Windows и Linux.
После успешного сохранения в Versions появляется новая точка истории. Если изменений не было, редактор не создаёт лишнюю версию.
Обычное сохранение стоит показать вместе с появлением новой записи и отсутствием дубля при повторном нажатии без изменений.
Видео
Метка
<!-- @video saving-version-result
goal: Показать успешное сохранение, создание версии и отсутствие лишней версии без новых изменений.
kind: behavior
fixture: system-states
scenario: saving-version-result
start: В Edit выполнено одно несохранённое изменение, открыта вкладка Layers, кнопка Save доступна.
steps: Нажать Save и дождаться завершения; открыть Versions; вернуться в Edit; нажать Save ещё раз без изменений; снова открыть Versions.
result: После первого сохранения появляется новая точка Save, после второго количество записей не меняется.
crop: Кнопка Save, изменённый виджет и верхняя часть ленты Versions.
-->Сохранение материала — Если часть файлов не сохранилась
Статус: Записано
Цель: Показать сообщение частичного сохранения и различить сохранённую структуру от недоступных файлов.
Тип: behavior
Контекст перед видео
При частичном сохранении структура материала остаётся сохранённой, но редактор показывает список недоступных файлов. Не закрывайте сообщение, пока не поймёте, какие изображения или видео нужно загрузить заново.
Есть два разных типа ошибки:
- материал не удалось сохранить в Verstka;
- материал сохранился в Verstka, но не был доставлен на сайт клиента.
Во втором случае правки не потеряны. Повторите сохранение или передайте сообщение команде, которая отвечает за публикацию.
При частичном результате важно показать список проблемных файлов и то, что структура материала уже сохранена.
Видео
Метка
<!-- @video saving-partial-assets
goal: Показать сообщение частичного сохранения и различить сохранённую структуру от недоступных файлов.
kind: behavior
fixture: system-states
scenario: saving-partial-assets
start: В Edit материал содержит два новых медиафайла, для одного подготовлен ответ с ошибкой загрузки, кнопка Save доступна.
steps: Нажать Save; дождаться сообщения о частичном сохранении; раскрыть или просмотреть список недоступных файлов; закрыть сообщение после проверки.
result: Редактор подтверждает сохранение структуры и отдельно перечисляет файл, который требуется загрузить повторно.
crop: Сообщение частичного сохранения и достаточная часть редактора для контекста.
-->Версии — Как открыть старую версию
Статус: Записано
Цель: Научить открыть старую запись из Versions и вернуться к Last saved version.
Тип: workflow
Контекст перед видео
Нажмите запись в ленте. Редактор загрузит соответствующее состояние, а в адресе появится идентификатор версии. Чтобы вернуться к актуальному состоянию, нажмите Last saved version.
Сравнение заметного старого состояния с текущим помогает убедиться, что переход действительно загрузил другую версию.
Видео
Метка
<!-- @video versions-open-and-return
goal: Научить открыть старую запись из Versions и вернуться к Last saved version.
kind: workflow
fixture: system-states
scenario: versions-open-and-return
start: В Edit открыта вкладка Versions, в текущем состоянии виден новый цвет крупной фигуры, в ленте есть более старая запись.
steps: Нажать старую запись; дождаться загрузки и изменения фигуры; нажать Last saved version; дождаться возврата.
result: Холст и идентификатор версии меняются для старой записи, затем возвращаются к актуальному состоянию.
crop: Лента Versions и заметно изменяющаяся фигура на холсте.
-->Первый материал
Статус: Записано
Цель: Показать результат первого рабочего цикла от структуры в Edit до Desktop и Mobile в Preview.
Тип: showcase
Контекст перед видео
Этот маршрут нужен, чтобы быстро пройти полный цикл: собрать простой макет, проверить адаптив и сохранить работу.
Перед началом посмотрите на итог маршрута: простой материал собирается в двух версиях и проверяется на обеих ширинах.
Видео
Метка
<!-- @video first-article-result-showcase
goal: Показать результат первого рабочего цикла от структуры в Edit до Desktop и Mobile в Preview.
kind: showcase
fixture: editor-basics
scenario: first-article-result-showcase
start: В Edit открыт готовый учебный материал с Desktop и Mobile, во вкладке Layers раскрыты оба фрейма.
steps: Коротко выделить Desktop и Mobile в Layers; перейти в Preview; показать 960 px; переключить на 400 px; вернуться в Edit и нажать Save.
result: Видна структура двух самостоятельных фреймов, обе адаптивные версии и успешное завершение работы сохранением.
crop: Полный редактор с двумя фреймами, затем колонка материала в Preview.
-->Интерфейс редактора
Статус: Записано
Цель: Познакомить с основными зонами редактора и их изменением при выборе объекта и переходе в Preview.
Тип: showcase
Контекст перед видео
В редакторе четыре постоянные зоны: шапка, левая панель, холст и правая панель. Нижняя панель появляется в режиме правки и отвечает за создание виджетов.
Короткий обзор ниже показывает не только расположение зон, но и то, как панели реагируют на режим и выделение.
Видео
Метка
<!-- @video editor-interface-tour
goal: Познакомить с основными зонами редактора и их изменением при выборе объекта и переходе в Preview.
kind: showcase
fixture: editor-basics
scenario: editor-interface-tour
start: В Edit открыт материал без выделения, видны шапка, обе боковые панели, холст и нижняя панель создания.
steps: Выделить текстовый виджет; выбрать фрейм в Layers; снять выделение; нажать Minimize ui и вернуть интерфейс; перейти в Preview; вернуться в Edit.
result: Видно расположение постоянных зон, смену правой панели по выделению и отличие Edit от Preview.
crop: Полное окно редактора.
-->Шрифты материала — Настройки по умолчанию
Статус: Записано
Цель: Показать применение Default Font Settings только к новым текстовым виджетам.
Тип: comparison
Контекст перед видео
В карточке Default Font Settings задаются Family, Weight, Size и Line height. Эти значения используются как отправная точка для новых текстовых виджетов.
Создание нового текста до и после изменения настроек показывает, что значения работают как стартовые, а не переписывают существующий виджет.
Видео
Метка
<!-- @video fonts-default-settings
goal: Показать применение Default Font Settings только к новым текстовым виджетам.
kind: comparison
fixture: text-lab
scenario: fonts-default-settings
start: В Edit открыт существующий текстовый виджет, в Default Font Settings выбраны исходные значения.
steps: Создать первый текстовый виджет; изменить Family, Weight, Size и Line height в Default Font Settings; создать второй текстовый виджет рядом.
result: Первый текст сохраняет прежнее оформление, второй создаётся с новым набором параметров по умолчанию.
crop: Два текстовых виджета на холсте и карточка Default Font Settings.
-->Шрифты материала — Добавить семейство
Статус: Записано
Цель: Научить добавить семейство с двумя вариантами и применить его к тексту.
Тип: workflow
Контекст перед видео
- Нажмите
Add font family. - Введите точное название в
Font family. - Нажмите
Add variant. - Выберите Weight и Style.
- Загрузите доступные web-font файлы для варианта.
- Повторите для остальных начертаний и нажмите
Save.
Один файл должен соответствовать выбранной паре Weight / Style. Если в макете нужны Regular, Bold и Italic, добавьте три варианта.
Skip on client оставляет вариант вне клиентской части материала. Используйте эту настройку только по договорённости с командой проекта: в превью редактора и на сайте набор шрифтов может различаться.
Если закрыть окно с несохранёнными изменениями, редактор попросит подтвердить их удаление.
После добавления семейство появляется в Typography текстового виджета и в стилях текста.
Полный сценарий должен закончиться выбором нового семейства в Typography, чтобы загрузка не оставалась неподтверждённой.
Видео
Метка
<!-- @video fonts-add-family
goal: Научить добавить семейство с двумя вариантами и применить его к тексту.
kind: workflow
fixture: text-lab
scenario: fonts-add-family
start: Открыто окно Fonts без пользовательского семейства, подготовлены два корректных web-font файла одного семейства.
steps: Нажать Add font family; ввести Font family; добавить варианты Regular и Bold; загрузить соответствующие файлы; нажать Save; выделить текст; выбрать новое семейство и Bold в Typography.
result: Семейство появляется в списке Fonts и применяется к выделенному тексту с выбранным вариантом.
crop: Окно Fonts, затем текстовый виджет и секция Typography.
-->Стили текста — Создать стиль
Статус: Записано
Цель: Научить создать Text Style из оформленного текста и применить его к другому заголовку.
Тип: workflow
Контекст перед видео
- Оформите текст в
TypographyиParagraph. - Откройте
Text Styles→Create from selection. - Введите название в
Style nameи нажмитеCreate.
Стиль хранит шрифт, начертание, размер, line height, tracking, декорацию, регистр и отступы абзаца. Цвет, ссылки, обводка и тень в него не входят.
Сценарий ниже заканчивается применением нового пресета к другому заголовку, а не только его созданием.
Видео
Метка
<!-- @video text-style-create-apply-workflow
goal: Научить создать Text Style из оформленного текста и применить его к другому заголовку.
kind: workflow
fixture: text-lab
scenario: text-style-create-apply-workflow
start: Оформлен первый заголовок, ниже виден второй заголовок без этого оформления, Text Styles раскрыта.
steps: Выбрать Create from selection; ввести название Заголовок; нажать Create; выделить второй заголовок; выбрать Заголовок в поле Style.
result: Новый пресет появляется в Text Styles, а второй заголовок получает сохранённые Typography и Paragraph.
crop: Оба заголовка и секция Text Styles с диалогом создания и полем Style.
-->Стили текста — Применить и обновить
Статус: Записано
Цель: Показать обновление пресета из выделения и необходимость повторно применить его к существующему тексту.
Тип: workflow
Контекст перед видео
Выберите пресет в поле Style. Если текущие параметры не совпадают ни с одним стилем, редактор показывает Custom.
Команда Manage text styles… открывает полный список. В меню пресета доступны:
Rename;Update from selection;Delete.
Обновление пресета меняет сохранённые значения стиля. Уже оформленный текст не следует за ним автоматически: примените обновлённый стиль там, где нужен новый набор параметров.
Важно показать этот неавтоматический шаг: после обновления уже оформленный текст меняется только при повторном применении пресета.
Видео
Метка
<!-- @video text-style-update-reapply
goal: Показать обновление пресета из выделения и необходимость повторно применить его к существующему тексту.
kind: workflow
fixture: text-lab
scenario: text-style-update-reapply
start: Два заголовка оформлены одним стилем, у первого вручную изменён размер и поле Style показывает Custom.
steps: Открыть Manage text styles; выбрать Update from selection для пресета; показать второй заголовок без изменений; выделить второй заголовок; повторно выбрать обновлённый пресет.
result: Пресет получает новый размер, второй заголовок сохраняет старый до повторного применения и затем обновляется.
crop: Два заголовка и меню управления Text Styles.
-->Заливка и прозрачность — Fill
Статус: Записано
Цель: Показать выбор и настройку сплошной, линейной и радиальной заливки.
Тип: workflow
Контекст перед видео
Fill задаёт фон виджета. Это может быть сплошной цвет, градиент или изображение — редактор покажет только подходящие для выбранного виджета варианты.
У виджета Image есть собственный файл изображения. Не путайте его с фоновой заливкой: файл определяет содержимое, а Fill — фон контейнера.
Переключение между сплошным цветом, линейным и радиальным градиентом покажет, какие параметры появляются для каждого типа.
Видео
Метка
<!-- @video style-fill-types
goal: Показать выбор и настройку сплошной, линейной и радиальной заливки.
kind: workflow
fixture: style-lab
scenario: style-fill-types
start: В Edit выделена крупная фигура со сплошной заливкой, секция Style раскрыта.
steps: Изменить цвет; переключить Fill на линейный градиент и настроить две точки; изменить направление; переключить на радиальный градиент.
result: Фигура сразу отражает каждый тип заливки, а панель показывает соответствующие ему параметры.
crop: Фигура и секция Fill в правой панели.
-->Заливка и прозрачность — Opacity
Статус: Записано
Цель: Сравнить Opacity виджета и альфа-канал цвета заливки.
Тип: comparison
Контекст перед видео
Opacity меняет прозрачность всего виджета вместе с его содержимым. Если нужно сделать полупрозрачным только цвет, измените прозрачность в самом выборе цвета.
Сравнение на фигуре с текстом внутри отделяет прозрачность всего контейнера от прозрачности только фонового цвета.
Видео
Метка
<!-- @video style-opacity-comparison
goal: Сравнить Opacity виджета и альфа-канал цвета заливки.
kind: comparison
fixture: style-lab
scenario: style-opacity-comparison
start: В Edit видны две одинаковые фигуры с текстом внутри, обе полностью непрозрачны.
steps: У первой уменьшить Opacity виджета; у второй оставить Opacity 100% и уменьшить прозрачность цвета Fill.
result: У первой бледнеют фон и содержимое, у второй прозрачным становится только фон, а текст сохраняет непрозрачность.
crop: Две подписанные фигуры и секция Style.
-->Заливка и прозрачность — Border radius
Статус: Записано
Цель: Показать раздельное скругление углов и влияние Smoothing у Shape.
Тип: behavior
Контекст перед видео
Border radius скругляет углы. Значения можно менять сразу для всех углов или по отдельности.
У Shape также доступен Smoothing: он делает переходы между сторонами и скруглениями мягче.
Отдельные углы и Smoothing лучше показать на контрастной фигуре, где изменение контура читается сразу.
Видео
Метка
<!-- @video style-border-radius-smoothing
goal: Показать раздельное скругление углов и влияние Smoothing у Shape.
kind: behavior
fixture: style-lab
scenario: style-border-radius-smoothing
start: В Edit выделена контрастная прямоугольная Shape с нулевым Border radius и Smoothing.
steps: Переключить Border radius на раздельные значения; увеличить только два противоположных угла; плавно увеличить Smoothing.
result: Скругляются только выбранные углы, а Smoothing заметно смягчает переходы контура.
crop: Фигура и поля Border radius и Smoothing.
-->Расположение и размер — Размер
Статус: Записано
Цель: Показать изменение размера с сохранением пропорций и без него.
Тип: comparison
Контекст перед видео
Поля W и H задают ширину и высоту. Кнопка между ними сохраняет пропорции: при изменении одной стороны редактор пересчитает вторую.
На изображении с известными пропорциями хорошо видно, когда связка W/H включена и когда стороны меняются независимо.
Видео
Метка
<!-- @video layout-aspect-ratio
goal: Показать изменение размера с сохранением пропорций и без него.
kind: comparison
fixture: style-lab
scenario: layout-aspect-ratio
start: В Edit выделено изображение, поля W и H видны, сохранение пропорций включено.
steps: Изменить W и показать автоматический пересчёт H; выключить связь; снова изменить W.
result: При включённой связи обе стороны меняются пропорционально, при выключенной изменяется только введённая сторона.
crop: Изображение на холсте и поля W, H с кнопкой связи.
-->Расположение и размер — Размер
Статус: Записано
Цель: Сравнить изменение высоты текста в режимах Auto и Fixed.
Тип: comparison
Контекст перед видео
У текста высота может быть автоматической. В режиме Auto блок растёт вместе с содержимым, поэтому поле H недоступно. Переключитесь на Fixed, если нужна точная высота и обрезка лишнего текста.
Добавление строки в одинаковые текстовые блоки наглядно показывает рост Auto и обрезку Fixed.
Видео
Метка
<!-- @video layout-text-auto-fixed
goal: Сравнить изменение высоты текста в режимах Auto и Fixed.
kind: comparison
fixture: text-lab
scenario: layout-text-auto-fixed
start: В Edit рядом стоят два одинаковых текстовых виджета, первый в Auto, второй в Fixed с ограниченной высотой.
steps: Добавить одинаковую длинную строку в первый виджет; добавить её во второй; снять выделение.
result: Auto-виджет увеличивается по высоте, Fixed сохраняет размер и обрезает не помещающееся содержимое.
crop: Два подписанных текстовых виджета и переключатель Resizing.
-->Расположение и размер — Поворот
Статус: Записано
Цель: Научить повернуть виджет ручкой и уточнить Rotation числовым вводом.
Тип: workflow
Контекст перед видео
Поле Rotation поворачивает виджет вокруг его центра. Поворот можно задавать числом или менять прямо на холсте.
Ручка на холсте должна непрерывно следовать за указателем, после чего точное значение можно уточнить числом.
Видео
Метка
<!-- @video layout-rotation-drag-input
goal: Научить повернуть виджет ручкой и уточнить Rotation числовым вводом.
kind: workflow
fixture: style-lab
scenario: layout-rotation-drag-input
start: В Edit выделена несимметричная фигура с Rotation 0, видна ручка поворота.
steps: Плавно перетащить ручку до заметного угла и отпустить; выбрать поле Rotation; ввести точное значение.
result: Фигура вращается вокруг центра вместе с указателем и заканчивает с точно введённым углом.
crop: Фигура, ручка поворота и поле Rotation.
-->Расположение и размер — Несколько виджетов
Статус: Записано
Цель: Научить собрать из нескольких виджетов ровную колонку с общей шириной и интервалами.
Тип: workflow
Контекст перед видео
При множественном выделении в Layout появляются команды выравнивания и распределения. Они помогают быстро собрать ровный ряд или колонку.
Команда Into Column ставит выбранные виджеты друг под другом. Перед применением можно задать общую ширину и расстояние между ними.
При выравнивании редактор использует общие границы выделения. Для равных интервалов выберите не меньше трёх виджетов: крайние останутся на месте, а остальные распределятся между ними.
Один ролик может показать последовательную сборку аккуратной колонки: общая ширина, Into Column и равные интервалы.
Видео
Метка
<!-- @video layout-multiple-widgets-column
goal: Научить собрать из нескольких виджетов ровную колонку с общей шириной и интервалами.
kind: workflow
fixture: layout-structure
scenario: layout-multiple-widgets-column
start: В Edit выделены четыре виджета разной ширины и с неровными вертикальными расстояниями, секция Layout открыта.
steps: Задать общую ширину; открыть Into Column; задать Gap; применить; выполнить выравнивание по левому краю.
result: Виджеты получают одинаковую ширину и выстраиваются в вертикальную колонку с равными интервалами.
crop: Все выбранные виджеты и команды множественного Layout.
-->Ссылка — Переход к якорю
Статус: Записано
Цель: Научить настроить ссылку на якорь и исправить предупреждение для неизвестного имени.
Тип: workflow
Контекст перед видео
Чтобы перейти к месту внутри материала, укажите адрес вида #name. Такое имя должно быть добавлено в секции Anchors нужного фрейма.
Если якоря с таким именем нет, редактор покажет предупреждение.
Сценарий ниже показывает и проверку имени, и рабочий переход к существующему якорю.
Видео
Метка
<!-- @video link-anchor-setup-validation
goal: Научить настроить ссылку на якорь и исправить предупреждение для неизвестного имени.
kind: workflow
fixture: long-scroll-story
scenario: link-anchor-setup-validation
start: В Edit выделена кнопка без Link, в том же breakpoint-фрейме уже есть якорь details.
steps: Добавить Link; ввести несуществующий #detail и показать предупреждение; исправить адрес на #details; перейти в Preview; нажать кнопку.
result: Предупреждение исчезает после исправления, а Preview прокручивается к якорю details.
crop: Кнопка и секция Link, затем участок Preview от кнопки до целевого блока.
-->Обводка — Настройка обводки
Статус: Записано
Цель: Научить создать одностороннюю обводку через Custom.
Тип: workflow
Контекст перед видео
All sidesприменяет одинаковую обводку ко всем сторонам.Customпозволяет выбрать отдельные стороны.Solid,DashedиDottedзадают тип линии.Colorменяет цвет и его прозрачность.Widthзадаёт толщину.
У Shape дополнительно можно выбрать положение линии относительно контура. Для обычной линии эта настройка не нужна.
Тонкий разделитель удобно собрать через Custom, оставив включённой только нижнюю сторону.
Видео
Метка
<!-- @video stroke-custom-sides
goal: Научить создать одностороннюю обводку через Custom.
kind: workflow
fixture: style-lab
scenario: stroke-custom-sides
start: В Edit выделена прямоугольная фигура с включённой только нижней стороной через Custom, секция Stroke раскрыта.
steps: Выбрать нижнюю сторону; сравнить Dotted и Solid; задать цвет и Width 1 px.
result: У фигуры остаётся только тонкая нижняя линия с выбранными типом, цветом и толщиной.
crop: Фигура и вся добавленная строка Stroke.
-->Обводка — Настройка обводки
Статус: Записано
Цель: Сравнить положение обводки Inside, Center и Outside относительно контура Shape.
Тип: comparison
Контекст перед видео
Кнопка удаления в заголовке секции убирает обводку. У Shape настройка Align размещает линию внутри контура, по центру или снаружи.
Толстая контрастная обводка на простой фигуре хорошо показывает разницу между тремя положениями линии.
Видео
Метка
<!-- @video stroke-align-comparison
goal: Сравнить положение обводки Inside, Center и Outside относительно контура Shape.
kind: comparison
fixture: style-lab
scenario: stroke-align-comparison
start: В Edit выделена крупная Shape с толстой контрастной обводкой, секция Stroke раскрыта, Align установлен в Inside.
steps: Переключить Align на Center; переключить на Outside; вернуться к Inside.
result: Видно, как одна и та же линия последовательно занимает внутреннее, центральное и внешнее положение относительно контура.
crop: Фигура и строка Align в секции Stroke.
-->Эффекты — Доступные эффекты
Статус: Записано
Цель: Научить собрать многослойную тень и проверить вклад каждого эффекта.
Тип: workflow
Контекст перед видео
Drop shadow— тень снаружи виджета.Inner shadow— тень внутри виджета.Layer blur— размытие всего виджета.Blend mode— смешивание виджета с содержимым под ним.
У тени можно настроить смещение, размытие, растяжение и цвет. Blend mode меняет способ смешивания виджета с фоном под ним.
Несколько теней стоит показать на одной светлой карточке, где видны порядок, временное отключение и разные параметры.
Видео
Метка
<!-- @video effects-multiple-shadows
goal: Научить собрать многослойную тень и проверить вклад каждого эффекта.
kind: workflow
fixture: style-lab
scenario: effects-multiple-shadows
start: В Edit выделена светлая карточка без эффектов на нейтральном фоне, секция Effects раскрыта.
steps: Добавить Drop shadow с мягким размытием; добавить вторую более короткую тень; временно выключить первую тень; включить её повторно.
result: Карточка получает составную тень, а отключение одного эффекта наглядно показывает вклад каждого слоя.
crop: Карточка и список Effects.
-->Эффекты — Доступные эффекты
Статус: Записано
Цель: Сравнить несколько режимов Blend mode на одной композиции.
Тип: comparison
Контекст перед видео
Режимы смешивания проще сравнивать на одной фигуре поверх контрастного фона.
Видео
Метка
<!-- @video effects-blend-mode-comparison
goal: Сравнить несколько режимов Blend mode на одной композиции.
kind: comparison
fixture: style-lab
scenario: effects-blend-mode-comparison
start: В Edit выделена цветная фигура поверх тёмного и цветного фона, Blend mode установлен в Normal.
steps: Переключить режим на Multiply; затем на Screen; завершить на Difference.
result: Одна и та же фигура заметно меняет взаимодействие с фоном в зависимости от выбранного режима.
crop: Пересечение фигур на холсте и настройки Blend mode.
-->Обтекание текстом
Статус: Записано
Цель: Показать живое перестроение текста вокруг перемещаемого виджета.
Тип: behavior
Контекст перед видео
Text Wrap позволяет тексту огибать виджет. Настройка доступна у Image, Shape, Video, Embed и Slider.
- Выделите виджет, который должен обтекать текст.
- Добавьте
Text Wrapкнопкой+. - Задайте
Padding— расстояние между виджетом и текстом. - Проверьте результат в предпросмотре.
При перемещении изображения текст должен перестраиваться непрерывно, сохраняя заданный отступ.
Видео
Метка
<!-- @video text-wrap-drag-reflow
goal: Показать живое перестроение текста вокруг перемещаемого виджета.
kind: behavior
fixture: text-lab
scenario: text-wrap-drag-reflow
start: В Edit изображение с включённым Text Wrap и заметным Padding находится у левого края длинного текста.
steps: Плавно перетащить изображение к правому краю текста; изменить его ширину ручкой; отпустить.
result: Строки непрерывно обтекают новую позицию и размер изображения, сохраняя отступ.
crop: Изображение, окружающий текст и границы выбранного виджета.
-->Обтекание текстом
Статус: Записано
Цель: Показать влияние Padding на расстояние между виджетом и обтекающим текстом.
Тип: behavior
Контекст перед видео
Изменение Padding полезно показать отдельно: геометрия виджета остаётся прежней, меняется только дистанция до строк.
Видео
Метка
<!-- @video text-wrap-padding
goal: Показать влияние Padding на расстояние между виджетом и обтекающим текстом.
kind: behavior
fixture: text-lab
scenario: text-wrap-padding
start: В Edit выделено изображение внутри текста, Text Wrap включён, Padding установлен в ноль.
steps: Плавно увеличить Padding до заметного значения; уменьшить до промежуточного; снять выделение.
result: Текст отступает от неизменной границы изображения на заданное расстояние.
crop: Изображение с ближайшими строками и поле Padding.
-->Embed
Статус: Записано
Цель: Показать переключение Embed между Edit и Preview и сравнить Iframe On и Off.
Тип: comparison
Контекст перед видео
Embed размещает внутри макета внешний или HTML-контент. Его содержимое настраивается в самом виджете на холсте.
В секции Html есть два переключателя:
Mode→Editпозволяет работать с содержимым,Previewпоказывает результат;Iframe→Onизолирует содержимое во фрейме,Offоставляет обычный режим.
Один и тот же интерактивный фрагмент должен показать отличие редактирования от результата и влияние изоляции Iframe.
Видео
Метка
<!-- @video embed-edit-preview-iframe
goal: Показать переключение Embed между Edit и Preview и сравнить Iframe On и Off.
kind: comparison
fixture: widgets-lab
scenario: embed-edit-preview-iframe
start: В Edit выделен Embed с подготовленным HTML, Mode → Edit и Iframe → Off.
steps: Изменить короткий текст внутри Embed; переключить Mode → Preview; взаимодействовать с результатом; включить Iframe; повторить взаимодействие.
result: Изменение из Edit появляется в Preview, а Iframe изолирует тот же контент без изменения его видимого результата.
crop: Embed на холсте и секция Html.
-->Фрейм — Anchors
Статус: Записано
Цель: Научить добавить два якоря и настроить для них разные параметры в режиме Custom.
Тип: workflow
Контекст перед видео
Якорь — именованная вертикальная точка внутри breakpoint-фрейма. Добавьте якоря в секции Anchors и выберите режим:
Sameиспользует общие duration, offset и easing;Customпозволяет настроить прокрутку для каждого якоря отдельно.
Имена якорей должны быть понятными и различаться внутри фрейма.
Сначала нужно показать создание двух точек и раздельную настройку Custom, а затем проверить фактическую прокрутку.
Видео
Метка
<!-- @video frame-anchors-setup
goal: Научить добавить два якоря и настроить для них разные параметры в режиме Custom.
kind: workflow
fixture: long-scroll-story
scenario: frame-anchors-setup
start: В Edit выделен длинный breakpoint-фрейм без якорей, секция Anchors раскрыта.
steps: Добавить якорь intro; добавить якорь details; переключить режим на Custom; задать для details отдельные duration, offset и easing.
result: В списке видны два именованных якоря, а details хранит собственные параметры прокрутки.
crop: Длинный фрейм на холсте и секция Anchors.
-->Фрейм — Anchors
Статус: Записано
Цель: Показать плавный переход к якорю с настроенными duration, offset и easing.
Тип: behavior
Контекст перед видео
Проверка в Preview должна закончиться на целевом блоке с видимым отступом, а не только запуском ссылки.
Видео
Метка
<!-- @video frame-anchor-round-trip
goal: Показать плавный переход к якорю с настроенными duration, offset и easing.
kind: behavior
fixture: long-scroll-story
scenario: frame-anchor-round-trip
start: Preview открыт у кнопки со ссылкой на #details, целевой блок находится ниже viewport.
steps: Нажать кнопку; дождаться окончания прокрутки; нажать ссылку возврата к #intro.
result: Preview плавно останавливается у обоих якорей с настроенными отступами относительно viewport.
crop: Колонка материала от управляющей кнопки до целевых блоков в Preview.
-->Фрейм — Color Changers
Статус: Записано
Цель: Сравнить визуальный характер Crossfade, Overlay и Blocks у одинаковых цветовых меток.
Тип: comparison
Контекст перед видео
Color Changer меняет фон материала и базовый цвет текста при прокрутке до заданной точки. Он доступен только для Breakpoint.
Основные настройки:
Scope:Articleограничивает фон материалом,Siteрастягивает его на ширину окна;Mode:Crossfade,Overlayили вертикальныеBlocks;Attachment:Localпрокручивается вместе с материалом,Fixedостаётся во viewport;Mixing:Timedсмешивает слои по времени,Scroll— по прогрессу прокрутки;Durationзадаёт длительность дляTimed;Preview in editorпоказывает результат прямо на холсте.
У каждой метки задаются позиция Y, фон и цвет текста. Локально заданный цвет в текстовом виджете остаётся приоритетным.
Сравнение режимов на одной композиции должно показать характер перехода, не перегружая ролик всеми полями секции.
Видео
Метка
<!-- @video frame-color-changer-modes
goal: Сравнить визуальный характер Crossfade, Overlay и Blocks у одинаковых цветовых меток.
kind: comparison
fixture: long-scroll-story
scenario: frame-color-changer-modes
start: Preview открыт у одной подписанной цветовой композиции в режиме Crossfade.
steps: Прокрутить композицию в Crossfade; переключить ту же композицию на Overlay и повторить; переключить на Blocks и повторить.
result: На одной и той же композиции различимо смешивание Crossfade, наложение Overlay и вертикальная смена Blocks.
crop: Одна цветовая композиция в Preview и поле Mode при переключении между проходами.
-->Фрейм — Color Changers
Статус: Записано
Цель: Показать последовательную смену фона и базового цвета текста по меткам при прокрутке в обе стороны.
Тип: behavior
Контекст перед видео
Основной рабочий пример показывает смену нескольких меток при прямой и обратной прокрутке, включая базовый цвет текста.
Видео
Метка
<!-- @video frame-color-changer-scroll
goal: Показать последовательную смену фона и базового цвета текста по меткам при прокрутке в обе стороны.
kind: behavior
fixture: long-scroll-story
scenario: frame-color-changer-scroll
start: Preview открыт до первой из трёх Color Changer-меток, у каждой подготовлены контрастные фон и цвет текста.
steps: Плавно прокрутить через все три метки; сделать паузу после последней; плавно вернуться к первой.
result: Фон материала и базовый цвет текста меняются у каждой метки и восстанавливаются в обратном порядке.
crop: Колонка материала с текстовыми ориентирами и видимым фоном Preview.
-->Группа — Создать и разобрать группу
Статус: Записано
Цель: Показать совместное перемещение и пропорциональное масштабирование содержимого группы.
Тип: behavior
Контекст перед видео
- Выделите два или больше виджета.
- Откройте контекстное меню и выберите
Groupили нажмите⌘G/Ctrl+G. - Переименуйте новую группу во вкладке
Layers.
Для обратного действия выберите Ungroup или нажмите ⇧⌘G / Ctrl+Shift+G.
Размер группы меняет масштаб вложенных виджетов. Перемещение группы сохраняет их взаимное расположение.
Drag и resize одной группы должны показать, что дочерние элементы следуют за рамкой как единая композиция.
Видео
Метка
<!-- @video group-drag-resize
goal: Показать совместное перемещение и пропорциональное масштабирование содержимого группы.
kind: behavior
fixture: widgets-lab
scenario: group-drag-resize
start: В Edit выделена группа из текста, фигуры и изображения, видны её границы и дочерние строки в Layers.
steps: Плавно перетащить группу на свободное место; перетащить угловую ручку и уменьшить группу; отпустить.
result: Все дочерние виджеты движутся вместе и масштабируются с сохранением взаимного расположения.
crop: Группа на холсте и её раскрытая ветка в Layers.
-->Изображение — Settings
Статус: Записано
Цель: Сравнить Original, Fill и Fit на одном изображении при неизменном размере виджета.
Тип: comparison
Контекст перед видео
Загрузите или замените файл, затем выберите Fill mode:
Originalсохраняет естественный размер изображения;Fillзаполняет виджет с возможной обрезкой;Fitпомещает изображение целиком.
Три режима стоит сравнить на одном панорамном файле внутри неизменной рамки виджета.
Видео
Метка
<!-- @video image-fill-mode-comparison
goal: Сравнить Original, Fill и Fit на одном изображении при неизменном размере виджета.
kind: comparison
fixture: widgets-lab
scenario: image-fill-mode-comparison
start: В Edit выделен Image с панорамным файлом и фиксированной прямоугольной рамкой, Asset открыт.
steps: Выбрать Original; выбрать Fill; выбрать Fit.
result: Original показывает естественный размер, Fill заполняет рамку с обрезкой, Fit помещает файл целиком с незаполненными областями.
crop: Image на холсте и выбор Fill mode в панели Asset.
-->Изображение — Settings
Статус: Записано
Цель: Научить выбрать область изображения рамкой Crop и применить кадрирование.
Тип: workflow
Контекст перед видео
Поле с подсказкой Describe the image for screen readers задаёт альтернативное описание.
Чтобы кадрировать изображение, измените рамку на холсте и нажмите Apply в строке Crop. Без этого действие не сохраняется. Remove BG запускает удаление фона.
В кадрировании важно показать непрерывный drag рамки и отдельное подтверждение Apply.
Видео
Метка
<!-- @video image-crop-apply
goal: Научить выбрать область изображения рамкой Crop и применить кадрирование.
kind: workflow
fixture: widgets-lab
scenario: image-crop-apply
start: Для выбранного Image открыт Crop, рамка занимает весь исходный файл, видна кнопка Apply.
steps: Плавно перетащить рамку на новую область; изменить размер угловой ручкой; нажать Apply.
result: Рамка следует за указателем, а после Apply виджет на холсте показывает выбранную область.
crop: Image на холсте и открытый Crop с рамкой и кнопкой Apply.
-->Изображение — Filters
Статус: Записано
Цель: Показать живую коррекцию изображения и отражение по горизонтали и вертикали.
Тип: workflow
Контекст перед видео
Режим Filters содержит Exposure, Contrast, Saturation, Temperature, Tint, Highlights и Shadows. Над превью есть отражение по горизонтали и вертикали. Изменения видны на холсте до закрытия панели.
Короткая коррекция и отражение покажут живой результат фильтров без перечисления каждого ползунка.
Видео
Метка
<!-- @video image-filters-flip
goal: Показать живую коррекцию изображения и отражение по горизонтали и вертикали.
kind: workflow
fixture: widgets-lab
scenario: image-filters-flip
start: В Edit выделено контрастное Image, открыт режим Filters, все значения находятся в исходном состоянии.
steps: Увеличить Exposure; уменьшить Saturation; изменить Temperature; отразить по горизонтали; затем по вертикали.
result: Каждое изменение сразу видно на холсте, ориентация файла соответствует активным кнопкам отражения.
crop: Image на холсте и панель Filters.
-->Виджеты — Как создать виджет
Статус: Записано
Цель: Сравнить создание виджета рисованием на холсте и двойным кликом по кнопке.
Тип: comparison
Контекст перед видео
Нажмите кнопку нужного типа на нижней панели, затем протяните прямоугольник на холсте. Двойной клик по кнопке сразу создаёт виджет размером 300 × 200 px в центре видимой области.
Два способа создания стоит сравнить рядом: рисование задаёт размер и место, двойной клик использует стандартную геометрию.
Видео
Метка
<!-- @video widget-create-draw-double-click
goal: Сравнить создание виджета рисованием на холсте и двойным кликом по кнопке.
kind: comparison
fixture: widgets-lab
scenario: widget-create-draw-double-click
start: В Edit открыт пустой участок Desktop, нижняя панель создания видна.
steps: Нажать Shape и протянуть прямоугольник на холсте; дважды нажать Text; снять выделение.
result: Shape появляется в нарисованной области, Text создаётся размером 300 × 200 px в центре видимой области.
crop: Пустой участок Desktop и нижняя панель создания.
-->Фигура — Многоугольники и звёзды
Статус: Записано
Цель: Показать превращение Triangle в многоугольник и звезду через Points, Inner radius и Angle.
Тип: behavior
Контекст перед видео
У Triangle доступны Points, Inner radius и Angle. Три точки дают треугольник, большее значение — многоугольник. Уменьшение Inner radius чередует внешний и внутренний радиус и превращает форму в звезду.
Corner smoothing смягчает вершины. Это отдельная настройка от общего радиуса углов виджета.
Плавное изменение Points, Inner radius и Angle должно показать переход от многоугольника к звезде без смены виджета.
Видео
Метка
<!-- @video shape-polygon-star-controls
goal: Показать превращение Triangle в многоугольник и звезду через Points, Inner radius и Angle.
kind: behavior
fixture: widgets-lab
scenario: shape-polygon-star-controls
start: В Edit выделена крупная Shape типа Triangle с тремя точками и максимальным Inner radius.
steps: Увеличить Points до шести; плавно уменьшить Inner radius; изменить Angle; увеличить Corner smoothing.
result: Форма становится шестиугольником, затем звездой, поворачивается и получает сглаженные вершины.
crop: Фигура и поля Points, Inner radius, Angle и Corner smoothing.
-->Фигура — Линия
Статус: Записано
Цель: Показать доступные оформления начала и конца линии и источник её цвета и толщины.
Тип: workflow
Контекст перед видео
У линии можно оформить начало и конец: оставить плоскими или скруглёнными, добавить стрелку, круг или ромб. Цвет и толщина берутся из Stroke, если обводка включена; иначе используется цвет из Style.
Контрастные варианты начала и конца удобно менять на длинной горизонтальной линии.
Видео
Метка
<!-- @video shape-line-endings
goal: Показать доступные оформления начала и конца линии и источник её цвета и толщины.
kind: workflow
fixture: widgets-lab
scenario: shape-line-endings
start: В Edit выделена длинная Shape типа Line с плоскими концами и выключенным Stroke.
steps: Поставить круг в начале и стрелку в конце; включить Stroke; изменить цвет и Width; заменить конец на ромб.
result: Маркеры концов меняются отдельно, а активный Stroke управляет цветом и толщиной всей линии.
crop: Линия и связанные поля Style и Stroke.
-->Слайдер
Статус: Записано
Цель: Показать управление изображениями и подписями Slider.
Тип: workflow
Контекст перед видео
Слайдер собирает несколько изображений в одну область.
Изображения можно добавлять, удалять и менять местами. Режим caption добавляет подписи и открывает Caption Style: шрифт, размер, line height, tracking, выравнивание, декорацию, цвет и расположение внутри или снаружи изображения.
Первый сценарий показывает работу с содержимым: порядок кадров, подпись и её положение поверх изображения.
Видео
Метка
<!-- @video slider-content-order-caption
goal: Показать управление изображениями и подписями Slider.
kind: workflow
fixture: slider-gallery
scenario: slider-content-order-caption
start: В Edit выделен Slider с четырьмя изображениями, секция Content раскрыта, caption выключен.
steps: Перетащить последнее изображение на первое место; включить caption; ввести подпись для активного изображения; переключить Caption Style в Inside.
result: Порядок изображений меняется, а настроенная подпись появляется поверх активного слайда.
crop: Slider, секция Content и Caption Style.
-->Слайдер — Parameters
Статус: Записано
Цель: Сравнить несколько типов и направлений перехода Slider на одинаковом наборе кадров.
Тип: showcase
Контекст перед видео
Здесь настраиваются тип и направление перехода, его длительность, начальный слайд, расстояние между слайдами, курсор, количество видимых слайдов и зацикливание. Дополнительные поля зависят от выбранного эффекта.
Три коротких подписанных примера позволяют сравнить типы переходов без перенастройки одного Slider во время просмотра.
Видео
Метка
<!-- @video slider-transition-showcase
goal: Сравнить несколько типов и направлений перехода Slider на одинаковом наборе кадров.
kind: showcase
fixture: slider-gallery
scenario: slider-transition-showcase
start: Preview открыт перед тремя одинаковыми Slider с разными подписанными эффектами и одинаковой Duration.
steps: Переключить первый Slider; переключить второй; переключить третий; в одном примере пройти назад.
result: Для одного набора кадров различимы характер и направление каждого перехода.
crop: Три подписанных Slider в Preview без панелей редактора.
-->Слайдер — Parameters
Статус: Записано
Цель: Показать влияние количества видимых слайдов, Gap и Loop на прокрутку ленты.
Тип: behavior
Контекст перед видео
Количество видимых слайдов, расстояние и loop нужно показать вместе на широкой ленте, где одновременно видны соседние кадры.
Видео
Метка
<!-- @video slider-visible-slides-loop
goal: Показать влияние количества видимых слайдов, Gap и Loop на прокрутку ленты.
kind: behavior
fixture: slider-gallery
scenario: slider-visible-slides-loop
start: Preview открыт, Slider показывает по три из пяти пронумерованных кадров, Gap заметен, Loop включён.
steps: Пролистать вперёд через последний исходный кадр; продолжить ещё на один шаг; пролистать назад через начало.
result: Одновременно остаются видны три кадра с заданным расстоянием, а Loop бесшовно продолжает ленту в обе стороны.
crop: Slider целиком в Preview.
-->Слайдер — Navigation и Pagination
Статус: Записано
Цель: Показать переключение слайдов через Navigation, кликабельную Pagination и drag.
Тип: behavior
Контекст перед видео
Navigation добавляет кнопки и управляет их расположением и оформлением. Pagination добавляет точки или другой индикатор, позволяет настроить активное и неактивное состояния и сделать индикатор кликабельным.
Управление стоит проверить каждым доступным способом, следя за активным индикатором.
Видео
Метка
<!-- @video slider-navigation-pagination
goal: Показать переключение слайдов через Navigation, кликабельную Pagination и drag.
kind: behavior
fixture: slider-gallery
scenario: slider-navigation-pagination
start: Preview открыт, Slider с четырьмя кадрами показывает первый; Navigation и кликабельная Pagination включены.
steps: Нажать Navigation вперёд; нажать точку четвёртого кадра; плавно перетащить слайд указателем назад.
result: Slider меняет кадр всеми тремя способами, активный индикатор каждый раз соответствует показанному слайду.
crop: Slider вместе с Navigation и Pagination в Preview.
-->Слайдер — Auto play
Статус: Записано
Цель: Показать Auto play, паузу при наведении и продолжение после ухода указателя.
Тип: behavior
Контекст перед видео
После добавления Auto play задайте направление, поведение после действий читателя, задержку, паузу при наведении и остановку на последнем слайде.
Пауза при наведении и продолжение после ухода курсора должны быть видны на счётчике пронумерованных кадров.
Видео
Метка
<!-- @video slider-autoplay-hover
goal: Показать Auto play, паузу при наведении и продолжение после ухода указателя.
kind: behavior
fixture: slider-gallery
scenario: slider-autoplay-hover
start: Preview открыт, Slider с короткой Delay автоматически показывает первый пронумерованный кадр, Pause on hover включён.
steps: Дождаться автоматического перехода; навести указатель и удерживать дольше Delay; убрать указатель; дождаться следующего перехода; выполнить ручной переход.
result: Без указателя кадры меняются автоматически, под указателем останавливаются и продолжаются после ухода согласно настройке действий читателя.
crop: Slider и указатель в Preview, номера кадров хорошо читаются.
-->Текст
Статус: Записано
Цель: Показать разницу между форматированием выделенного фрагмента и всего текстового виджета.
Тип: comparison
Контекст перед видео
Текст редактируется прямо на холсте. Правая панель управляет выбранным фрагментом или всем содержимым виджета — в зависимости от текущего выделения внутри текста.
Сравнение выделенного слова и всего виджета показывает, на какой объём текста применится следующая настройка.
Видео
Метка
<!-- @video text-selection-scope
goal: Показать разницу между форматированием выделенного фрагмента и всего текстового виджета.
kind: comparison
fixture: text-lab
scenario: text-selection-scope
start: В Edit открыт текстовый виджет с двумя предложениями, курсор находится внутри текста без выделенного фрагмента.
steps: Выделить одно слово и изменить Color; выйти из редактирования, выделив весь виджет; изменить Font Size.
result: Цвет применяется только к слову, а размер шрифта меняется у всего содержимого виджета.
crop: Текстовый виджет и секция Typography.
-->Текст — Typography
Статус: Записано
Цель: Показать типографирование выделенного текста и видимые изменения символов.
Тип: workflow
Контекст перед видео
Здесь находятся семейство и вариант шрифта, размер, line height, tracking, цвет и выравнивание. Кнопка Typograf отправляет текст на типографирование.
Короткий фрагмент с кавычками, тире и неразрывными конструкциями позволяет увидеть результат Typograf сразу на холсте.
Видео
Метка
<!-- @video text-typograf
goal: Показать типографирование выделенного текста и видимые изменения символов.
kind: workflow
fixture: text-lab
scenario: text-typograf
start: В Edit внутри текста выделен подготовленный фрагмент с прямыми кавычками, дефисом и числами с единицами.
steps: Нажать Typograf; дождаться обновления; снять выделение текста.
result: В тексте появляются типографские кавычки, тире и корректные неразрывные пробелы без изменения остального содержимого.
crop: Выделенный фрагмент на холсте и кнопка Typograf в Typography.
-->Текст — Ссылки, обводка и тень
Статус: Записано
Цель: Показать настройку цвета и ширины Text Stroke именно вокруг символов.
Тип: workflow
Контекст перед видео
Text Link относится к выделенному фрагменту текста. Общая секция Link делает кликабельным весь виджет.
Text Stroke добавляет обводку символов. Text Shadow поддерживает несколько теней. Эти настройки не заменяют общие Stroke и Effects, которые оформляют прямоугольник виджета.
Обводку символов нужно показать отдельно от рамки виджета, изменяя толщину на крупном заголовке.
Видео
Метка
<!-- @video text-stroke-controls
goal: Показать настройку цвета и ширины Text Stroke именно вокруг символов.
kind: workflow
fixture: text-lab
scenario: text-stroke-controls
start: В Edit выделен крупный заголовок без Text Stroke, общий Stroke виджета выключен.
steps: Добавить Text Stroke; выбрать контрастный цвет; плавно увеличить Width; удалить обводку кнопкой минус.
result: Контур появляется вокруг символов, меняет толщину, затем исчезает и не создаёт рамку по границе текстового виджета.
crop: Крупный заголовок и секция Text Stroke.
-->Текст — Ссылки, обводка и тень
Статус: Записано
Цель: Научить собрать две независимые Text Shadow и удалить только одну из них.
Тип: workflow
Контекст перед видео
Две тени с разными смещениями показывают, как несколько записей складываются в один эффект текста. Ненужную запись можно удалить отдельно, не сбрасывая остальные.
Видео
Метка
<!-- @video text-multiple-shadows
goal: Научить собрать две независимые Text Shadow и удалить только одну из них.
kind: workflow
fixture: text-lab
scenario: text-multiple-shadows
start: В Edit выделен крупный заголовок без теней, секция Text Shadow раскрыта.
steps: Добавить мягкую тень вниз; добавить контрастную короткую тень в другую сторону; изменить параметры обеих записей; удалить первую тень кнопкой минус.
result: Обе тени одновременно видны вокруг символов, а удаление первой оставляет вторую без изменения прямоугольника виджета.
crop: Крупный заголовок и список Text Shadow.
-->Видео
Статус: Записано
Цель: Научить добавить видеовиджет по ссылке и дождаться готовности источника.
Тип: workflow
Контекст перед видео
Видео можно загрузить файлом или добавить по ссылке. Пока файл не загружен, в секции Video доступно поле Paste video URL.
Сценарий с URL должен закончиться появлением источника и доступных настроек воспроизведения.
Видео
Метка
<!-- @video video-add-url-source
goal: Научить добавить видеовиджет по ссылке и дождаться готовности источника.
kind: workflow
fixture: widgets-lab
scenario: video-add-url-source
start: В Edit выделен пустой Video, в секции Video видно поле Paste video URL, подготовлена стабильная ссылка на тестовый ролик.
steps: Вставить ссылку; дождаться загрузки превью и появления настроек воспроизведения.
result: В виджете появляется первый кадр видео, а в секции доступны Autoplay, Loop, Muted и Controls.
crop: Видеовиджет и секция Video.
-->Видео — Воспроизведение
Статус: Записано
Цель: Показать запуск Autoplay при появлении видео во viewport, паузу вне его и продолжение после возврата.
Тип: behavior
Контекст перед видео
Autoplayзапускает видео автоматически;Loopповторяет ролик;Mutedвыключает звук;Controlsпоказывает элементы управления плеером.
Браузеры могут ограничивать автозапуск со звуком, поэтому для автоматического старта обычно включают Muted.
Autoplay нужно проверять по появлению во viewport: за его границами ролик не должен продолжать незаметное воспроизведение.
Видео
Метка
<!-- @video video-autoplay-viewport
goal: Показать запуск Autoplay при появлении видео во viewport, паузу вне его и продолжение после возврата.
kind: behavior
fixture: widgets-lab
scenario: video-autoplay-viewport
start: Preview открыт выше Video с включёнными Autoplay и Muted, виджет ещё находится за нижней границей viewport.
steps: Плавно прокрутить до появления Video; дождаться заметного продвижения; прокрутить так, чтобы Video полностью ушёл за границу; вернуть его во viewport.
result: Видео запускается при появлении, приостанавливается вне viewport и продолжает с сохранённой позиции после возвращения.
crop: Колонка материала с Video и окружающим контентом в Preview.
-->Видео — Воспроизведение
Статус: Записано
Цель: Показать зацикливание короткого видео и управление через нативные Controls.
Тип: behavior
Контекст перед видео
Отдельный пример показывает, как Loop и Controls влияют на завершение короткого ролика и ручное управление.
Видео
Метка
<!-- @video video-loop-controls
goal: Показать зацикливание короткого видео и управление через нативные Controls.
kind: behavior
fixture: widgets-lab
scenario: video-loop-controls
start: Preview открыт, короткий Video с Loop и Controls стоит на первом кадре, Autoplay выключен.
steps: Нажать Play; дождаться перехода через конец ролика; поставить на паузу через Controls; переместить позицию ползунком; снова запустить.
result: После конца Video начинает новый цикл, а Controls позволяют поставить на паузу и изменить позицию.
crop: Видеовиджет целиком с Controls в Preview.
-->Видео — Poster
Статус: Записано
Цель: Научить добавить, заменить и удалить Poster и проверить его до запуска видео.
Тип: workflow
Контекст перед видео
После добавления источника появляется секция Poster. Загрузите изображение, которое будет видно до запуска видео. Постер можно заменить или удалить независимо от ролика.
Постер должен быть проверен в Preview до запуска, после запуска и после удаления.
Видео
Метка
<!-- @video video-poster-lifecycle
goal: Научить добавить, заменить и удалить Poster и проверить его до запуска видео.
kind: workflow
fixture: widgets-lab
scenario: video-poster-lifecycle
start: В Edit выделен Video с источником и без постера, секция Poster раскрыта, подготовлены два изображения.
steps: Загрузить первый Poster; перейти в Preview и запустить Video; вернуться в Edit; заменить Poster; удалить Poster; снова открыть Preview.
result: До запуска показывается выбранный постер, после замены используется новое изображение, после удаления виден обычный первый кадр.
crop: Видеовиджет и секция Poster, затем тот же виджет в Preview.
-->