OutSystems UI Design KitとOutSystems UI Pluginに付いての情報源まとめ

これらのツール自体は以前からあったもの。動作確認してメモを作ろうと考え、手始めに情報源となるURLをまとめた。この後は動作確認して、Qiita当たりに使い方のメモを投稿する予定。

以下の情報源の中では、ツールの使い方を知りたい人に最もお勧めなのは、文章のソース > Hi Interactive Blog > How to change the look and feel of an app using Figma。

そもそも何？

デザインツールであるFigma/Sketch/Adobe Xdに取り込んで使う。

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

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

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

OSDC 2021での発表後、Adobe XD向けのDesign Kitも追加されたことを紹介するAnnouncementの投稿。

埋め込まれている動画はリンク切れになっているが、おそらく公開場所が移動しただけ。動画のソース > OSDC 2021での発表を参照。

Design KitとDesign Systemsの違い（どちらもOutSystemsというよりは、より一般的なアプリケーションのデザインで使われる用語らしい）について。

Design Kitとは何か？というような情報も含まれるが、特に読まなくてもよさそう。

デザインツールの中でもFigmaを例に、用途、Design KitとPluginの使い方を順番に説明している。今回のソースの中では最もまとまっている。

最初の18分くらいは、UIデザインの重要みたいな一般論を話しているので飛ばしてよいと思う。デモ有。ただ、字幕がつかない英語の動画なので、ちょっと厳しいかもしれない。

Pluginをつくのにあたって、どういう技術的困難があって、どう解決したか、みたいな話とPluginの紹介、デモなど。

文章のソース > Hi Interactive Blog – UI Design Kitと同じ内容。