Наш канал в

Синхронизация контента Sketch

https://github.com/ideo/SketchContentSync.sketchplugin.git

Возможность апдейта контента Sketch файлов с помощью Google Docs.

На данный момент реализована поддержка:

Возможности

Синхронизация контента

feature_syncvar (1)

Если вы присвоите любому текстовому элементу название в формате  sync:<key> это позволит синхронизировать контент элемента. Данные будут подтягиваться из строки таблицы, где первое содержимое ячейки будет соответствовать <key> .

Локализация контента

feature_contentversion

В каждой строке может быть много столбцов. Перед началом синхронизации, у вас есть возможность выбирать столбец, из которого необходимо брать данные. Это также поддерживает наличие различных версий или локализаций вашего контента.

Объединение контента

feature_concat

Контент синхронизированного элемента, также может быть основан на объединении нескольких ключей или констант. Например, вы можете использовать sync:<key1> + <key2> для генерации контента, который является <key1 value><key2 value> . Более того, вы также можете объединить строки, используя sync:<key1> + ‘ and ‘ + <key2> , что в результате отобразится на контенте <key1 value> and <key2 value> .

Для добавления новых строк между элементами, используйте ‘\n’ например sync:<key1> + ‘\n’ + <key2> .

Как установить

  • скачайте архив
  • Двойной клик на файле .sketchplugin
  • Доступно в Sketch по Plugins > SketchContentSync

Пример

  • Загрузите и откройте sketch файл
  • Выполните SketchContentSync > Google Sync в меню Plugins
  • Sync Google Document Text в всплывающем окне (вставьте эту ссылку в всплывающее окно: ://docs.google.com/spreadsheets/d/1xkkFbXdCEC2Rr_rxO74jdZ30SZSxBuzLdNPFlhsjPws/ и нажмите Sync)
  • В всплывающем окне Sync Content Version выберите Default и нажмите Sync
  • Готово! Контент в Sketch обновлен.
  • Обратите внимание, что в синхронизированном контенте могут быть ошибки в правописании. Попробуйте синхронизировать еще раз с использованием другой версии или даже другого языка.

Здесь вы можете увидеть пример документа, который я использовал.

Как пользоваться

Создайте документ Google

doc_screen

Создайте документ с контентом, который вы будете использовать. Первая колонка – это ключ [key] контента и каждая колонка справа это перевод/вариация контента.

Создайте текстовое поле (поля)

Назовите текстовое поле именем типа sync:[key], заменяя [key] ключом, который используется в документе Google, что позволит их синхронизировать. Другие текстовые поля при этом синхронизироваться не будут.

start

Запустите Sketch плагин ContentSync

Запустите плагин

run

Введите ссылку на документ Google

Ссылка должна быть общедоступной. Для получения ссылки на документ:

  • Поделиться через Файл > Опубликовать в web…
  • Использовать https://sheetsu.com

google_path

Выберите язык / вариацию

Язык/вариация в каждой колонке в документе.

variant

Готово!

result

Ссылки

Создано с использованием:

http://developer.sketchapp.com/
https://github.com/rodi01/RenameIt
https://github.com/nolastan/sync.sketchplugin

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

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

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

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5