これらのツール自体は以前からあったもの。動作確認してメモを作ろうと考え、手始めに情報源となるURLをまとめた。この後は動作確認して、Qiita当たりに使い方のメモを投稿する予定。
以下の情報源の中では、ツールの使い方を知りたい人に最もお勧めなのは、文章のソース > Hi Interactive Blog > How to change the look and feel of an app using Figma。
Table of Contents
そもそも何？
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のセットを出力する、上記デザインツール向けのプラグイン。
配布場所
- OutSystems UI Design Kit：「Design Kits」の下に各デザインツール向けのリンクがある
- OutSystems UI Plugin：「OutSystems UI Plugins」の下に各デザインツール向けのリンクがある
文章のソース
ForumでのAnnouncement（2022年）
OutSystems design to code plugins update | Sketch, Figma and Adobe XD
OSDC 2021での発表後、Adobe XD向けのDesign Kitも追加されたことを紹介するAnnouncementの投稿。
埋め込まれている動画はリンク切れになっているが、おそらく公開場所が移動しただけ。動画のソース > OSDC 2021での発表を参照。
Hi Interactive Blog
UI Design Kit（2022年）
Design KitとDesign Systemsの違い（どちらもOutSystemsというよりは、より一般的なアプリケーションのデザインで使われる用語らしい）について。
Design Kitとは何か？というような情報も含まれるが、特に読まなくてもよさそう。
How to change the look and feel of an app using Figma（2023年）
デザインツールの中でもFigmaを例に、用途、Design KitとPluginの使い方を順番に説明している。今回のソースの中では最もまとまっている。
動画のソース
OSDC 2021での発表
最初の18分くらいは、UIデザインの重要みたいな一般論を話しているので飛ばしてよいと思う。デモ有。ただ、字幕がつかない英語の動画なので、ちょっと厳しいかもしれない。
YouTube
OutSystems UI Plugins – Hi Masterclass #13
Pluginをつくのにあたって、どういう技術的困難があって、どう解決したか、みたいな話とPluginの紹介、デモなど。
UI Design Kit – Hi Masterclass #14
文章のソース > Hi Interactive Blog – UI Design Kitと同じ内容。