More than 1 year has passed since last update.

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

Last updated at 2023-07-13Posted at 2023-07-13

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. 方法1: Figma本体画面右のスタイル（色スタイル > Brand > Primary Base）を変更し、Pluginダイアログの「RE-SCAN PROPERTIES FROM PROJECT」ボタンをクリック
2. 方法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を使っているはず。