Экспорт исходника Sketch в нативный код с помощью AnimaApp
Наш канал в

Экспортируйте ваши пиксели в проект Xcode за считанные минуты

Наша основная миссия в Anima – это дать возможность дизайнерам владеть собственным дизайном. Мы создаем инструмент для дизайнеров, который позволит им определить, задать и спроектировать все элементы, которые включены в UI/UX и в итоге сгенерировать нативный код, который будет полностью соответствовать оригиналу. Это позволит дизайнерам обрести независимость от других участников проекта, например разработчиков, у которых приоритеты задач отличаются от дизайн команды.

Sketch to Code позволяет вам получить iOS код, код цифровых объектов, шрифты и раскадровку (UI лейаут) из Sketch файла.

Краткий обзор экспорта в код

  1. Определите типы. Так как каждый элемент в Sketch представляет собой слой, нам необходимо указать, в какой нативный тип его экспортировать.
  2. Экспорт в код. В меню Sketch: Plugins -> Sketch to Code -> Export
  3. Протестируйте на вашем устройстве.
  4. Передайте.

Давайте поговорим детальнее о каждом этапе:

Определите типы просмотра

Допустим, у нас есть слой Switch. Sketch to Code должен понимать, что этот слой нужно экспортировать в нативный вид, который является Switch. Например, тип в iOS – это UISwitch.

Show/Hide Panel
Шаг 1 – В меню Sketch кликните “Show/Hide Panel”
  1. Отобразить панель
  2. Выбрать слой/группу
  3. Выбрать Type в Sketch to Code

Type в Sketch to Code

Посмотрите видео (2 минуты):

Просмотрите на вашем устройстве

При помощи Viewer iOS App, просмотрите макет на iPhone.

Вы можете провести пальцем влево-вправо и просмотреть разные экраны.

Нажмите превью
Нажмите превью
Email preview
Ваш имейл будет предзаполненным в поле. Нажмите Send
Anima Viewer iOS
Anima Viewer iOS позволяет вам просмотреть вашу работу как “живой” дизайн.

Передача дизайна разработчиков

Теперь ваш пакет находится в Anima Cloud, и вы можете передать его разработчику двумя способами:

  1. Ссылка для скачивания – получите ваш код, его можно запустить при помощи Xcode.
  2. Выложить на GitHub – Порадуйте команду разработчиков.
ссылка на GitHub
Передайте ссылку для скачивания или создайте репозиторий на GitHub

Вот, что происходит, когда разработчик переходит по ссылке для скачивания:

1-rd4gm6b0xd7muflz2mb4wq

Вот так выглядит сгенерированный репозиторий GitHub:

сгенерированный репозиторий github

GitHub?

Anima UI Code Packages для iOS совместимы с программами управления пакетами Cocoapods и Carthage.

Это означает, что всего за несколько секунд строка кода будет добавлена в проект Xcode. То же самое касается обновлений дизайна.

И последний совет

Хороший код предполагает наличие правильных имен. Убедитесь, что вы назвали ваши слои правильно.

слои sketch
Держите ваши слои в порядке

Спасибо!

Хотите получите доступ первым?

Записывайтесь в список ожидания.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс DPI и кросс-платформенном дизайне с самых азов. Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.