<commit_before>---
layout: post
title:  "Sketch & Code"
date:   2018-02-26
tags: [UI, sketch]
commentIssueId: 74
---

Sketch to Code 一直是我最想到达到的理想状态, 也是对前端提效最为明显的. 接着[知乎上的讨论](https://www.zhihu.com/question/59069953/answer/162063303), 在此做一下笔记.



## Sketch 的新文件格式 43+

在 43+ 的 sketch 文件中, 采用了 json 格式, 我们在此基础上做更多的扩展, 我们可以将 sketch 文件换成 zip 并解压:

![](https://user-images.githubusercontent.com/7157346/36637759-45079452-1a1e-11e8-83da-f9b0815c9cf9.png)

## References

* [如何评价 Airbnb 发布的 React Sketch.app 工具？](https://www.zhihu.com/question/59069953/answer/162063303)
* [new-file-format-in-sketch-43](http://sketchplugins.com/d/87-new-file-format-in-sketch-43)
* [sketch-react](https://github.com/zjuasmn/sketch-react)
* [zeplin](https://www.zeplin.io/)
* [framer](https://framer.com/)
* [Deco IDE](https://www.decoide.org/)
* [building-a-visual-language](https://airbnb.design/building-a-visual-language/)
* [painting-with-code](https://airbnb.design/painting-with-code/)<commit_msg>add flex-layout<commit_after>---
layout: post
title:  "Sketch & Code"
date:   2018-02-26
tags: [UI, sketch]
commentIssueId: 74
---

Sketch to Code 一直是我最想到达到的理想状态, 也是对前端提效最为明显的. 接着[知乎上的讨论](https://www.zhihu.com/question/59069953/answer/162063303), 在此做一下笔记.



## Sketch 的新文件格式 43+

在 43+ 的 sketch 文件中, 采用了 json 格式, 我们在此基础上做更多的扩展, 我们可以将 sketch 文件换成 zip 并解压:

![](https://user-images.githubusercontent.com/7157346/36637759-45079452-1a1e-11e8-83da-f9b0815c9cf9.png)

文件内容的详情说明可参考: http://sketchplugins.com/d/87-new-file-format-in-sketch-43

## References

* [如何评价 Airbnb 发布的 React Sketch.app 工具？](https://www.zhihu.com/question/59069953/answer/162063303)
* [new-file-format-in-sketch-43](http://sketchplugins.com/d/87-new-file-format-in-sketch-43)
* [sketch-react](https://github.com/zjuasmn/sketch-react)
* [zeplin](https://www.zeplin.io/)
* [framer](https://framer.com/)
* [Deco IDE](https://www.decoide.org/)
* [building-a-visual-language](https://airbnb.design/building-a-visual-language/)
* [painting-with-code](https://airbnb.design/painting-with-code/)
* [Sketch-Flex-Layout](https://github.com/hrescak/Sketch-Flex-Layout)
{'fraction_non_alphanumeric': 0.18773764258555134, 'fraction_numerical': 0.08840304182509506, 'mean_word_length': 4.658602150537634, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 19, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4321821', 'n_tokens_mistral': 1130, 'n_tokens_neox': 1032, 'n_words': 109}