Плагин Prism для создание цветовой палитры в Sketch

Скачать плагин 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. Сохраните ваш код в файл или скопируйте цвета в буфер обмена.

Настройка

В меню 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 формата:

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

Если вы хотите изучить данный процесс глубже, взгляните на файлы 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