Figma to STUDIOって？
Figma
ブラウザ上で使えるデザインツール。
UIデザインやワイヤーフレームを作成するのに、広く使われている。
STUDIO
ノーコードでWEBサイトが作れるツール。
Figma to STUDIOとは、Figmaでデザインしたものをコピーして、
STUDIOでペーストすると一発でWEBサイトが作れちゃうという
とんでもないツール！！なのだ！！
インスタで投稿してる人を見かけて、えー！今はそんなことができるのねぇぇぇ！
ってなって試してみたくなったといういきさつ。
私は、illustratorを愛しすぎているので、もっぱらデザインはイラレ。
そう。ワイヤー作るのも、イラレ。
そろそろ時代について行った方がいいのかなって。
そしてノーコードでWEBサイトが作れるツールって結構色々あるじゃん。
wixとか。
でもやっぱり、コードが触れる身からすると、ちょっと使いづらい。
ので、STUDIOからも遠ざかっていたけれど。
なんかコピペだけで作れるっていうから。
なんならレスポンシブ対応までしてくれるって噂だから。
※Figma to STUDIOを使うには、どちらもアカウントを作成後、
下記ページの「使ってみる」ボタンをクリックして使えるようにしてね。https://www.figma.com/community/plugin/1274345780965443906/figma-to-studio
Figmaの使いごごち
全然使いこなせてはいないけど、
触ったことなくてもデザインはできる。全然説明みなくても、なんとなく使える。
すごい。
多分、何らかのデザインツールを使ったことがある人なら、さくさく～っと使えるなーという印象。
さすがNo1シェア。
何がいいかというと、まずブラウザで使えるということ。どんな環境でも使えるっていい！
それから、配置したもののサイズが一発でわかる。
これは組むときにやりやすいし、WEBでプレビューがすぐにできるから、確認も簡単。
あとは、複数人で作成するときに共有しやすいっていうのが売りみたい。
ただし、その場でイラストを作って～っとかがイラレのように簡単にできないから
そこは今のとこイラレの方が使いやすいかな。
チャットGPT（通称チャッピー先生）に作ってもらった、ドーナツ屋さんのサイトの原稿をもとに
テキトーにデザインを作成。
画像もチャッピー先生に作成してもらいました。
すごいヘルシーを売りにしてるんだけど、見た目はとってもカロリーお化けっぽいドーナツとなっております。
いざSTUDIOへ！
Figmaでコピーしたいデザインのフレームを選択して、
「リソース」の「プラグイン」からFigma to STUDIOを選択。
で、選択しますとこんな感じに↓
クリップボードにコピーをクリックすると…
何度やってもエラーを起こす。
なんでやねーん！！
せっかく一生懸命慣れないFigmaでデザイン作ったのにー！！！！
って思って調べてみると、画像が重かったりするとコピーできないことがあるみたい。
ということで、今回は画像を全部ブランクにして再度挑戦。
こんな感じでね。
すると！！サクッとコピー完了！ものの1秒！
あとはSTUDIOに行って、ペタッと張り付けるだけ。
「+新しいプロジェクト」から、「空白から始める」を選択して適当なプロジェクト名を付けて作成。
開かれたエディタにctrl＋vでペーストすると、「デザインをインポート」と出てくるのでクリック。
とっても簡単だね…
エディタに張り付けてみると
え？
なんか思ってたんと違う…
やっぱり理想と現実は違うの…？？
ってなったけど、
ライブプレビューモードでブラウザで見たら、きちんと表示されてるー！
すんごー！
あとはここに画像を反映させて、リンクとかを入れて…
なんだけど、やっぱりSTUDIOはノー説明だとさすがに分からなかった。
いや、できる人はできるのかな…
スクロールされたら表示される、みたいな
動きを付けるのもボタン一つでできるので
慣れたらすごい簡単なのかも。
この辺は、CSSをいじれるひとなら感覚で設定できそう。
イージングも、どんな風にイーズされるのかが動きで見れるようになってる。
ただし、STUDIOを使えば
コードが分からない人でも感覚ですごいサクサクページを作れるか？っていうと
そうでもない気がする。
もちろん、いちから組むより絶対簡単なんだけど。
さてさて、気になっていたレスポンシブはと…
うん、全然できてないね。
だれ？レスポンシブまで勝手にやってくれるって言った人。
これは、Figmaでのデザインの仕方が悪いのかな。
だな。きっとそうに違いない。
もう少しちゃんと勉強したら
いい感じにさくっと超簡単にサイトが作れる気がする。
結論。どちらも全然使ったことなくても、Figma to STUDIOでWEBサイトが作れた。
だけど、おそらく作り方によっては、レスポンシブまではうまくいかない。
ある程度のWEBサイトをFigma to STUDIOで作って、細かい動きや設定、レスポンシブ対応などはあとから追加する感じかな。
今後に期待。
それにしても、
もう本当にコード書かなくてもさくっと簡単にWEBサイトが作れてしまうよね。
ノーコードのサイトって、SEO的にはどうなんだろう…？
いろいろなことが効率的に、簡単にできるようになることは素晴らしい。
遅れないように、常に勉強を頑張らないとなーっと思った今日この頃でした。
Figma使いこなせるようにがんばろ。