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ファイルにリンクできます。

その他のリソース

トップへ戻る

このページは役に立ちましたか？