Плагин Prism для Sketch

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

(Бывший ShareableColorPalette)

Создает красивую рабочую область со всеми цветами в “Document colors” с соответствующими цветовыми метками в различных форматах (Sketch 39)

Особенности

  • Генерирует прекрасную цветовую палитру.
  • Автоматически присваивает названия цветов.
  • Полностью настраивается.
  • Экспорт в код различных форматов (CSS, переменные SASS, Swift).
  • Возможность переименовать (Alias).
  • Восстановление с использованием Coffeescript

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

  1. Установите плагин.
  2. Добавьте цвета в ваши цвета документа (Document Colors).
  3. Выполните команду [ctrl cmd c].
  4. Готово

Изменение названия цвета

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Плагин Prism для создание цветовой палитры в Sketch

Экспорт цветов в виде кода

  1. Выберите цвета, которые вам нужно экспортировать (опционально)
  2. Кликните на экспорт выбранных цветов [ctrl cmd s] или экспорт всех цветов [ctrl cmd e]
  3. Выберите формат для экспорта.
  4. Сохраните ваш код в файл или скопируйте цвета в буфер обмена.

687474703a2f2f3139382e3139392e36392e38352f707269736d2f4578706f7274436f6c6f72436f64652e676966

Настройка

В меню Prism есть опция Show Template File (показать файл шаблона), которая открывает файл Template.sketch, который находится в пакете Prism.sketchplugin. Этот файл содержит все слои, которые используются в качестве шаблонов и копируются на вашу палитру.

Изменение шаблона палитры

Файл шаблона – это обычный файл Sketch, который содержит много страниц внутри собственного шаблона. Вы можете добавить или удалить все страницы по желанию для создания собственных шаблонов. Для выбора стиля, просто откройте файл и сохраните его на странице с необходимым шаблоном. Теперь создайте вашу палитру для просмотра изменений.

Редактирование шаблона

Prism дает возможность свободно настраивать ваши собственные шаблоны, однако, для корректной работы и лучшего результата, есть несколько нюансов:

  • Ваш шаблон должен иметь только один слой рабочей области, который необходимо назвать Prism Palette. Пользователи могут изменить имя рабочей области, как только сгенерируется палитра в файлах sketch. Ячейка при этом не должна быть внутри рабочей области. Но будет очень приятно, когда в последующих обновлениях будет добавлена возможность использования ячейки внутри рабочей области для определения расстояния между ячейками.
  • Ваш шаблон должен иметь группу слоев под названием Cell, все, что включают ячейки, должно быть в рамках этой группы. Также, вы можете добавить сколько угодно групп внутри.
  • Внутри группы Cell должен быть слой с названием Color. Он должен иметь по крайней мере одну сплошную заливку, и эта заливка должна быть внизу всех остальных. Этот слой тот самый, который используется Prism для отображения реального цвета.
  • Внутри группы Cell должен быть текстовый слой под названием Name. Этот слой используется Prism для отображения автоматического имени и его можно редактировать для добавления или удаления названий.
  • Prism использует имена текстовых слоев для форматирования цвета ячейки, например: если текстовый слой назван RGBA_CSS, Prism попытается установить тестовое значение слоя в определенный формат. Этот формат должен быть установлен и внедрен в файл ColorFormatter.coffee. Вот особенности RGBA_CSS формата:

ColorFormatter.coffee. Вот, где формат зарегистрирован

# This is were formats are registered, the ID must be unique, the name is a human readable mini description, the format is used to use a custom file extension when saving colors to a file
FORMATS: [
{ id: “HEX”, name: “HEX CSS”, format: “colors.css” }
{ id: “RGBA_CSS”, name: “RGBA CSS”, format: “colors.css” }
{ id: “SASS”, name: “SASS variables”, format: “_colors.scss” }
{ id: “UICOLOR_SWIFT”, name: “UIColor (Swift)”, format: “colors.swift” }
{ id: “UICOLOR_OBJC”, name: “UIColor (Objective-C)”, format: “colors.m” }
{ id: “ANDROID”, name: “Android ARGB Color”, format: “colors.java” }
]

Затем вставьте его в подобный файл

###
HERE is when you have to do the implementation of the new format you want to add.
all these methods must be prefixed with “format_” and then the format ID specified in the FORMATS array
The commented flag is used to add comments (like when we export colors)
or removing them (like when we are populating the cell layers with color data)

the color variable that is passed is a dictionary with all the information you need:
name: the default name of the color or the alias if it exists
hex: color’s hex value without the leading ‘#’
red: color’s red value from 0 to 1
blue: color’s blue value from 0 to 1
green: color’s green value from 0 to 1
alpha: color’s alpha value from 0 to 1
###
format_RGBA_CSS: (color, commented) ->
alpha = if color.alpha < 1
color.alpha.toFixed(2)
else
color.alpha
formattedColor = “rgba(#{Math.round(color.red * 255)},#{Math.round(color.green * 255)},#{Math.round(color.blue * 255)},#{alpha});”
if commented
“#{formattedColor} /* #{color.name} */”
else
formattedColor

Вы можете получить текстовые слои для форматов в любом необходимом количестве. Также, слои могут быть заблокированы или невидимыми, если они соответствуют этим ограничениям.

Если вы хотите изучить данный процесс глубже, взгляните на файлы Cell.coffee и Template.coffee.

Вклад

Хочешь сделать хорошо, сделай это сам. Если вы хотите установить формат или добавить новую фичу, или исправить ошибку, отправьте запрос!

Я также добавил файл compile.sh, который автоматически компилирует файлы внутри src/ folder в the build/ folder. Однако, если вы хотите добавить новые файлы, вам необходимо импортировать их в правильном порядке внутри файла Prism.cocoascript. Вы можете запустить файл compile.sh написав это в терминале в Prism.sketchplugin/Content/Sketch folder:

./compile.sh

Это скомпилирует ваши файлы, как только они будут сохранены во время выполнения процесса. Для остановки процесса, нажмите Ctrl-C.

Что дальше

  • Поддержка градиентов
  • Улучшение выбора шаблона

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

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

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

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

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