Sparkle Design for Figma

Sparke DesignはGuidelinesで定義された指針を、誰もが簡単に素早くUIに反映するためのFigmaライブラリです。

Sparkle Design | FigmaSparkle Designはグッドパッチが培ってきたデザイン知見を集約し、あらゆる職種が高品質なデザインをより速く、より確実に届けるためのデザインシステムです。 プラットフォームの仕様に基づいて設計されているため、デザインと実装の一貫性を維持しながらプロダクトをスムーズに実装することができます。 Sparkle Designはテーマの簡単なカスタマイズをサポートするプラグイン「Sparkle Design Theme Settings」も提供しております。合わせてご利用ください。 Sparkle Designについて https://sparkle-design.goodpatc...www.figma.com

1. 下記のURLからFigmaデスクトップアプリをダウンロードします。
2. Figmaデスクトップアプリをコンピュータにインストールします。

Figmaダウンロード | デスクトップ&モバイル向けWebデザインアプリmacOSまたはWindowsデスクトップ向けFigma Webデザインアプリ、フォントインストーラ―、デバイスプレビューアプリをダウンロードできます。www.figma.com

Figmaのフォントインストーラーのインストール

1. コンピュータにフォントインストーラーをダウンロードします。
2. ダウンロードしたフォントインストーラーをインストールします。

Figmaダウンロード | デスクトップ&モバイル向けWebデザインアプリmacOSまたはWindowsデスクトップ向けFigma Webデザインアプリ、フォントインストーラ―、デバイスプレビューアプリをダウンロードできます。www.figma.com

Figmaデザインへのフォントの追加この機能を使用できるユーザー すべてのプランで利用できます 誰でもFigmaデザインにフォントを追加できます デフォルトでは、FigmaデザインファイルにはGoogleフォントが含まれています。別のフォントを使用するには、そのフォントをコンピューターにインストールして、Figmaデザインファイルでアクセスします。 注: Figmaデザインファイルに独自のフォントを使用し...help.figma.com

Material Symbolsのインストール

1. GithubからMaterialSymbolsRoundedの .ttf (True Type) ファイルをダウンロードします。
2. ダウンロードしたフォントファイルをインストールします。

material-design-icons/variablefont at master · google/material-design-iconsMaterial Design icons by Google (Material Symbols) - google/material-design-iconsgithub.com

Communityで公開されているファイルを複製して導入する方法

1. CommunityからSparkle Designを複製
   1. Sparkle Design Communityページopen_in_newにアクセスします。
   2. Figmaで開くボタンをクリックして、自分のドラフトに追加します。
   3. ドラフトに追加されたファイルを導入したい任意のプロジェクトに移動します。

   
2. ライブラリを公開
   1. 移動先のプロジェクトでSparkle Designのファイルを開き、左サイドナビゲーションからアセットを開きます。
   2. ライブラリアイコンをクリックして、ライブラリの管理ウインドウを開きます。
   3. 公開ボタンをクリックして、すべてのスタイル・コンポーネントをチーム内に公開します。

   

   ライブラリの公開この記事は旧Figma UIと新Figma UIの両方に対応しています。ページの左下にあるトグルスイッチで、現在使用しているUIを選択してください。UI3: Figmaの新デザインについて→ この機能を使用できるユーザー すべての有料プランで利用できます ライブラリのソースファイルへのフルシートと編集アクセス権が必要です ライブラリを公開して、ボタン、アイコン、U...help.figma.com

   
3. Sparkle Design (Community)の有効化
   1. Sparkle Designを導入したい「デザインファイル」を開き、左サイドナビゲーションからアセットを開きます。
   2. ライブラリアイコンをクリックして、ライブラリの管理ウインドウを開きます。
   3. 表示されたウインドウのチームタブから、複製したSparkle Designのファイルに追加をクリックして有効化します。

   

   Add or remove a library from a design fileBefore you start Who can use this feature Available on paid plans. Anyone with can edit access to a file can manage libraries for that file. This article applies to Figma Design files only....help.figma.com

   

Sparkle Designのローカルファイルを複製して導入する方法

1. Sparkle Designのローカルコピーを作成
   1. Sparkle Designを開きます。
   2. Figmaロゴをクリックしてメインメニューを開きます。
   3. メインメニューのファイル>ローカルコピーを保存...をクリックして、ファイルのコピーをダウンロードフォルダにダウンロードします。

   

   ファイルのローカルコピーの保存ファイルのローカルコピーは、.fig (Figma design)形式または.jam (FigJam)形式で保存できます。これはFigmaアカウントまたはチーム間でファイルを複製したい場合や、ファイルを手動でバックアップしたい場合に便利です。 ファイルのローカルコピーを保存する際、バージョン履歴やコメントは含まれません。このファイルを再インポートする場合は、新規ファイルのように扱われ、元の...help.figma.com

   
