В последние годы веб-технологии стремительно развиваются, позволяя создавать всё более сложные и мощные приложения, которые раньше были доступны лишь на настольных платформах. Одним из ярких примеров этого является инструмент для профессионального дизайна Figma, который был разработан для работы непосредственно в браузере. Его создатели поставили перед собой амбициозную задачу: создать веб-приложение, способное заменить классические десктопные программы, обеспечивая высокое качество работы с интерфейсом и совместную работу дизайнеров в реальном времени. Разработка Figma стала настоящим вызовом, поскольку возможности веба на тот момент не были ориентированы на задачи профессионального проектирования. История создания и технические решения, лежащие в основе Figma, показывают, насколько далеко можно зайти благодаря смелым новаторским подходам и глубокому пониманию ограничений платформы.
Одной из ключевых трудностей стало то, что веб по своей природе изначально не задумывался как универсальная платформа для вычислений и сложной графики. Первоначально это был инструмент для отображения документов, и лишь затем поверх него начали добавлять различные разработки для создания приложений. Такие надстройки представляли собой набор отдельных API, которые часто имели узкоспециализированное назначение и не позволяли гибко использовать графические и вычислительные возможности системы. Например, касательно работы с текстом, язык стилей CSS обладает сложными алгоритмами текстового блока, однако не предоставляет разработчикам возможности управлять ими или считывать результаты для дальнейшей обработки — это создавало сложности в реализации собственных алгоритмов верстки. Что касается рендеринга, браузеры оснащены высокопроизводительными GPU-композиторами, но отсутствует доступ к самим механизмам композитинга, что ограничивает возможности по оптимизации или созданию нестандартных эффектов смешивания слоёв.
Аналогично, встроенные в браузеры декодеры изображений работают асинхронно с использованием аппаратных возможностей, но не имеют интерфейсов для управления процессом, например, чтобы корректно обрабатывать метаданные EXIF или управлять цветовым пространством изображения. Изменения в сторону универсальных примитивов на платформе всё же происходят. Со временем появились технологии, такие как WebGL и asm.js, которые позволяют обходить ограничения браузера и напрямую пользоваться возможностями оборудования. Благодаря им появились возможности создавать высокопроизводительные графические приложения прямо на вебе.
Это кардинально изменило подход: теперь разработчики не вынуждены ждать, пока платформа будет расширена нужными функциями, они могут проектировать собственные решения. Одна из важных архитектурных особенностей Figma заключается в том, что редактор написан на C++ и скомпилирован в JavaScript с помощью инструмента emscripten. Этот компилятор ориентируется на asm.js — подмножество JavaScript, которое позволяет получить программу с предсказуемым, компактным и высокоэффективным кодом. Такой подход даёт несколько заметных преимуществ.
Прежде всего, разработчики получают полный контроль над управлением памятью, что позволяет использовать компактные типы данных, например 32-битные числа с плавающей запятой или даже байты, в отличие от стандартных 64-битных чисел JavaScript. Это особенно важно в приложениях, обрабатывающих большие объёмы графических данных. Кроме того, освобождение от стандартного сборщика мусора снижает риск возникновения пауз в производительности, что обычно критично для плавности интерфейса. Все объекты в C++ размещаются в заранее выделенном массиве, что предотвращает непредвиденное торможение. Еще один значимый плюс — оптимизация кода на этапе компиляции с использованием LLVM, а также применение шаблонов C++ для генерации эффективных алгоритмов, что позволяет достичь производительности близкой к нативной, с отставанием всего в пару раз.
Такой код превращается в ассемблер-подобный, что позволяет современным движкам браузеров выполнять его быстро и стабильно. Некоторые технические проблемы всё же возникали: например, в 32-битных браузерах Chrome на Windows встречались ограничения с выделением непрерывной памяти для большого массива, что приводило к сбоям. Для решения этого была применена стратегия хранения больших ресурсов вне основного кучи, с обращением к ним через специальные указатели, что уменьшало фрагментацию и расширяло адресное пространство. Следующий этап эволюции — это WebAssembly, бинарный формат кода, который имеет ещё более быструю загрузку и парсинг, что положительно скажется на производительности приложений подобного рода. Также ожидается внедрение общей многопоточности с использованием разделяемых массивов, что позволит серьёзно увеличить параллелизм в браузерных приложениях.
Особое внимание в Figma уделялось системе рендеринга. Изначально казалось логичным использовать уже существующие браузерные механизмы: HTML, SVG или 2D Canvas API. Однако каждая из этих технологий имела существенные ограничения. HTML и SVG часто были перегружены лишними данными и плохо подходили для динамического масштабирования, кроме того, они были ориентированы больше на прокрутку, нежели на плавное зумирование, а их рендеринг мог сильно замедляться из-за работы с DOM. Кроме того, поддержка специфических эффектов, таких как маски, размытия, сложные режимы смешивания в разных браузерах была непостоянной и низкокачественной, особенно на дисплеях с высоком разрешением.
2D Canvas API, напротив, был Immediate Mode API, что заставляло каждый кадр заново загружать всю геометрию в GPU, что неэффективно и создает узкие места при сложных сценах. Работа с текстом также была непростой: разные браузеры по-разному отображали одни и те же шрифты, а поведение менялось с каждым обновлением. Для реализации собственных уникальных визуальных эффектов, таких как угловые градиенты, которые не поддерживались стандартными API, Figma создала собственный движок рендеринга на основе WebGL. Это позволило сделать систему максимально гибкой и производительной. Рендеринг выполняется полностью на GPU, с поддержкой размытий, масок, альфа-композиций и многих других эффектов, все элементы отрисовываются с высокой степенью сглаживания.
Проектировщики Figma буквально создали «браузер в браузере»: у них есть собственная модель документа, собственный композитор и даже своя система текстового лейаута, наподобие классических моделей отрисовки HTML. Несмотря на впечатляющие успехи, разработчики столкнулись и с ограничениями платформы. Некоторые функции, такие как поддержка шрифтов на уровне контуров и таблиц кернинга, на вебе по-прежнему недоступны из-за соображений безопасности и конфиденциальности. Тем не менее, ведутся работы над предоставлением доступа к этим функциям через защищённые API с запросом разрешений у пользователя. Другой болевой вопрос — поддержка сложных форматов буфера обмена, таких как .
ai или .pdf, которые не поддерживает веб-спецификация. Вставка в Figma заменяется своеобразной кодировкой внутри HTML, и разработчики мечтают увидеть расширение стандартов. Интересный нюанс — поддержка жестов на разных операционных системах и браузерах. Например, для удобства масштабирования в OS X трекпадом Chrome реализовал хитрый метод обработки события колёсика мыши с зажатой клавишей ctrl, что позволило сделать масштабирование плавным и естественным.
Аналогичные функции в других браузерах либо реализованы частично, либо отсутствуют вовсе, что затрудняет единый опыт пользователей. Несмотря на сложности веб-платформы, Figma стала удачным примером того, как инновационный подход и глубокое техническое понимание могут превратить браузер в полноценную среду для сложных профессиональных задач. Качество и производительность продукта почти не уступают настольным аналогам, а возможность совместной работы и доступность из любой точки мира открывают новые горизонты для дизайнеров и команд. Сегодня Figma продолжает развиваться, и многие из тех проблем и ограничений, с которыми столкнулись разработчики, постепенно устраняются. Будущее веб-дизайна выглядит всё более многообещающим, ведь технологии не стоят на месте, а опыт успешных проектов стимулирует развитие отрасли в целом.
Все эти достижения доказывают, что веб давно перестал быть просто площадкой для документов и теперь способен конкурировать с традиционными средами разработки профессиональных визуальных продуктов.
