Framerを使ってみる①
②があるのかわからないですが①です。
なぜころころと記事のツールを変えるのかと。みなさん一番興味あるのFigmaですよね。細かい使い方とか。
きっかけはなんとなくインスタみててこの投稿。これ、わかりますか。
３Dでグリグリ動くプロトタイプを作ってるんです。確かにFigmaってUIデザインをサクッと作るには最適なツールでアドビに買われたことを考えるとこれから数年は必須のツールになることは確実な気がする一方で使ってて結構プロトタイプは不便でコードで書いたほうが早いんじゃないかと思ったりもしました。
先日も下にスクロールしたときに縮んで上にスクロールしたら大きくなるヘッダーをFigmaで作ろうとしたんですがこれスクロールがトリガーにない（2023年12月現在）ので作れない！作れないですよね？Figmaマスター各位。（勉強不足だったらごめんなさい）かなり頻出な表現だと思うんですがこれは不便。
先日のスプラインなんかも興奮気味に触ってみましたがどうなんでしょう。提案の際はせっかくの３Dなのに結局いい感じの角度で書き出してパワポに貼って見てくださいよってスマートじゃないですね。
このフレーマーはいわゆるノーコードのプロトタイプツールとのことで学習コストはそれなりにありそうですがデザインを作るのはFigmaで行ってフレーマーにペーストできるみたいです。
UIをFigmaでつくる
３Dをスプラインで作る
１，２の素材をフレーマーにペーストしてパブリッシュを押す
これだけでブラウザで動く3D表現を含んだサイトのプロトタイプを吐き出せるってことのようです。
これは非常に魅力的ですね。
他にもPCとスマホのデザインを同じコードでリアルタイムにレスポンシブできたりするようです。
↑これライブラリにあったデモページなのですがこれ触って見てもらってわかると思うのですがデザインモックというよりほぼWEBサイトですよね。
まだ日本語の情報が少ないっていういのと学習コストが高いっていうのと普及するかわからないっていうのがあるのでFramerに極力学習コスト割かずFigmaからペーストしてプロトタイプだけ使うって感じの使い方でなにか作れないかやってみたいと思います。
次回にFigma＋Spline＋Framerという気になるきっかけになった組み合わせでごく簡単なサイトを作ってみたいと思います。
今回は短いですが以上