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との整合性を取ったデザインを行えるツール。
作業の流れ
スタイル調整の場合
- Design Kitを取り込む
- 取り込んだDesign Kit内でFigma要素のスタイルの値を調整
- PluginでCSSをエクスポート
- OutSystems UIのThemeを継承したThemeに貼り付ける
UIデザインの場合
- Design Kitを取り込む
- （ここはテストできないので推測だが）Design KitをFigmaのLibraryとしてPublish
- LibraryからLayoutやPatternを配置し、スタイルを使って画面をデザインする
- 仕様決定権者と合意
- 開発者にデザインを共有（Figmaではデベロッパーハンドオフと呼ぶらしい）
- 開発者はデザインを見つつService StudioでUIを作成する（このときDesign Kit経由でOutSystems UIのスタイルやPatternを使ってデザインしてあるので、デザイナーと開発者とのずれが少なくなるはず）
Design Kitを取り込む
- OutSystems Ui@FigmaでOutSystems UI v1.1.3を開く
- 右上にある「Figmaで開く」ボタンをクリック
- 適当な他のプロジェクトに移動（画面上部真ん中の「OutSystems UI v1.1.3 (Community)」右にある下を向いているアイコンをクリック⇒プロジェクトに移動を選択）
恐らくは、本来であれば、ライブラリとして公開して使うように思える。Libraryとして使うには有償版のFigmaが必要そうなのでここではスキップ。
Design Kitのページを確認
Cover ⇒ 表紙なので気にしなくてよい
Getting Started
Design Kit内に含まれる要素の説明が配置されている。
よって、まずはこのページを見るとよさそう。
StylesからLayoutsまで
OutSystems UIの対応する要素が定義されている。
- Stylesページ: OutSystems UIでclassが定義されているようなスタイル（OutSystems側の視点での例については、OutSystems UI Style Guideの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を取得する
利用手順
- figma.comのOutSystems UI Pluginにアクセス
- 「使ってみる」ボタンをクリック
- Figmaに取り込んでおいたDesign Kitを開く
- メインメニュー > プラグイン > OutSystems UI Plugin > Start Pluginを選択
- Primary Colorを編集する（ここでPrimary Colorを対象にしているのはあくまでも例。実際にはPluginが対象にしている複数のスタイルを変更可能なはず）
- 方法1: Figma本体画面右のスタイル（色スタイル > Brand > Primary Base）を変更し、Pluginダイアログの「RE-SCAN PROPERTIES FROM PROJECT」ボタンをクリック
- 方法2: Pluginダイアログ内でTheme colors > Primaryをダブルクリックし、値を変更する（Figmaのファイルにある色スタイル > Brand > Primary Baseに自動で反映される）
- 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を
- OutSystems UIのTheme
- ↑を継承して、Plugin出力のCSSを貼り付けるTheme
- ↑を継承して、差分のスタイルを記述するTheme
ここまでの階層を共有Themeとし、各アプリケーションではこれを継承したThemeを作ってもらうイメージかな。
Design Kitを使ってOutSystemsアプリケーションのための画面をデザインする
手順
4 Use components to build pageというYouTubeの動画が参考になる。手順をまとめると（ただし、無償版のFigmaではファイル内に3つまでしか作れず試せなかったが）
- 取り込んだDesign Kit内にPageを作る
- Layoutsページから、作成する画面でLayoutとして使用するBlockに対応するものをコピーして作成したPageに貼り付ける
- 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に付いての情報源まとめ