https://github.com/iarthstar/presto-dom-code
Generates Presto-Dom code from Sketch Layers
https://github.com/iarthstar/presto-dom-code
design-to-code generate-code sketch-plugin ui
Last synced: 5 months ago
JSON representation
Generates Presto-Dom code from Sketch Layers
- Host: GitHub
- URL: https://github.com/iarthstar/presto-dom-code
- Owner: iarthstar
- License: mit
- Created: 2019-02-28T17:40:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-04T08:13:34.000Z (about 7 years ago)
- Last Synced: 2025-10-22T02:57:50.876Z (5 months ago)
- Topics: design-to-code, generate-code, sketch-plugin, ui
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Presto-Dom-Gen
A Sketch plugin that copies selected layers to the clipboard as code that can be pasted straight into a UI .purs file.
- Copy one or more layers
- Layers are copied in position
- Text, group and rectangle layers are turned entirely in code
- Image layers too are generated and exported @3x
## Install
Download or clone the repository, and double click `Presto-Dom-Gen.sketchplugin`.
## What layer types can the plugin handle?
### Rectangles
Here is an example of the code that will be generated when you select a rectangle showing the full set of properties that can be generated:
```
linearLayout
[ height $ V 100
, width $ V 200
, background "#FF18294E"
, stroke "1,#FFFFFFFF"
, cornerRadius 4
][]
```
### Text
Text is copied as a native text layer:
```
textView
[ height $ V 19
, width $ V 235
, text "There’s a lot to share with others…"
, fontStyle "Gilroy-Medium"
, textSize 16
, color "#9B9B9B"
, letterSpacing (-0.33)
]
```
### Groups
Groups are copied as native linearLayout:
```
linearLayout
[ height $ V 300
, width $ V 400
][]
```
## What layer styles can the plugin handle?
- Opacity
- Background
- Border
- CornerRadius
- FontStyle, FontSize, FontWeight
- Height, Width
- Gravity
- ImageUrl
- Text
- Kerning
## How include image assets
When the design of a layer cannot be represented using native code you will need to use an image asset:
```
imageView
[ height $ V 200
, width $ V 200
, imageUrl "avatar"
]
```
**Here’s how**:
1. Select the layer in Sketch and press 'CMD SHIFT P'
2. Enter the ImageUrl and press ok, it will be used to generate the asset naming and in generation imageView -> imageUrl.