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

(Бывший ShareableColorPalette)

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

Особенности

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

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

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

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

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

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

  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