2. ダウンロードしたSparkle Designのインポート
   1. ダウンロードした.figファイルを、導入したい任意のプロジェクトにドラッグ＆ドロップしてインポートします。

   
3. ライブラリを公開
   1. インポートしたSparkle Designのファイルを開き、「Communityで公開されているファイルを複製して導入する方法」の手順2に沿って、ライブラリを公開します。
4. Sparkle Designの有効化
   1. Sparkle Designを導入したい「デザインファイル」を開き、「Communityで公開されているファイルを複製して導入する方法」の手順3に沿って、ライブラリを有効化します。

Sparkle Designのテーマは、バリアブル (Local Variables) に設定しているデザイントークンで管理されています。

バリアブルを編集すると、Sparkle Design全体のテーマを変更することができます。

テーマを構成する要素については、Sparkle Design Guideline - Themes をご確認ください。

1. バリアブルを開く
   1. 左サイドナビゲーションからバリアブルを開きます。

   
2. コレクションの切り替え
   1. バリアブルは「コレクション」ごとに整理されているため、編集したいコレクションを選択します。

   
3. バリアブルの値をカスタム値で編集する
   1. 編集したいバリアブルの「Value（値）」カラムのセルをクリックします。
   2. キーボードで直接入力、またはカラーピッカーで任意の色を指定します。

   
4. バリアブルの値を他のバリアブルから参照する（エイリアス）
   1. 編集したいバリアブルの「Value（値）」カラムのセルを右クリック、またはセル内のリンクを選択します。
   2. 表示されたライブラリから、参照したい既存のバリアブルを選択します。

   

バリアブルとコレクションの作成と管理はじめに この機能を使用できるユーザー すべてのプランの、すべてのユーザー ファイルへの編集可アクセス権があれば、誰でもバリアブルを作成および編集できます バリアブルに関する追加のリソースをお探しですか？バリアブルのガイドをご覧ください。 バリアブルモーダルへのアクセス バリアブルモーダルを使用して、以下を作成および管理します。 バリアブルコレクション バリアブ...help.figma.com

バリアブルやコンポーネントの更新は、以下の作業を行うことで反映できます。

1. ライブラリの更新 (公開)
2. ライブラリを読み込んでいるファイルで、ライブラリの変更を取り込む

Figmaのライブラリに関するガイドはじめに この機能を使用できるユーザー 有料プランで利用可能 Figmaでは、ライブラリは、コンポーネント、スタイル、およびバリアブルのような、デザインアセットのコレクションです。これらのデザインは1つのファイルの中に存在していますが、異なるファイルまたはプロジェクトをまたがって再使用されます。 多くの場合、ユーザーはライブラリを使用して、ボタン、アイコン、UI、色、プロパティの値...help.figma.com

1. 変更を加えたSparkle Designのファイルを開き、左サイドナビゲーションからアセットを開きます。
2. ライブラリアイコンをクリックして、ライブラリの管理ウインドウを開きます。
3. 公開ボタンをクリックします。
   
4. 更新したい要素にチェックを入れて、公開ボタンをクリックします。
   

ライブラリの公開この記事は旧Figma UIと新Figma UIの両方に対応しています。ページの左下にあるトグルスイッチで、現在使用しているUIを選択してください。UI3: Figmaの新デザインについて→ この機能を使用できるユーザー すべての有料プランで利用できます ライブラリのソースファイルへのフルシートと編集アクセス権が必要です ライブラリを公開して、ボタン、アイコン、U...help.figma.com

1. Sparkle Designを導入している「デザインファイル」を開き、左サイドナビゲーションからアセットを開きます。
2. ライブラリアイコンをクリックして、ライブラリの管理ウインドウを開きます。
3. 表示されたウインドウの更新タブから、アップデートされたアセットを確認します。
4. 個別に更新ボタンをクリックするか、すべて更新ボタンをクリックします。

WCAG 2.2のレベルAおよびレベルAAの達成基準のうち、Figma上で達成可能な達成基準について、コンポーネント単体でのレビューを実施しています。

全ての達成基準に適合しているコンポーネントには WCAG2.2 AA Reviewd のタグを付与しています。対象の達成基準は以下の通りです。