С момента запуска Sketch пространство проектирования для экрана изменилось для многих дизайнеров. Но оставалось множество неучтённых творческих людей, — все пользователи Windows и Linux. К счастью, Adobe предложили решение проектирования для экрана, которое было не просто основательно проработано и, безусловно, конкурентоспособное со Sketch, но ещё доступно на Windows.
Когда Adobe XD представили свою платформу для интеграции со сторонними инструментами, мы были рады пригласить вас к столу. После того, как мы представили интеграцию macOS в январе 2018 года, наши пользователи Apple были довольны, но всё же, чего-то не хватало…
- Чтобы импортировать проект XD в Avocode, вам приходилось устанавливать приложение Adobe XD на своём компьютере. Так как некоторым людям необходимо только просмотреть дизайн, получить спецификации и ресурсы для себя — это являлось главным блокиратором.
- И, конечно же, интеграция была доступна только пользователям MacOS.
Вскоре после релиза, мы получали сообщения вроде:
“Почему всё для Mac? Есть отдельные пользователи Windows, которые начинают работать в UX и используют Adobe XD. Пожалуйста, предоставьте эту возможность, она поможет многим пользователям.”
И мы не могли не согласиться. Это было очевидно судя даже по нашей статистики, собранной после выхода. В то время Avocode поддерживал Sketch, PSD и XD, и только 3% всех импортированных проектов в среднем за день, были формата XD.
В связи с чем, мы решили создать новую интеграцию, которая позволит любому пользователю импортировать, просматривать и проверять файлы Adobe XD, как на Windows и Linux, так и полностью независимо от приложения Adobe XD. Она работает даже в интернете, поэтому, вы можете импортировать свои файлы с помощь только лишь браузера (наилучшие варианты Chrome или Safari).
Всего через два дня после её выпуска, количество импортированных проектов дизайна XD, более чем удвоилось (до 7% всех проектов, импортированных в Avocode) и продолжает расти.
Хотите попробовать кросс платформенный импорт файлов XD?
Войдите в свою учетную запись Avocode на сайте app.avocode.com или получите её на avocode.com/signup и протестируйте 14 дней бесплатно. Затем выберите любой файл XD и перетащите его в любой проект Avocode. Как только файл будет загружен, вы сможете его открыть и проверить. Если отсутствуют некоторые шрифты, просто загрузите их.
Как мы научились распознавать и воспроизводить формат данных .xd
Чтобы импортировать проекты независимо от инструмента проектирования, плагинов или операционной системы, нам пришлось улучшить рендеринг Monroe. Каждый раз, когда мы добавляем новый формат (в настоящее время мы поддерживаем Photoshop, XD, Sketch и Figma), нам необходимо:
- Понять, как отображается проект, как работает его файловая структура данных.
- Распознать проект, то есть преобразовать структуру данных формата в наш формат файла
Octopus (независимый от приложения формат дизайна). - Воспроизвести проект в формате Octopus, чтобы он был как можно ближе к оригиналу — включая макет, все названные слоёв, фигуры и текстовые поля.
Такой подход позволяет нам обеспечить независимую от платформы компоновку дизайна, а также предоставляет разработчику свободу иметь реальный доступ к слоям — экспортировать всё, не требуя от дизайнера подготовить проект для него.
Теперь давайте посмотрим, как выглядит файл XD под капотом. Структура данных формата .xd упакована так же, как файл ZIP. Таким образом, первый шаг к конвертированию файла в Octopus (наш независимый от приложения формат дизайна) — это распаковка файла.
Когда у нас есть все ресурсы (например, растровые изображения), мы начинаем процесс синтаксического анализа. Во-первых, мы предварительно обрабатываем исходные данные, а затем собираем нашу собственную геометрическую модель проекта. Затем мы преобразуем эффекты слоя, данные о текстовых слоях, повторы сетки, маски и прочее.
В каждом формате есть некоторые данные, которые прочитываются легко, а некоторые довольно сложны. Самая сложная часть формата .xd для нас состоит в том, что нет явного представления (то есть, положений и размеров) ограничительной рамки объектов.
Ограничительная рамка объекта чрезвычайно важна для нас, и не только для корректной сборки и воспроизведения проекта, а также для предоставления разработчику информации о размерах и расстояниях между объектами при проверке.
Некоторые форматы, такие как Sketch, дают вам число, которое представляет собой абсолютную или относительную позицию, поэтому вычислить ограничительные рамки довольно легко. XD использует так называемую матрицу преобразования, чтобы отображать, где расположена каждая точка, фигура, кривая и т. д. Матрица преобразования является совместимым способом представления аффинных преобразований. Она использует шесть значений (a, b, c, d, tx, ty) для описания математической комбинации преобразования объекта, такие как переход, вращение или масштабирование.
Чтобы вычислить ограничительную рамку объекта, мы должны сначала применить матрицы преобразования к базовым объектам, а затем извлечь границы, расположенные в нашей системе координат. Это описание согласуется с моделью, используемой в библиотеке JavaScript с открытым исходным кодом paper.js, которую мы используем для вычисления ограничительной рамки каждого слоя, а также группы слоёв.
Таким образом, когда вы нажимаете на отдельные слои или выбираете несколько слоёв в Avocode — вы всегда знаете правильный размер выбранного объекта. Размер показан в нашем инструменте Measure, а также в автоматически сгенерированном коде, который вы можете находить у любого слоя.
В попытках вычисления матрицы преобразования в XD, мы наткнулись на несколько любопытных случаев:
Например, когда вы рисуете простой прямоугольник в Adobe XD, так, как он воспроизведён в формате .xd.
Он выглядит вполне читаемым, не так ли? Хорошо, давайте повернём этот прямоугольник.
И объект начинает усложняться, каждый раз, когда вы поворачиваете слой, группируете всё это, а затем вращайте ещё немного. Вы можете ожидать, что в этом случае у вас будет три разных воспроизведения позиции объекта: 1) красный прямоугольник, 2) синий прямоугольник и 3) целая группа. И, да, и нет.
Действительно, есть три разных воспроизведения координат, однако также изменяется точка вращения (центральная точка по умолчанию, по которой вычисляется вращение).
Ещё одна проблема, заслуживающая упоминания, — это градиентная заливка векторной фигуры. Вы наверняка знаете, что градиент задается как линейная кривая, представляющая направление от точки A до точки B — вот так:
Градиент — это простая характеристика заливки, которая является свойством фигуры (самого слоя). Что касается представления данных, вы можете думать о направлении градиента объекта как о временной помощи.
Трудная часть, начинается, когда вы изменяете направление (и угол) слоя с градиентом или если когда вы вращаете всю фигуру. В обоих случаях точки направления градиента A и B изменяются. Это заставило нас создать новую геометрическую модель, которая бы вычисляла координаты временного вспомогательного объекта и постоянно хранила их со слоями.
Как слоистые файлы XD, выглядят внутри Avocode? Такой же…
Теперь, когда мы проанализировали формат проекта, пришло время представить его визуально. Для этого мы используем наш пользовательский движок рендеринга Monroe. Это набор подсистем, каждый из которых отвечает за часть проекта — дизайн, векторные фигуры, текстовые слои и эффекты слоя, и все они работают бок о бок благодаря нашему дирижёру — ядру механизма рендеринга.
Сложная часть рендеринга проекта — это текстовые слои. Мы используем библиотеку с открытым исходным кодом под названием Free Type, которая также используется Linux или iOS для визуализации шрифтов. Она довольно древняя, но работает очень хорошо. Задача заключается в том, что инструмент проектирования, создавший дизайн (например, Adobe XD), использует другую библиотеку рендеринга шрифтов. Например, когда есть альтернативный способ выполнить сглаживание шрифта, могут быть небольшие различия в том, как результат рендеринга отличается от оригинала ~ до 1%.
Однако в 99% всех случаев результат нашего рендеринга Monroe выглядит так же, как оригинал.
Посмотрите сами:
Мы считаем, что истинный проект для совместной работы с кодом, не должен замораживаться из-за разных платформ. В связи с чем, мы продолжаем разрабатывать Octopus (наш универсальный формат дизайна) вместе с нашим движком рендеринга Monroe для создания единой платформы, которая даёт людям доступ к широкому спектру форматов дизайна — без необходимости владеть реальным инструментом проектирования. На данный момент мы можем напрямую импортировать проекты PSD, XD и Figma на любой платформе, а проекты Sketch — на macOS.
