おしゃれなPythonのデスクトップアプリを簡単に作成するには、GUIライブラリであるTkinterとProxlight Designerを利用するのがオススメです。本記事では、Proxlight Designerの入手方法と使い方について解説します。

【関連記事】Pythonではじめるアプリ開発
リンク
PythonでおしゃれなGUIを作るには?
PythonのGUIライブラリで、デファクトスタンダードといえばTkinterです。ただし、Tkinterはあまりモダンなデザインとは言えません。デザイン性を求めるのであれば、他のGUIライブラリを検討するのもよいでしょう。しかし、それらがよいデザイ性を持っているかと言われると微妙なところです。また、すでにTkinterの使い方をマスターした方にとって、僅かなデザインの差で他のGUIライブラリの使い方を習得するのは面倒に感じるかもしれません。そこで、Proxlight Designerというソフトウェアを活用することをおすすめします。

Proxlight Designer: https://proxlight.github.io/proxlightdesigner/
Proxlight Designerは、GUIを作成するためにFigmaを使います。Figmaとは、ブラウザ上で簡単にデザインができるサービスです。GUIライブラリはTkinterを利用するので、すでにTkinterの使い方をマスターしている方にとってはProxlight Designerを使わない手はありません!!
Proxlight Designerの入手方法
以下のURLからProxlight Designerのダウンロードページにアクセスできます。https://proxlightapps.gumroad.com/l/Proxlight-Designer
ダウンロードページの「公平な価格を設定してください:」の入力フォームに価格を入力します。 無料で試してみたい場合は、「0」と入力して[これが欲しいです!]ボタンをクリックします。
気に入った場合や、このプロジェクトに貢献したい場合は、後からでも支払いは可能です。

次に、Eメールアドレスを入力し[手に入れる]ボタンをクリックします。あとは、ページの指示に従ってセットアップファイル(MSI)をダウンロードするだけです。

最後に、ダウンロードしたセットアップファイル(MSI)をダブルクリックして表示される指示に従って、Proxlight Designerをインストールすれば完了です。

スポンサードリンク
Proxlight Designerの使い方
Proxlight Designerの使い方は非常にシンプルです。以下の公式動画を一度視聴すれば、概ね使い方を理解できると思います。動画の要点をまとめると以下の通りです。
① Figmaで新しいDesign Fileを開き、GUIをデザインする。
Figmaは以下のURLにアクセスし、アカウントを作成することで無料で利用できます。
Figma: https://www.figma.com/
② デザイン作業が終了したらShareリンクを取得し、Proxlight DesignerのFile URL欄に入力する。
③ FigmaのSettingからトークンを取得し、Proxlight DesignerのToken ID欄に入力する。
④ Proxlight DesignerのExport to欄をクリックしてPythonファイルを作成する場所を指定する。
⑤ Proxlight Designerの[Create]ボタンをクリックしてPythonファイルを作成する。
Figmaでデザインファイルを作る際のポイント
Proxlight Designerは、FigmaのデザインファイルをPythonのコードへ変換しています。つまり、デザインファイルを作る際にいくつかのポイント(ルール)があります。公式動画で述べられているFigmaでデザインファイル作る際のポイントは以下の点です。
・フレームの位置x, yを「0」に設定する。
・フレームに配置した画像要素は「bg」と名称を付けてグループ化する。
・テキストボックスウィジェットは「TexBox」と名称を付ける。
・ボタンウィジェットは「Button」と名称を付ける。
ウィジェットの配置は、Tkinterのplace()メソッドを使用しているので、「フレームの位置x, yを「0」に設定する」は特に重要です。これを忘れると、レイアウトが崩れるので注意してください。
Figmaは多くのUIキットやテンプレートが無料で公開されているので、それらを利用すると効果的です。
一例を以下に示します。是非、活用してみてください。
Card Components Free UI Kit for Figma
Fively Material UI Figma Kit
Grada - Free Figma UI Kit
おわりに
このブログで公開しているromoveやPsi4runは、Proxlight Designerを使って作成しています。Proxlight Designerを使う大きな利点は、デザインする際にFigmaを利用できる点だと思います。Pythonを使って、おしゃれでかっこいいGUIを作成したいと思っている方は、Proxlight Designerを試してみてはいかがでしょうか。
なお、Pythonでデスクトップアプリを作りたい場合は、ブログの連載記事「Pythonではじめるアプリ開発」を参照してみてください。また、書籍「Pythonではじめるデスクトップアプリ開発入門」では、さらに詳しいデスクトップアプリの開発方法を解説しています。興味がある方は、お手に取っていただければ幸いです!!
リンク
コメント
コメント一覧 (7)
ちなみにfigmaで設定した画面遷移などのプロトタイプをPythonコードに変換できますか?
そのままやっただけではダメ見たいで、色々模索中です!
色々アレンジできて楽しいですよね(*´ω`*)
画面遷移などの変換には対応していないようです。
GitHubにソースコードが公開されているので参照してみても面白いかもしれません。
なるほどです。
知り合いにサンプル見せたらおしゃれすぎて怪しいサイト作ってるのと勘違いされました笑
ありがとうございました!
コメントありがとうございます。
お役に立てれば幸甚です(*´ω`*)。
指定したディレクトリに下に「Proxlight_Designer_Export」が出来るのですが、
中身が空の状態です。
FigmaでTokenIDも作成し、FileURLの方も、リンクを知ってる全ユーザーに指定しているのに、
Proxlight Designerの方から、FigmaのTokenIDの方にアクセスしてないようです。
(Figmaの方のTokenIDが未使用の状態のまま)
2022年4月の記事なので、内容が古いという訳じゃ無いと思うのですが、
何か間違えてるなどお分かりでしたら、教えて頂けると幸いです。
よろしくお願いします。
管理人です。
念のため、最新の環境で公式動画の通り試してみましたが問題ありませんでした。
開発ページも確認しましたが、同様の問題は報告されてないようです。
少し特殊な例かもしれません。
例えば、ファイアウォールやウイルス対策ソフトなど通信上の問題かもしれません。
GitHubのissuesなどで詳しい状況を問い合わせてみると解決するかもしれません。
https://github.com/Proxlight/Proxlight-Designer-v2
お役に立てず申し訳ございません。
なにかわかりましたらこのページに最新の情報を更新致します。