[OutSystems]OutSystems UIのDesign KitとPluginをFigmaで試してみる

2021年のOSDCで発表があった、OutSystems UIのDesign KitとPluginをFigma上で動作確認し、どう使うかを検討する。

Figmaはデザイナー向けのツールだが、自分が開発者なので、開発者の視点で見ていく。

# 環境情報
Personal Environment(Version 11.21.0 (Build 39357))
Service Studio(Version 11.54.15)
figma.com/@outsystemsui (Version 1.1.3)
OutSystems UI Plugin@Figma (Version 5)

# 前提条件
Figmaのアカウントを用意しておく

# 概要
## OutSystems UI Design Kit
デザインツールであるFigma/Sketch/Adobe Xdに取り込んで使う。

OutSystems UIが定義するスタイル、Pattern/Widget、レイアウト、Screen Templateなどを、上記デザインツール上でUIデザインするときに使える要素として取り込める。

## OutSystems UI Plugin
デザインツールであるFigma/Sketch/Adobe Xdにインストールして使う。

Design Kitを使ってThemeに持たせるスタイルの変更をした場合に、対応するCSSのセットを出力する、上記デザインツール向けのプラグイン。

## 用途
デザイナーがいない、あるいはデザイナーがService Studioの操作を覚えてService Studioでデザインしてくれるなら、OutSystems UI Design KitとPluginの出番はない。

プロジェクトに専業のデザイナーがいて、Figmaなどの外部ツールで、OutSystemsとの整合性を取ったデザインを行えるツール。

## 作業の流れ
### スタイル調整の場合
1. Design Kitを取り込む
1. 取り込んだDesign Kit内でFigma要素のスタイルの値を調整
1. PluginでCSSをエクスポート
1. OutSystems UIのThemeを継承したThemeに貼り付ける

### UIデザインの場合
1. Design Kitを取り込む
1. （ここはテストできないので推測だが）Design KitをFigmaのLibraryとしてPublish
1. LibraryからLayoutやPatternを配置し、スタイルを使って画面をデザインする
1. 仕様決定権者と合意
1. 開発者にデザインを共有（Figmaではデベロッパーハンドオフと呼ぶらしい）
1. 開発者はデザインを見つつService StudioでUIを作成する（このときDesign Kit経由でOutSystems UIのスタイルやPatternを使ってデザインしてあるので、デザイナーと開発者とのずれが少なくなるはず）

# Design Kitを取り込む
1. [OutSystems Ui@Figma](https://www.figma.com/@outsystemsui)でOutSystems UI v1.1.3を開く
1. 右上にある「Figmaで開く」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/79d531c7-3670-5cf3-eb76-686100d6b732.png)
3. 適当な他のプロジェクトに移動（画面上部真ん中の「OutSystems UI v1.1.3 (Community)」右にある下を向いているアイコンをクリック⇒プロジェクトに移動を選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/938a9eb0-bb47-6a4d-6385-6eb2fe509a86.png)

恐らくは、本来であれば、ライブラリとして公開して使うように思える。Libraryとして使うには有償版のFigmaが必要そうなのでここではスキップ。

# Design Kitのページを確認
## Cover ⇒　表紙なので気にしなくてよい

## Getting Started
Design Kit内に含まれる要素の説明が配置されている。
よって、まずはこのページを見るとよさそう。

## StylesからLayoutsまで
OutSystems UIの対応する要素が定義されている。

