Sketch UI キット

    ここ数年で、デザインからコードへの強力な動きが生まれ、Sketch が中断したところから再開しました。目標は、Sketch のデザインを使用可能なコードに簡単に変換できるようにする、シームレスで一貫性のある使いやすいプロセスを作成することです。

    Note

    Sketch XD UI キットおよびサンプル アプリをダウンロード。

    App Builder Sketch インポーター

    以下は、App Builder を使ってドラッグアンドドロップでデザインからコードを作成する 4 つの簡単な手順です。

    手順 1: App Builder のメイン メニューで [新しいアプリ] をクリックします。 Sketch Design から新しい Angular アプリを作成します。

    新しいアプリのダイアログ

    手順 2: Sketch ファイルを [既存のデザインから作成] ドロップ領域にドラッグします。 Sketch から Angular へのドラッグ アンド ドロップ

    デザインのインポート ダイアログ

    手順 3: Cloud IDE でデザインを確認します。 Sketch の Web App Builder のアプリ

    コードの生成

    手順 4: Angular コードを確認またはダウンロードします。 IDE の右上にあるボタンを使用して、アプリを生成するか、アプリをプレビューしてコードを確認するかを選択できます。こちらでは、実行中のアプリと HTML、CSS、または TypeScript のコードで [プレビュー] オプションを確認できます。

    コードの生成

    そんな簡単に、デザインまたは開発者は、Web ベースの WYSIWYG ツールを使用して、Sketch からコードを作成できます。チームは、クラウドベースの WYSIWYG ドラッグ アンド ドロップで非常に優れた実際のアプリをデザインおよび構築し、コードを取得できます。これには、Web レイアウト、CSS、およびデータさえも完備しています。

    Sketch アセットのダウンロード

    Sketch UI キットは、以下の直接リンクからダウンロードできます:

    その他のリソース