便利なGUIアプリケーションを作りたいなと思ってElectronとかRust-icedとかフレームワークを検討してみたことはあるが、結局GUIを整えるためにコードを何行も書くことがめんどくさいということに気づいた。
C#でアプリケーションを作るときのお手軽さぐらいでないとと思った。
C# で Windows フォーム アプリを作成する - Visual Studio (Windows) | Microsoft Learn
そこでデザインの要素を置いたらHTMLを生成してくれるようなものはないかと探した結果、
Adobe XDというものとFigma+pluginというものがあるらしい。
(ほかにもいろいろとあったが全然わからない)
Adobe XD ラーニングとサポート
Figma: コラボレーションインターフェイスデザインツール。
どうせAdobeは有料なので、Figmaの無料枠でおためしを行った。
(と思ったらFigmaはAdobeに買収されていたらしい)
デザインをする
とりあえずYoutubeの動画などをみて画面をボタンがあるだけのデザインを描いてみた。
出力
Figma to HTMLとかいうものでReact向けに出力してみる。
React向けに出力して、Sandboxで表示してくれると思ったが、
なぜかSandboxが動いてくれなかったので、zipでソースコードをダウンロードする方向にした
表示
npmかyarnで依存ライブラリをインストールするといつも通り
yarn start npm start
などで見れるようになる。
が青いボタン(予定)部分がない?
ほかのプラグインも試したが、
生成されたHTMLで表示される見た目が完全に同じにならなかったり、
無料プラグインでは生成されたHTMLコードがコピーできなかったりなど。
結論
デザインをいじりながら思っていたのは、C#のGUIエディターのようなものをイメージしていたので、
デザインに対して、buttonタグを指定したり、文字のところにpタグを指定したりとかそこまでのものかと思ったら本当にデザインだけをするツールだった。
実社会では、このデザインをする人と、この完成したデザインを見ながら、それと同じ見た目のHTMLやCSSを書く別の人がいるのだと理解した。(同じ人でもいいが)
個人レベルでは、適当にインターネットからReactアプリのテンプレートコードをコピーして改造してきたほうが楽だったし、まだデザインにそこまで拘っていないので、ChatGPTに適当に聞けばそれなりのものが書ける気がすると感じた。
9+ Free React Templates - Material UI
figma違い...
