Это было некоторое время, так как мы обновили вас на Xlayers. В этой статье мы представим XLayers и значение, которое он может добавить к вашей ежедневной работе как дизайнера или как разработчик. Но сначала повторим цель Xlayers, это поможет нам понять, почему создаются Xlayers.
Цель :
Xlayers – это онлайн-веб-приложение, которое стремится преодолеть разрыв между дизайнерами и разработчиками. Его миссия состоит в том, чтобы позволить легкого сотрудничества между дизайнерами и разработчиком, чтобы они могли быстрее.
Теперь, когда у всех нас есть понимание главной цели, давайте перейдем и посмотрим, как работает XLayers. Наше путешествие в Xlayers будет состоять из трех частей, откуда мы отправляемся из файла эскиза в код.
Часть 1, от SketchApp до Xlayers:
Прежде чем мы сможем начать использовать XLayers, нам нужен файл «эскиза». С помощью этого файла мы можем начать использовать Xlayers! (Если у вас нет файлов эскизов без забот, мы предоставляем пару демо-файла)
Открыть https://xlayers.dev , мы приедем на посадочную страницу, на этой странице вы увидите множество информации по всем тому, что оказывает вам, что Xlayers предоставит вам. Посмотрите на него, пока мы продолжим наше путешествие о том, как мы можем создать код из эскиза.
На странице посадки вы видите кнопку с «Начнем», давайте нажмем эту кнопку.
Здесь мы можем загрузить наш файл эскиза или выбрать одну из демонстрационных файлов.
XLayers, проанализируют этот файл и создаете текущий пример в вашем браузере. Этот живой пример называется Viewer компонента, он представляет файл разработанного эскиза в HTML.
Отлично, давайте продолжим следующую часть!
Часть 2, сотрудничество
Теперь, когда мы находимся в компонтере Viewer, мы призываем дизайнер и разработчики сидеть рядом и разговаривать о разработанных деталях, которые видны на составном просмотру.
Цель и сила XLayers теперь видны, вы можете использовать зритель, чтобы провести разговор о различных аспектах компонента, см. Если все детали верны. В зрителе вы можете легко увидеть каждую созданную страницу со своими слоями, используя левую боковую панель или щелкните на слоях. Выбирая слой, слой будет выделен красной границей индикации.
Чтобы увидеть больше деталей, вы можете использовать панель инструментов сверху, эти действия имеют свою собственную цель.
Рассадка в:
Актериальное увеличение можно использовать, нажав на увеличительное стекло (как показано ниже) или удерживая Ctrl + перемещение мыши.
Увеличить:
Действие Zoom-Out можно использовать, нажав на увеличительное стекло (как показано ниже) или удерживая Ctrl + перемещение мыши.
Сброс на начальный зум:
Нажав на «Базовое увеличительное стекло» Уровень масштабирования будет сброшен до начального увеличения.
3D:
При нажатии на 3D действие у вас есть возможность просматривать все разные слои в трехмерном просмотровании. Нажав на левый сдвиг и перемещение мыши на сторону, вы можете даже перемещаться по всем разным слоям и увидеть его от разных углов.
Часть 3, исходный код:
Последнее действие на панели инструментов – это действие, которое навигациирует вас к генерации кода. После навигации у вас будет набор сгенерированного кода в зависимости от файла эскиза. По умолчанию он откроется с выбором угловой структуры, однако у вас есть возможность выбрать рамку по вашему выбору.
На этой странице у вас также есть возможность использовать панель инструментов. Только на этот раз у вас есть меньше вариантов. Один из этих вариантов должен идти и использовать Stackblitz в качестве онлайн-IDE. Когда это действие включено, весь код будет опубликован в Stackblitz, и у вас будет установка проекта, которую вы можете использовать в онлайн-IDE 🚀.
Второй вариант – загрузить весь ваш код. С помощью этой опции вам будет снабжен сжатый ZIP, который можно скачать на ваш компьютер. Таким образом, вы можете легко интегрировать его в нужный репозиторий.
Что приносит будущее Xlayers?
На данный момент мы фокусируемся по следующим темам:
- Поддержка более чем только веб-каркасов, поддержка Xamarin уже там
- Иметь совершенно новый парсер эскиза, чтобы обрабатывать растровые изображения и SVG и многое другое расширяемость
Спасибо
Спасибо за чтение нашей статьи, мы надеемся, что эта статья побуждает вас попробовать Xlayers, поскольку она довольно проста в использовании и обеспечивает много ценностей в сотрудничестве между дизайнерами и разработчиками.
Хотели бы вы помочь нам с XLayers, вклад вклад? У нас есть проблемы для первых таймеров, и мы готовы помочь вам во всех возможных способах. Рядом с участием вы можете помочь нам пожертвовать, таким образом мы можем разработать больше функций, которые находятся на нашей дорожной карте.
Оригинал: “https://dev.to/xlayers/from-design-to-code-5f8a”