私はそれを正確に行い（レイヤーのCSSとHTMLを生成し、それらを％値でエクスポートするオプションを提供する）、Photoshopのweb-devの作業を半分に削減するスクリプトを見つけました。今、私は誰かがプラグインに出会った/アップしたり、Sketchアプリのようなネイティブ機能を教えてくれるかどうか興味があります。そのようなものがないことで、私のSketchへの移行は非常に苦痛です。または、Sketchが初めての場合、SketchがCSSとHTMLで動作する方法について、イデオロギー的に異なるものが不足しています。

これはあなたが探している答えではないかもしれませんが、平凡な自動生成されたスタイルをエンジニアに渡すよりも良いと思います。

選択的マークアップ

SketchのコンテキストメニューCSSグラバーをご存知だと思います。好きなだけオブジェクトを選択でき、クリップボードにCSSを貼り付けるよりも早く取得できます。

もちろんセレクターはありません。実際にはCSSのメモです。各ブロックは、次のように、レイヤーの名前を使用した前のコメントによって呼び出されます。

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

ファイル注釈

Sketch Measureは、仕様に応じてさまざまなレベルの注釈を生成するプラグインです。こちらにデモビデオがあります。基本的な考え方は、重要な数字に注釈を付け、開発者が独自のコードを作成できるようにすることです。

注釈を超えて

次のようなツールを単独または組み合わせて試すこともできます。

• Zeplinは、開発者が検査できるように、Sketchデザインのスタンドアロンで共有可能なバージョンを作成し、オンデマンドで仕様を引き出します。
• Marvelは、Sketchファイルをインポートするプロトタイピングツールです。インタラクティブなプロトタイプのように通信するものはありません！

実験的なHTMLジェネレーター

私はこれを使ったことがなく、明らかに開発の初期段階にありますが、Bladeプラグインは有望に見えます。

Bladeは、自動的にHTMLを生成するためのSketch 3プラグインです。グループのタグ<div>、テキストのタグ<p>などを生成します。

次のリンクを参照してください http://blog.mengto.com/the-best-hidden-features-in-sketch/

Meng Toのブログをフォローして、Sketchの興味深いチュートリアル、ヒント、およびコツを入手してください。 http://blog.mengto.com/ https://designcode.io/