Skip to content
Export your sketch layer for code usage
Branch: master
Clone or download
nikkifang
nikkifang fix dependency
Latest commit aeeed6e Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets t Jul 1, 2019
doc/img change image Jul 2, 2019
resources change svg xml code for ie Jul 3, 2019
scripts t Jul 1, 2019
sketch-assets t Jul 1, 2019
src fix dependency Jul 17, 2019
.appcast.xml fix appcast type Jul 9, 2019
.editorconfig t Jul 1, 2019
.gitignore ignore build version Jul 2, 2019
README.md change readme Jul 3, 2019
package-lock.json fix dependency Jul 17, 2019
package.json Publish 3.6.2 release 🚀 Jul 3, 2019
webpack.skpm.config.js t Jul 1, 2019

README.md

Image Code Exporter

Export your sketch layer with data URI for code usage
以data URI代码形式导出sketch中的图层

Usage

  1. Choose the layer you want to export
    选择你想要导出的图层

  2. Use shortcut command(⌘) + ` to export your code immediately
    使用快捷键command(⌘) + `立即导出代码

test

Feature

  • Support PNG and SVG image type, export PNG file by encoding it with base64 format while using encoded xml when export SVG file.(See this article Probably Don’t Base64 SVG )
    支持PNG和SVG图片格式, 以base64格式导出PNG图片,以XML格式导出SVG文件(为什么不用base64导出SVG,看这篇文章 Probably Don’t Base64 SVG

  • Provide multiple templates for different usage, including code in html(innerHtml), css background and css mask.
    提供多种代码使用场景模板,包括在html中嵌入的代码(innerHtml), css background或css mask

  • Auto save your last copy preference
    自动保存你上一次复制的选项

  • Compress PNG file with advpng
    使用advpng压缩PNG文件

  • Compress SVG file widh svgo
    使用svgo压缩SVG文件

Installation

  • Download the latest release of the plugin
    下载 最新的发布版本

  • Un-zip
    解压

  • Double-click on imagecodeexporter.sketchplugin
    双击imagecodeexporter.sketchplugin

Acknowledgements

Thanks to these project to give me some ideas about how to make this plugin

Development Guide

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

Usage

Install the dependencies

npm install

Once the installation is done, you can run some commands inside the project folder:

npm run build

To watch for changes:

npm run watch
You can’t perform that action at this time.