FigmaでLightning Design System v2 UI Kitを使って画面デザイン
こんにちは。木村です。
私はエンジニアですが、Lightning Design SystemのUI Kitを使ってFigmaで画面デザインをするにあたって、やり方が少しわかってきたのでチュートリアル形式でノウハウを共有したいと思います。そして、劇的に使いやすくなったSLDS UI Kitのv2がいつの間にかリリースされていたので、v1との違いについても触れながら解説します。
Figmaに詳しい方には当たり前のことばかりだと思いますので、回れ右していただくか、改善点を教えていただけたらありがたいです。
この記事の内容は以下のイベントの発表内容をまとめたものとなります。毎月2回開催していますので、よろしければご参加ください。
Lightning Design SytemのUI Kit
Lightning Design SystemのFigma用のUI Kitが以下で公開されています。
https://www.figma.com/@salesforce
そして、いつの間にかEnhanced Lightning UI（ELUI）に対応したv2が公開されていました。（ELUIについてHow We Refreshed the Lightning UI Design | Salesforceをご覧ください。）
つまり、現時点でSalesforceの画面デザインをFigmaで行う場合、2つのUI Kitがあり、現行UI（v1）を使うなら以下の4つのリソースをライブラリとして追加し、
ELUI（v2）を使うなら以下の2つのリソースを追加するとよさそうです。
Foundation: Icons | Lightning Design System | Figma （どうもアイコンは上記に含まれていなそう）
チームのライブラリとして追加する方法
上記のUI Kitを開いたあとに、下図の「ライブラリを公開…」をクリックし、画面の指示に従うと、UI Kit内のコンポーネントやタイポグラフィーがチームで使えるようになります。
無料版Figmaをご利用の方
ただし、Figmaを無料で使っているとライブラリが使えません。その場合は、自分が作成しているデザインファイルに上記UI Kitの全ページをコピーするしかなさそうです。
[補足]
最初はフォントがないとエラーになるかもしれません。
現行UI版はSegoe UI、ELUI版はSF Proが使用されています。
Segoe UIはここから、SF Proはここからダウンロードすることができます。
Figmaのブラウザ版を使用している場合は、ここからフォントインストーラーをインストールする必要があるかもしれません。
もう手元でフォントがないエラーが出ないので、曖昧な情報ですみません🙇♂️
現行UI版とELUI版とどっちがいいの？
使い勝手の観点だと、後発のELUI版の方がFigmaのコンポーネントとして圧倒的に出来がよさそうです。例えば、以下のような大変ありがたい改善が行われています。
コンポーネントのプロパティの多くがFigmaのプロパティとして使える
Modal/Cardなど中身をデザインしたい場合にインスタンスを切り離すことなく中身のコンポーネントを設定できる
マージン・サイズなどの数値もFigmaのバリアブルとして定義された
もちろんどちら向けの画面を作りたいかが一番ではありますが、おそらくそのうちみんなELUIになるので、ELUI版で作ってしまっていいのではないでしょうか。
チュートリアルのゴール
さて、この記事ではELUI版を使って以下のような画面を作る手順を説明しながら、コツを伝えていきたいと思います。
これは何かのアプリの管理画面をイメージしています。APIキーの編集ボタンをクリックするとモーダルで編集画面が開きます。
1. UI Kitを追加する
最初に公開ライブラリをデザインファイルで使えるようにします。アセットから「チームライブラリを参照」を開き、「自分のチーム」から対象のライブラリをデザインファイルに追加します。
[補足]
無料版を利用している場合はこの作業は不要です。代わりに同じデザインファイル内にUI Kitのページを全部コピーしてきてください。
2. 画面フレームを作る
フレームをクリックし、デスクトップ>デスクトップを選びます。
配置したフレームをオートレイアウトに変更し、以下の設定をします。
縦に並べる
上下の間隔・パディングを全部Spacing/0(0px)にする
塗りをSurface/inverse-1にする
[Tips]
基本的にすべてのフレームはオートレイアウトにしましょう。そうするとCSSのflexboxとほぼ等価になり、HTML/CSSと同じ気分でレイアウトできますし、実装に落としやすいです。
でも、書き上げてから思いましたが、一番外側のフレームはオートレイアウトにせず、中に同じサイズのオートレイアウトのフレームを入れた方がよさそうです。position:absoluteの要素を置きたくなったときに置けないという弊害がありました。
3. グローバルヘッダーを置く
アセットから「global」で検索し、Global HeaderとGlobal Navigationをフレームにドラッグ＆ドロップします。オートレイアウトにしたので、適当に入れるだけで上から並んでくれます。
横幅を「コンテナに合わせて拡大」にすると、フレームの横幅ぴったりになります。
[Tips]
コンポーネントのインスタンスの追加はクリックして「インスタンスを挿入」からもできますが、ドラッグ＆ドロップがおすすめです。「インスタンスを挿入」だとフレームの中に入らないことがあり、あれ？あれ？ってなることがあります。
4. 左右2ペインのフレームを置く
ボディ部分のフレームを配置します。適当に配置した後に横縦ともに「コンテナに合わせて拡大」を設定すると楽です。
左右2ペインレイアウトにするので、このフレームはオートレイアウトで以下のように設定します。
横に並べる
間隔: Spacing/2(8px)
左右のパディング: Spacing/0(0px)
上下のパディング: Spacing/1(4px)
5. 左ペインにメニューを置く
左メニューを配置します。アセットから「Vertical Navigation」コンポーネントをドラッグ＆ドロップします。
細かい設定は動画を参考にしてください。不要なメニューの削除はプロパティからはできないため、レイヤーから非表示にしています。
[補足]
Vertical Navigationで初期配置以上にメニューを増やす必要がある場合は、おそらくインスタンスを切り離すしかなさそうです。
6. 右ペインに設定画面を置く
右ペインは縦にコンポーネントを並べていくので、まず縦のオートレイアウトのフレームを置きます。
次に上からPage Headerコンポーネント、Cardコンポーネントを置いていきます。コンポーネントプロパティを適切に変更し、完成画面になるようにしていきます。ヘッダーはほとんどのUIを非表示にしていきます。
詳細は動画をご覧ください。その中で以下の3点はちょっと変わった変更が必要なので注意してください。
ヘッダーのアイコンを変更するには、Swat standard iconでUtility Icons / settingsを選択する
カードの右上ボタンのラベル変更はカードコンポーネントではできないので、ボタンコンポーネントを直接選択して変更する
カードの角丸を0にするのは直接入力します
[Tips]
とにかくHTML/CSSでflexboxを使ってレイアウトしている気持ちでFigmaを使うとよいです。ただし、HTMLだと幅を指定しないと100%になりますが、Figmaはドロップした直後は固定幅になるので、幅を「コンテンツに合わせて拡大」にするのを忘れないようにしましょう。
7. Cardの中身を作る
v2からCardコンポーネントを切り離さずに中身を設定できるようになりました。そのためには中身をコンポーネントとして作成する必要があります。
「Input - Default」コンポーネントのプロパティを変更して、リードオンリーな表示にします。Inputコンポーネントをフレームに入れてコンポーネント化します。最後にCardコンポーネントのSwap placeholderプロパティで作成したコンポーネントを選択するとCard内に作成したコンポーネントが表示されます。
[Tips]
コンポーネントもオートレイアウトのフレームで包んで、幅を「コンテンツに合わせて拡大」にしておくと他のコンポーネント内に入れたときに親コンポーネントに自動でフィットします。
[Tips]
ここでは同じページ内にコンポーネントを置いていますが、実際はコンポーネントは別ページにまとめると管理しやすくなると思います。
8. 編集ボタンクリック時のモーダルを作成
編集ボタンをクリックしたときにモーダルで編集画面を表示するようにします。まずそのモーダルを別フレームで用意します。
アセットからModalコンポーネントをドラッグして、オートレイアウトフレームに入れて、各種プロパティを調整します。
9. モーダルの中身を作る
カードの中身に入れたAPIキー設定コンポーネントのバリアントとしてモーダルの中身のコンポーネントを作っていきます。別に別コンポーネントでもいいのですが、せっかくなのでバリアントを使ってみましょう。
APIキー設定コンポーネントを選択して、バリアントを追加します。
元々あったバリアントはType=ReadOnly、追加したバリアントをType=Editとします。Editの方のInputコンポーネントのプロパティをいい感じに変更します。
中身のコンポーネントが完成したら、ModalコンポーネントのSwap placeholderプロパティでAPIキー設定コンポーネントを選択します。すると、Typeバリアントが選べるようになるので、Type=Editを選択します。
10. モーダルを開くインタラクションを追加
最後に編集ボタンをクリックするとモーダルを開くインタラクションを追加していきます。
編集ボタンを選択し、プロトタイプタブからインタラクションを追加し、以下のように設定します。
トリガー: クリック時
アクション: オーバーレイを開く
オーバーレイ: APIキー設定モーダル
背景: チェックを入れる
モーダルの閉じる・キャンセル・保存ボタンには以下のインタラクションを追加します。
トリガー: クリック時
アクション: オーバーレイを閉じる
右上の再生ボタンをクリックするとプロトタイプの動作を確認することができます。
[補足]
動画内でボタンを選択するとこはダブルクリックを繰り返しています。ダブルクリックを繰り返すとどんどん子要素を掘っていくことができます。レイヤーから選んでもいいんですが、どちらが主流なんでしょう？
おわりに
イベントの発表ではバッチ実行メニューをクリックしたときの動作まで作ったのですが、記事にするのは大変なのでここまででご容赦ください。
もちろんFigmaはもっとたくさんの機能があるのですが、シンプルな業務画面であれば、SLDSのUI Kitを使って、オートレイアウトを駆使して配置していくだけでも、けっこう簡単にFigmaを使って画面デザインを試行錯誤できそうなことが伝わったのではないでしょうか？
この記事が気に入ったらサポートをしてみませんか？