こんにちは
島村竜一です。
ChatGPTがでてきていろいろなことが劇的に変わろうとしています。
知らないうちに気付いたら変わってきています。
とくにIT系のお仕事は様々な影響を受けています。
今回はWEBデザインをするには欠かせないFigmaについにhtml,CSSのプラグインがついにでたので記事にしました。
目次
AIにラクラクとホームページのデザインしたいならFigma+Locofy.aiが最高のわけ
ChatGPTがでてきていらいさまざまな便利なツール、サービスがでてきていますね「。
AIでホームページのデザインができたらいいなあなんて思ったりしませんか？
もちろんChatGPTにお願いすればホームページもできたりします。
また今なら
・create.xyz
・v0
・Uizard
・tldraw
・Visily
などAIを利用したUIデザインツールもとっても便利です。
これらを使うとプロンプトでホームページを作るだけでなく、
ラフデザインからホームページを作ることができます。
でも使ってみるとなかなか思ったようにホームページを作ることができません。。。
お客様とねごってFigmaでいい感じのモックアップができたのとお悩みのあなた？
そんなあなたにお勧めなのがFigma+Locofy.aiになります。
こちらのPluginを使うとFigmaで作ったモックアップから実装のソースコードをはきだすことができます。
ぜひ試してみてくださいね。
Figma+Locofy.aiの導入方法
導入といってもとっても簡単です。
下記のサイトでアカウントを作るだけになります。
https://www.locofy.ai/convert/figma-to-react
その後Figmaで作ったデザインからPlugins→Locofy Lightningを選びます。
Figmaから出力するサイトのデザインを選びます。
その後画面に従っていくと。。。。
htmlとCSSが出力されます。
お手軽でいいですね。
唯一の欠点が
Figma上ではソースの修正ができないこと。
なぜかソースのコピーもできない。
ソースをlocofy.aiに出力させることができるので
そこならソースのコピーをすることができます。
locofy.aiでもソースの修正ができないのが謎ですけど。。
まとめ：Figma+Locofy.aiならお客様の望んだデザインをおこすことができる
create.xyz、v0、Uizard、tldraw、VisilyなどAIができてきたことによりさまざまなプロンプトからAIを操りホームページを作ることができるサービスがリリースされています。
でもお客様とネゴったものとちょっとちがう。
いやプロンプトだとうまくいかない。
そんな悩みを抱えてしまいます。
その点Figmaで作ったものならばLocofy.aiでコード生成できるのでとってもお勧めです。
もちろん方向性がちがうので使い分けも大切ですね。
受託などでホームページを作る場合にはFigma、
自社サービスとして作るならcreate.xyzなどで作るという考え方もありかと思います。
ここまで読んでくださってありがとうございます。
また次のブログでお会いしましょう。
仕事の生産性をあげるためさまざまな方法を試しました。その結果UiPathにたどり着き現在UiPathを使った業務効率化の開発、講師の仕事をしています。
講師、開発などの相談はお問い合わせからお願いします。
