Skip to content
Export your sketch layer for code usage
Branch: master
Clone or download
nikkifang fix dependency
Latest commit aeeed6e Jul 17, 2019
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 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

Image Code Exporter

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


  1. Choose the layer you want to export

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



  • 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

  • Compress SVG file widh svgo


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

  • Un-zip

  • Double-click on imagecodeexporter.sketchplugin


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.


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.