Windows アプリ用の設計ツールキットとサンプル

Fluent Design/Windows アプリの設計と UI に関連するダウンロード。 Visual Studio など、その他のツールについては、メインのダウンロード ページをご覧ください。

ツールキットとライブラリ

Figma Toolkit iconFigma ツールキット
WinUI 2.7、2021 年 11 月
ダウンロード

WinUI library thumbnailWindows UI ライブラリ
Windows アプリのコントロールと他の UI 要素。
インストール手順

Windows community thumbnailWindows コミュニティ ツールキット
ヘルパー関数、カスタム コントロール、およびアプリ サービス。
インストール手順

Template Studio thumbnailTemplate Studio
ウィザードベースの UI を使用してアプリを迅速にスキャフォールディングします。
インストール手順

Microsoft Store から WinUI ギャラリー アプリを入手し、XAML コントロールおよび Fluent Design System の動作を確認します。 WinUI 3 ギャラリー アプリと WinUI 2 ギャラリー アプリには、ほとんどの WinUI 3 および WinUI 2 コントロールと機能の対話型の例が含まれています。 これらのアプリは、この Web サイトの対話型コンパニオンです。 これらのアプリがインストールされている場合、個々のコントロール ページのリンクを使用して、アプリを起動し、コントロールの動作を確認することができます。

  • Microsoft Store から WinUI 3 ギャラリーWinUI 2 ギャラリーを取得します。
  • GitHub から両方のソース コードを取得します (WinUI 3 の場合は main ブランチ、WinUI 2 の場合は winui2 ブランチを使用します)。

フォント

ツール

Download the tile and icon generator

Adobe Photoshop 用のタイル/アイコン ジェネレーター Adobe Photoshop 用の一連の操作により、7 つのファイルから 68 の推奨されるタイル/アイコン アセットを生成します。
タイル/アイコン ジェネレーターのダウンロード

サンプル

Fluent XAML Theme Editor imageFluent XAML Theme Editor
Fluent XAML Theme Editor は、Fluent Design System の柔軟性を実現するとともに、Windows アプリケーションで使用される ResourceDictionary フレームワーク用の XAML マークアップを生成することで、アプリ開発プロセスもサポートするツールです。 ツール サンプルをダウンロードする
GitHub でツールを確認する

VanArsdel imageVanArsdel
Van Arsdel 社のエンド ツー エンド Windows サンプル アプリは、次世代の Microsoft Fluent Design System を示すためにビルドされました。 これにより、Windows UI ライブラリの改良された密度と新しいコントロールのほか、UX フレームワークおよび合成の基になる強力な機能を広範に使用することができます。 このサンプルは、IoT デバイス (この例では、ランプ) を管理および購入するための生産性の高い豊富なエクスペリエンスを構築する方法を示しています。
VanArsdel サンプルをダウンロードする
GitHub で VanArsdel サンプルを確認する

build cast imageBuildCast
BuildCast は、Fluent Design System と Windows を示すために組み込まれているエンド ツー エンドのサンプルです。 Windows テクノロジ愛好家のフィードなど、特定のビデオ ポッドキャストの参照、ダウンロード、再生を行うことができます。 インク メモ、ブックマーク、リモート再生の機能もあります。 このサンプルは、2017 年の Build カンファレンスの Fluent Design によるすばらしいアプリの構築に関する講演で最初に取り上げられたものです。
BuildCast サンプルのダウンロード
GitHub で BuildCast サンプルを確認する

Lunch Schedulerランチ スケジューラ―
友人や同僚とのランチをスケジュールする Windows アプリ サンプルです。 ランチを作成し、興味のあるレストランに友人を招待するだけで、すべての関係者のランチ管理がアプリによって処理されます。 このアプリでは、Windows アプリに、アクリル、表示、接続型アニメーションといった Fluent Design System の要素が取り入れられています。
ランチ スケジューラ サンプルをダウンロードする
GitHub でランチ スケジューラ サンプルを確認する

他のコードをお探しの場合は、

Windows サンプル ページで Windows アプリ サンプルの一覧をご覧ください。 サンプル ポータルに移動