Плагин для настройки перемещения элементов, обмена стилями через Google Sheet, заливка фото и текстов
Наш канал в

Плагин Nudged

У Nudged есть свой сайт

Nudged

Nudged - 2

Это плагин Sketch для быстрой и легкой настройки перемещения элементов.

Установка

Важно – убедитесь, что у вас установлена последняя версия приложения Sketch. (Требуется минимум версия Sketch 41).

  1. Скачайте и откройте sketch-nudged-master.zip.
  2. Дважды кликните на файле sketch-nudged.sketchplugin для установки.

Или переместите разархивированную папку sketch-nudged-master в директорию плагинов Sketch.

Чтобы проверить правильность установки плагина, откройте параметры плагина через меню Plugin -> Manage Plugins… – там вы увидите, что Nudged находится в списке, и что он активирован.

Использование

Откройте окно настроек Nudged через меню Plugin или с помощью горячей клавиши. Измените параметры одного/обоих полей на нужные значения и кликните кнопку Apply для сохранения настроек.

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

Горячие клавиши

Вы можете быстро открыть окно настроек Nudged с помощью сочетания клавиш Alt + Cmd + n.

Используйте стандартные клавиши Sketch для перемещения объектов:

  • Мелкое перемещение: кнопки стрелок
  • Большое перемещение: Shift+кнопки стрелок

Скачать плагин

Плагин Sync Sketch Plugin

Обменивайтесь стилями со своей командой через Google Sheets.

  • Импортируйте и обновляйте стили в таблицах Google Sheet общего пользования.
  • Экспортируйте стили в CSV-файлы, которые можно загрузить в таблицы Google и расшарить их на команду.
  • Используйте формулы в Google Sheets, чтобы задать относительные размеры шрифтов и высоты строк.

Установка

Установите из Sketch Toolbox (рекомендуется) или скачайте zip-архив, разархивируйте и откройте файл sync.sketchplugin.

Настройка Google Sheets

Для использования Sync вам нужна опубликованная таблица.

Sync Sketch Plugin

  1. Создайте таблицу Google Sheet, используя этот шаблон (кликните кнопку “Use this template”).
  2. Выберите в меню File > Publish to web… и кликните кнопку Publish.

Экспорт стилей

Экспортируйте стили из Sketch в вашу таблицу. Как вариант, можете пропустить этот шаг и задать свои начальные стили в интерфейсе Google Sheets.

Sync Sketch Plugin - 2

  1. В открытом документе Sketch с нужными стилями запустите команду Export в меню плагина Sync. Окно поиска должно отобразить typography.csv.
  2. Откройте Google Sheet, выберите File > Import… и затем Upload.
  3. Перетащите typography.csv в окно загрузки и выберите Replace current sheet, а затем кликните Import.

Импорт стилей

Импортируйте стили из вашей таблицы в Sketch.

Sync Sketch Plugin - 3

  1. Скопируйте URL вашей таблицы Google. (См. Ниже насчет использования Google Apps на работе).
  2. Запустите команду Import из меню плагина Sync и вставьте вашу URL.

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

Использование Google Apps на работе

Некоторые компании запрещают своим сотрудникам публиковать гугл-доки. Если в Published content & settings в окне Publish to the web говорится, что люди в вашей компании должны залогиниться для просмотра, Sync не сможет получить доступ к вашей таблице стилей. Не переживайте – вы все равно можете использовать Sync для типографики. В Sheetsu сгенерируйте API для новой таблицы. Используйте URL с Sheetsu и перейдите к шагу 2.

Жирность шрифта

Вариации шрифтов, такие как жирный, курсив, узкий, на самом деле представляют собой отдельные файлы шрифта на вашем компьютере. Вам нужно указывать их точно как названо в папке ~/Library/Fonts/ на Maс, исключая расширение (например, ttf). В шаблоне Google Sheet есть такой пример. Если вы застряли, попробуйте задать стили в Sketch и воспользуйтесь опцией экспорта.

Кастомное API

В качестве альтернативы Google Sheets, вы можете создать кастомное JSON api такой структуры. Сейчас этот метод поддерживает только стили типографики.

{
 …
 result: [
 {
 Style: "Headline 1",
 Size: "32",
 Color: "DD2E1F",
 Opacity: "85",
 Typeface: "SourceSansPro-Semibold",
 Alignment: "center",
 Line: "40",
 Character: "0"
 },
 …
]
}

Запустите команду Import с меню плагина Sync и вставьте URL конечной точки API в консоли.

Скачать плагин

Плагин TinyFaces

 

Слои заливки в Sketch с аватарками или рандомными данными из tinyfac.es…

Возможности:

  • ? Заполняет текстовые слои произвольными именами
  • ?? Заливает фигуры рандомными стоковыми фотографиями (аватарами)
  • :family_man_woman_girl_boy:Поддерживает группы
  • ? Поддерживает символы
  • :level_slider:Можно выбирать высокое или низкое качество изображений
  • ? Фильтрация мужской и женской графики

Вот как все работает:

TinyFaces

Скачать плагин

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

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

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

Полное руководство по дизайну 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