Alexa Design Systemツールキット



Alexa Design Systemツールキット

SketchおよびAdobe XD設計ツールキットを使用して、Alexa Presentation Language(APL)で利用可能な最新のスタイル、パターン、およびコンポーネントを活用できます。

動作のしくみ

Alexa Design Systemツールキットには、Alexa Presentation Language(APL)で構築されるマルチモーダルスキルを設計するためのライブラリとテンプレートが含まれています。これらのライブラリとテンプレートは、コードベースのAlexa StylesパッケージとAlexa Layoutsパッケージを表しているため、レスポンシブ対応テンプレートとレスポンシブ対応コンポーネントは、異なるviewportプロファイルに自動的に適応します。ツールキットは、APLの主なリリースごとに更新されるため、設計に適したツールが常に用意されています。

: 現時点では、SketchとAdobe XDのみがサポートされています。

Sketch用の設計ツールキット

含まれるもの

  • Alexa Design Systemライブラリプラグイン: Sketchライブラリは、レイアウトやユーザーエクスペリエンスの構築に役立つリスト項目、アイコン、色などコンポーネントとスタイルのコレクションです。このライブラリには、ライブラリのコンポーネントとスタイルで構築されたデバイスのviewportプロファイルをサポートするAlexaレスポンシブ対応レイアウトが含まれています。
  • Alexa Design Systemテンプレート: このファイルには、ライブラリのコンポーネントとスタイルを使用して構築されたサポートされているviewportプロファイルのフルスクリーンのAlexaレスポンシブ対応レイアウトが含まれています。
  • Amazonの書体: テンプレートとライブラリでは、Amazon Ember DisplayとBookerlyの書体が使用されています。これらの書体もダウンロードが可能です。

システム要件

インストール手順

  1. Alexa Design System Sketchプラグインをインストールします。ライブラリは自動的に更新されるため、常に最新バージョンを使用できます。

  2. Alexa Design SystemテンプレートとAmazonの書体ファイルをダウンロードします。レイアウトファイルはライブラリを利用します。レイアウトファイルからアートボードをコピーして貼り付けるか、テンプレートとして保存することができます(ただし、新しいライブラリとして保存することはできません)。

Adobe XD用の設計ツールキット

含まれるもの

  • Alexa Design System: Adobe XDを使用すると色、文字スタイル、コンポーネントなどのアセットをソースファイルからリンクできるため、デザインシステムでレイアウトやユーザーエクスペリエンスをすばやく一貫して構築できます。Alexa Design Systemのシンボルとスタイルは、すべてコードベースのAlexaレスポンシブ対応レイアウトです。
  • Alexa Design Systemテンプレート: このファイルには、ライブラリのコンポーネントとスタイルを使用して構築されたサポートされているviewportプロファイルのフルスクリーンのAlexaレスポンシブ対応レイアウトが含まれています。
  • Amazonの書体: デザインシステムは、Amazon Ember DisplayとBookerlyの書体を使用しています。これらの書体もダウンロードが可能です。

システム要件

インストール手順

  1. Alexa-Design-System.xdファイルを開き、クラウドドキュメントとして保存します。
  2. 新しいXDファイルを作成し、左側のAssetsパネルを開きます。
  3. アセットパネル上部のLink Assets(「+」アイコン)をクリックし、クラウドドキュメントからAlexa-Design-System.xdファイルを選択します。これにより、色、文字スタイル、コンポーネントを含むすべてのアセットがAlexa Design Systemからインポートされ、新しいXDファイルで使用できます。このプロセスに従って、Alexa Design Systemアセットを作成する新しいXDファイルにリンクできます。

その他のリソース

トップへ戻る