以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Getting Started with the Figma WordPress Design Library」を訳したものです。
誤字脱字誤訳などありましたらフォーラムまでお知らせください。
この記事は James Koster (@jameskoster) が執筆しました。
WordPress デザインライブラリは、その名の通り、WordPress のデザインアセットを集めたライブラリで、誰でも簡単に WordPress UI のデザインプロトタイプを Figma 上で作成できます。
これらのツールは、デザイナーが新しい UI を作成するときや、アイデアや機能強化、さらにはバグレポートの解決策を提供したいと考えている人にとって便利なものです。時に、百聞は一見にしかず、です。
この記事では、Figma の主な機能について説明した後、WordPress デザインライブラリのユーティリティーの一部のデモとして実用的な例を紹介します。
Figma とは
Figma は、WordPress プロジェクトのデザインチームのメンバーが、デザインコンセプトの作成や共有のために数年間にわたって使用してきた共同デザインツールです。ブラウザーからのアクセス、豊富なプロトタイピングツール、コンポーネントライブラリ、コードインスペクタ、ライブ埋め込み、インラインコメント、プラグインなど、さまざまな便利な機能が提供されています。
そして最高なのは、登録してさわり始めるのが完全に無料ということです。WordPress.org Figma オーガニゼーションに参加すると (手順は以下を参照)、WordPress デザインライブラリにアクセスできるようになり、WordPress の UI をすぐにデザインできるようになります。
WordPress デザインライブラリとは
Figma では、コンポーネントやスタイルを公開して共有することができ、ファイルをライブラリに変換して、他のファイルでそれらのコンポーネントのインスタンスを使用できるようになります。
Figma.com
WordPress デザインライブラリは、「WordPress のコードベースで UI を構成するすべての JavaScript コンポーネントを視覚的に表現したもの」と考えると分りやすいかもしれません。このライブラリのエンドユーザーは、これらのコンポーネントを自己完結型の環境で使用し、新しいインターフェースデザインを作成することができます。このライブラリは、すべての UI パーツ (ボタン、フォーム入力など) が入った大きなレゴの箱のようなもので、これを使って新しいデザインを作成し、試すことができます。
これらのアセットを使ってデザインを作成することで、従来は必要だった煩雑なプロセスがなくなり、新しいインターフェースのアイデアを素早く生み出すことができます。作成したボタンが、コードによってレンダリングされたボタンと完全に一致することを繰り返し再確認する必要はありません。逆に言えば、他の人とデザインを共有する人は、ボタンのような特定の要素をコードにできるだけ一致させようと努力するものです。WordPress デザインライブラリは、こういった問題を解決します。
これらのアセットがコードベースに存在するものと視覚的に一致していることのさらなる利点は、これらのアセットを使って作成したデザインは、最新の WordPress デザインランゲージを使用しているため、ほとんど何の努力も必要とせずに「WordPress らしく」なるということです。このようなデザインを開発者に渡すことで、解釈や実装が容易になります。
Figma の基礎
この記事の実践編に入る前に、Figma ライブラリの基本的な機能を簡単に説明します。これは、WordPress デザインライブラリを使用するための準備に役立ちます。
Component (コンポーネント)
上で触れたように、ライブラリは、コードベースの同等のものに視覚的に対応するものとして機能する「コンポーネント」で構成されています。 つまり、Figma には「ボタン」コンポーネントがあり、WordPress コードベースにはそれに対応する「ボタン」コンポーネントがあります。
しかし、Figma コンポーネントとはいったい何でしょうか ?
コンポーネントは、デザイン全体で再利用できる要素です。プロジェクト全体で一貫したデザインを作成、管理するのに役立ちます。
help.figma.com
次にデザインする時に役立つやり方を理解するために、Figma コンポーネントの特性の一部を簡単に調べてみましょう。
Variants (バリエーション)
Figma のコンポーネントの中には、variant (バリエーション) があるものがあります。例えば、ボタンは以下のような状態を持つことができます。
- Resting (休憩中)
- Hover (ホバー)
- Focus (フォーカス)
- Disabled (無効化)
これらは、Figma の variant インターフェースで操作できます。
variant を持つコンポーネントの他の例として、フォーム入力やメニュー項目があります。これは Figma の新機能であるため、時間をかけて追加していく予定です。
Overrides (上書き)
挿入したコンポーネントは、ライブラリのマスターコンポーネントと本質的にリンクしていますが、いくつかのプロパティを上書きすることが可能です。
ボタンコンポーネントのインスタンスを操作する際、ラベルや背景色などを変更できます。git のワークフローに慣れている方なら、これはローカルブランチの作成に似ています。変更を加えても、数回クリックするだけで簡単にリセットできます。
ローカルインスタンスに適用された override は、マスターコンポーネントが更新されても継続されます。そのため、緑の背景を持つボタンをデザインする場合、マスターコンポーネントが更新されても、ボタンがそれらの更新を継承して緑色のままであるという知識があれば、その overrideを安全に適用できます。
ここではコンポーネントの表面を軽くなぞっただけですので、より高度な情報については、公式の Figmaドキュメントを見ていただくことをおすすめします。
Figma スタイル
コンポーネントに加えて、スタイルも WordPress デザインライブラリの一部として公開されています。これらは、マスタースタイルがライブラリに存在し、ローカルの Figma ファイルで利用できるという点でコンポーネントと同様の属性を持っています。 コンポーネントと同様に、ライブラリへの変更が公開されると、スタイルは更新を受け取ります。
スタイルは、WordPress のコードベースに存在する色、タイポグラフィのルール、ドロップシャドウなどの効果を定義するために使用されます。これにより、テキストや背景の色などを他の UI パーツに合わせて適用することができます。
ライブラリのスタイルを利用することで、既存の UI 要素に一致したものを作ることができ、実装が容易になります。
Figma スタイルについて詳しく知りたい方は、公式ドキュメントをおすすめします。
Views/Stickers (ビュー/ステッカー)
「Sticker (ステッカー)」は、共通の UI 要素を表現するためにコンポーネントとスタイルを組み合わせたものです。カスタマイズの必要性が高いため、完全なコンポーネント化には向いていません。ステッカーの例としては、インスペクタのサイドバーやブロックインサータなどがあります。
使い方はシンプルです。必要なステッカーを見つけ、WordPress デザインライブラリからコピーし、ローカルファイルにペーストして、必要に応じてカスタマイズするだけです。
ステッカーは、コンポーネントやスタイルのような Figma の機能ではありませんが、作業ファイルにコピーしたステッカーは、そのベースとなるアセットにより、常に最新の状態に保たれます。
ビューとは、コンポーネントやスタイル、ステッカーなどをアレンジしたものです。
WordPress デザインライブラリを使ってブロックをデザインする
さて、Figma ライブラリの基本とその機能、そしてステッカーやビューなどの WordPress デザインライブラリのユーティリティーについて理解したところで、実際の例として、全く新しいブロックの UI をデザインしてみましょう。
はじめに
最初に必要なのは、WordPress.org の Figma オーガニゼーションにお持ちの Figma アカウントを追加することです。
Figma に登録したら、コミュニティ Slack の #design チャンネルに参加して、招待をリクエストしてください。フレンドリーなコミュニティメンバーが、すぐにセットアップのお手伝いをします。
さあ、楽しいパートの始まりです。
Figma で新規デザインファイルを作成するには、Gutenberg プロジェクトにアクセスし、”+ New” ボタンをクリックします。
それでは、WordPress デザインライブラリを作業ファイルに入れて、必要なものにアクセスできるようにしましょう。
- “Assets” (アセット) パネルを開き、小さな本のアイコンをクリックして、利用可能なチームライブラリを表示します。
- 表示されたモーダル画面で、”WordPress Design Library” をオンにします。他のライブラリは今のところオフにしておいて構いません。
モーダル画面を閉じると、アセットパネルにいくつかのコンポーネントが表示されているのが分かります。コンポーネントを挿入するには、キャンバスにドラッグしてください。
ブロックを挿入するような感じですね 🙂
ピザブロックの作成 🍕
私はピザを食べるのが大好きなので、サンプルとして、ユーザーが投稿やページにおいしいピザを表示できるような新しいブロックをデザインしてみたいと思います。このブロックでは、スライスの枚数やトッピングの種類を指定できるオプションを含めたいと思います。
流れを把握する
私はいつもブロックをデザインする際に、個別の流れに注目したいと思っています。つまり、ユーザーがそのブロックを操作する際に取るであろう直線的なステップのことです。今回のケースでは、Figma ファイルで以下のステップ/ビューのビジュアライゼーションを作成したいと思います。
- ブロックインサータからブロックを挿入する
- ブロック、ツールバー、インスペクタのオプションを含む、ピザブロックのプレースホルダーの状態
- 設定済みのピザブロックの設定
- 最終的には、キャンバスの上に美味しそうなピザが置かれる
新しい状態をスケッチする
WordPress デザインライブラリのおかげで、多くの既存の UI コンポーネントを使用することができますが、それでも、ピザブロックが必要とする新しいインターフェイスでそれらがどのように構成されるのかという大まかなアイデアが必要です。たいてい、これらを紙にスケッチするのが役に立ちます。
これは、ユーザーが初めてブロックを挿入したときに表示されるプレースホルダーの状態です。これで必要なものはすべて揃うはずです。
ビューとステッカーの準備
幸いなことに、WordPress デザインライブラリには上記のフローの各ステップに使用できるビューがあります。
ライブラリを開いて “Views” のページに移動し、必要なビューを見つけてコピーし、作業用のファイルに貼り付けます。
ライブラリーの View は、他の人がアクセスできるように、そのままの形でコピーする (切り取りはしない) ことがとても重要です。切り取ってしまうと、永遠に消えてしまいますので、絶対にやめてください 🙂
ブロックのプレースホルダーステッカーも必要ですので、”Stickers” ページに移動し、先ほどのスケッチに最も近いものをコピーして、作業ファイルに貼り付けます。
ビューと同様に、ステッカーはコピーするだけで、切り取りはしないでください。
紙の上でスケッチしたプレースホルダーの状態 (これを Figma ファイルにインポートすると便利です) を参照すると、デザインを実現するためにいくつかのフォーム要素が必要であることがわかります。
コンポーネントの収集
アセットパネルに移動し、必要なコンポーネントを見つけて、ファイルにドラッグします。
ワンポイントアドバイス: 一度挿入したコンポーネントは、その設定パネルから別のコンポーネントに変換することができます。アセットパネルを何度も開くよりも、すでに挿入したコンポーネントをコピー/ペーストして、この方法で変形させる方が簡単な場合もあります。
ビュー、ステッカー、コンポーネントをアレンジしてまとまりのあるデザインにする
ここで、必要なパーツがすべて揃ったので、あとは先ほど説明したフローの各ステップに合わせて、パーツを配置するだけです。この作業は、ドラッグ & ドロップで簡単に行えます。
Photoshop や Sketch などのソフトウェアに慣れ親しんでいる方であれば、とても見慣れたものに感じられるはずです。
すべてが整ったところで、フローは完成です。
わずかな時間でこれだけのことができるのは、今でも信じられません。
プロトタイプの連携
フローの各ステップを作成した後、最後のステップはそれらをつなげてクリッカブルなプロトタイプを形成することです。
プロトタイプパネルに切り替えて、レイヤーを選択し、白い点を対応するフレームにドラッグして、クリックビヘイビアを作成します。
Figma プロトタイピングツールがサポートする動作には、ホバー、ドラッグ、クリックなど様々なものがあります。また、スマートアニメーションを作成することも可能です。別のチュートリアルで探求できるかもしれませんが、今のところ、より高度なプロトタイピングについては Figma のドキュメントを参照してください。
適切な要素がすべて連携されたので、「再生 ▶️」アイコンをクリックして、プロトタイプを試してみることができます。
ここをクリックしてぜひ試してみてください。
以上です !
このチュートリアルでは、かなりシンプルで簡潔に説明しようとしました。ここでは基本的を理解しただけですが、新しいデザインを試す際には、Figma と WordPress デザインライブラリの力が発揮されます。