All Projects → wuba → Picasso

wuba / Picasso

Licence: mit
一款sketch生成代码插件,可将sketch设计稿自动解析成前端代码。

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Picasso

Symbol Swapper
Swap the selected symbols and/or symbol instances to a master of the same name in a library.
Stars: ✭ 179 (-6.28%)
Mutual labels:  sketch-plugin, sketch
Library Symbol Replacer
Sketch plugin to replace symbols in an existing documents with library symbols 💎 📚
Stars: ✭ 193 (+1.05%)
Mutual labels:  sketch-plugin, sketch
Symbol Instance Locator
Locate all instances of a selected symbol or instance.
Stars: ✭ 150 (-21.47%)
Mutual labels:  sketch-plugin, sketch
Fake Chinese Name For Sketch
生成随机中文人名的 Sketch 插件
Stars: ✭ 141 (-26.18%)
Mutual labels:  sketch-plugin, sketch
Sketch Style Master
Sketch plugin for renaming shared styles
Stars: ✭ 193 (+1.05%)
Mutual labels:  sketch-plugin, sketch
Html Sketchapp
HTML to Sketch export solution
Stars: ✭ 1,811 (+848.17%)
Mutual labels:  sketch-plugin, sketch
Symbol Instance Renamer
Rename symbol instances to the name of their master.
Stars: ✭ 164 (-14.14%)
Mutual labels:  sketch-plugin, sketch
Sketch Copy Paste Position Size
A Sketch plugin that lets you easily copy & paste width, height, x & y values from and to objects
Stars: ✭ 130 (-31.94%)
Mutual labels:  sketch-plugin, sketch
Sketch2ae
A Sketch plugin to export sketch file to Adobe After Effect
Stars: ✭ 170 (-10.99%)
Mutual labels:  sketch-plugin, sketch
Sketch Iconfont
This plugin helps you easily insert and manage icons from icon fonts.
Stars: ✭ 1,980 (+936.65%)
Mutual labels:  sketch-plugin, sketch
Logodrop
A Sketch Plugin to get brand logos right into Sketch App.
Stars: ✭ 140 (-26.7%)
Mutual labels:  sketch-plugin, sketch
Icondrop
Get access to 2 million+ design resources right inside Adobe Xd, Figma, Sketch, Microsoft Office, G Suite and many more.
Stars: ✭ 174 (-8.9%)
Mutual labels:  sketch-plugin, sketch
Sketch Batch Create Symbols
A plugin for Sketch to convert selected layers to individual symbols.
Stars: ✭ 134 (-29.84%)
Mutual labels:  sketch-plugin, sketch
Sketch Palette Generator
Output a JSON colour palette to Sketch 💎
Stars: ✭ 148 (-22.51%)
Mutual labels:  sketch-plugin, sketch
Exporter
A Sketch plugin that exports Sketch artboards into clickable HTML file.
Stars: ✭ 131 (-31.41%)
Mutual labels:  sketch-plugin, sketch
Sketch Navigator
Artboard navigation (with autocomplete) for Sketch.
Stars: ✭ 161 (-15.71%)
Mutual labels:  sketch-plugin, sketch
Magic Buttons Sketch Plugin
Be a wizard! Automatically resize and relabel buttons with padding sizes like CSS.
Stars: ✭ 115 (-39.79%)
Mutual labels:  sketch-plugin, sketch
Sketch Potrace
Potrace for Sketch is a bitmap tracing plugin. It converts bitmap images into monochrome vector graphics.
Stars: ✭ 122 (-36.13%)
Mutual labels:  sketch-plugin, sketch
Sketch Tailwind
A plugin that tries to bridge the gap between designs and code. Sketch Tailwind lets you export aspects of a design made in Sketch to a javascript theme file that you can import into your TailwindCSS config
Stars: ✭ 166 (-13.09%)
Mutual labels:  sketch-plugin, sketch
Move To Library Sketchplugin
You can now move symbol from your project to any library and re-attach all the symbol instances to this library. also it keep the overrides without any problems and it work with abstract that have libraries not in your local machine
Stars: ✭ 174 (-8.9%)
Mutual labels:  sketch-plugin, sketch

Picasso

一款sketch插件,可将sketch设计稿页面自动解析成前端代码。

简介

Picasso是58同城推出的一款sketch设计稿解析插件,可将sketch设计稿自动解析成还原精准,可用度高的前端代码。

前提

使用

注:安装picasso插件之前,请先安装sketch

下载picasso插件 => picasso.sketchplugin.zip 解压压缩包,双击安装即可,如下:

1.jpg

安装完成后在sketch软件中使用插件,如下图所示:

two.gif

功能介绍

选择画板

  • 选中画板:对当前选中的画板进行代码生成。
  • 全部画板:对所有画板进行代码生成。

生成代码

  • web代码:普通web代码,结构布局合理、代码可用度高;适用于移动端列表、详情等页面。
  • web运营版:采用绝对定位布局、代码还原度高;适用于运营活动页、静态页。
  • 微信小程序:生成微信小程序代码。
  • ReactNative:生成ReactNative代码。

开发

  # 插件目录
  cd picasso
  # 安装依赖
  npm install
  # 启动
  npm start
  # 打包
  npm run build

贡献

欢迎参与picasso项目的开发建设和讨论。

提交 pull request 之前请先提 [Issue 讨论].

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].