- Stylesページ: OutSystems UIでclassが定義されているようなスタイル（OutSystems側の視点での例については、[OutSystems UI Style GuideのStyles](https://outsystemsui.outsystems.com/styleguidepreview/Styles)参照）
- Screen Templatesページ：デフォルトで表示されるようなScreen Template（Service Studioで画面を新規作成する際に利用できるテンプレート）
- Iconsページ：Icons Widgetで利用できるアイコン
- Chartsページ：OutSystems Chartsで利用できるチャートBlock
- Layoutsページ：標準テンプレートに含まれる、おそらくはLayoutSideMenuとLayoutTopMenuを、様々な画面サイズで表示したときのものが用意されている

## Pattern別のページ
OutSystems UIのPattern (UI要素=Block）毎に別のページになっている。
2022/10/24リリースのOutSystems UI Version 2.12.0で追加されたTimePickerとMonthPickerのページはあるので、それなりにOutSystems UIのバージョンアップへの追随はされていそう。

# OutSystems UI PluginでDesign Kit上のスタイルを変更し、CSSを取得する
## 利用手順
1. [figma.comのOutSystems UI Plugin](https://www.figma.com/community/plugin/1020355261360565972/OutSystems-UI-Plugin)にアクセス
1. 「使ってみる」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/ba410a7a-0494-b688-b107-cf0170fb64c6.png)
3. Figmaに取り込んでおいたDesign Kitを開く
3. メインメニュー > プラグイン > OutSystems UI Plugin > Start Pluginを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/eb4ad151-4d9b-1f85-5a90-39e6c7f261a6.png)
5. Primary Colorを編集する（ここでPrimary Colorを対象にしているのはあくまでも例。実際にはPluginが対象にしている複数のスタイルを変更可能なはず）
    1. 方法1: Figma本体画面右のスタイル（色スタイル > Brand > Primary Base）を変更し、Pluginダイアログの「RE-SCAN PROPERTIES FROM PROJECT」ボタンをクリック
    1. 方法2: Pluginダイアログ内でTheme colors > Primaryをダブルクリックし、値を変更する（Figmaのファイルにある色スタイル > Brand > Primary Baseに自動で反映される）
1. Pluginダイアログ下部のGenerated CSS > All CSS Theme Variablesを展開し「SAVE CSS」ボタンをクリックして、PluginでカバーしているCSSをファイルとして出力する

## 出力したCSSファイル
Service StudioでThemeに取り込むなどして利用するはず。
ファイルの中身を確認してみると、そもそもOutSystems UIのThemeの行数が18406行あるのに対して、出力したファイルは200行しかない。

使い方としては、OutSystems UI ThemeをBase ThemeとしたThemeを会社レベル等で作成し、そこに中身を貼り付ける、ということになりそう。
Pluginがカバーするスタイルの変更は、ダイアログの項目を見る限り、特定の項目のみに限られていると思われる。よって、必要に応じてService Studio側で独自のスタイルをThemeに追加することも考えられる。その際は、更新の簡単さを考えて、Themeを

1. OutSystems UIのTheme
1. ↑を継承して、Plugin出力のCSSを貼り付けるTheme
1. ↑を継承して、差分のスタイルを記述するTheme

ここまでの階層を共有Themeとし、各アプリケーションではこれを継承したThemeを作ってもらうイメージかな。

# Design Kitを使ってOutSystemsアプリケーションのための画面をデザインする
## 手順
[4 Use components to build page](https://www.youtube.com/watch?v=ItFzfE3yPv0)というYouTubeの動画が参考になる。手順をまとめると（ただし、無償版のFigmaではファイル内に3つまでしか作れず試せなかったが）

1. 取り込んだDesign Kit内にPageを作る
1. Layoutsページから、作成する画面でLayoutとして使用するBlockに対応するものをコピーして作成したPageに貼り付ける
1. Design Kit内にあるPatternやWidgetをコピーして画面デザインを行う

## 有償版のFigmaならDesign Kitをライブラリ化
Design KitのGetting Startedページ > Use as LibraryのFrameに
> Open your Team Library panel and click Publish. (requires a paid Figma plan).

とあるので、本来はDesign KitをLibrary化して、複数のファイルから参照して使うものと思われる。この機能には有償版のFigmaがいるらしいが、作業をするのはデザイナーのはずなので通常は有償版のFigmaを使っているはず。

# 関連情報
OutSystems UI Design KitとPluginに触れているURLは以下のブログにまとめてある。
[OutSystems UI Design KitとOutSystems UI Pluginに付いての情報源まとめ](https://blog.house-soft.info/archives/2166)