WEB制作(html・css(スタイルシート))に関する各種メモ書き

HTML , CSS コーディング時に使用したい Sketch プラグイン

タイトルはSketchの「Plugins」メニューに表示されるものを記述しています

● Export HTML

https://github.com/mludowise/Sketch-HTML-Export
選択したアートボードの中で「Make Exportable」が設定されているオブジェクトを HTML + CSS へ書き出します
使い方

・書き出したいオブジェクトを選択して「Layer」→「Make Exportable」を選択してエクスポート可能な状態にする。
・グループ化しているオブジェクトはグループを選択して「Make Exportable」するとグループが1つの画像になる。
・テキストの場合はそのまま「Make Exportable」するとサイズが変わるので「スライスツール」にしてオブジェクトを選択してスライスにするか、あらかじめオブジェクトを選択した状態で「Sketch Measure」のツールバーを表示させてスライスアイコンをクリックするとスライスになる
・すべてのオブジェクトがエクスポート可能な状態になったらメニューから「Plugins」→「Export HTML」で実行する
・透明な画像が生成される場合は「Export  group contents only」のチェックを外す

● marketch

https://github.com/tudou527/marketch
sketchのレイアウト情報を HTML へ書き出します

● Export Text From Page...

sketchファイルの中のテキストデータをクリップボードにコピーします
https://github.com/exevil/Sketch-Export-Text

● Copy Color as HSLA

sketchファイル内のオブジェクトの色のHSLA表記をコピーします。 (HSLA表記は CSS 3から使用できるようになった記述方法です。IE11以降のすべてのブラウザで使用できます)

● HSL Color Picker

HSLAのカラーピッカーです
https://github.com/ashung/hsl_color_picker

No.1239
07/11 19:10

edit