Зачем Figma рисует невидимый HTML рядом с холстом

На холсте Figma может быть сотня слоёв, а для экранного диктора всё это долго выглядело как один большой объект. Рисование взял на себя движок Figma. Вместе с ним исчезла и привычная HTML-структура, по которой браузер объясняет интерфейс человеку.

Команда собрала Mirror DOM: невидимые элементы с ролями, подписями и расположением слоёв. Между ними и холстом синхронизируют фокус. Выбрали объект мышью — диктор знает, где вы. Перешли диктором к другому элементу — выделение на холсте тоже поменялось.

И невидимое здесь не значит убранное в угол экрана. Элементам сохраняют реальную геометрию: она нужна лупе, подсветке фокуса и голосовому управлению. Даже пять сдвигов по одному пикселю объединяют в одно объявление, чтобы диктор не повторял одно и то же пять раз. Вот сколько поведения браузера пришлось вернуть вручную.