ノーコードツール「Framer」を触り始めたのでつまづいた所を書きためる

なれそめ

• 作ったけどクライアントに提出すらならなかったデザインラフの供養

• Studioに対してちょっとなぁと思う所があった
  無限ループのカルーセルカクカクしたり、あと用意されてる以外のアニメーションしたいな、と思った時にiframeでCSS入れたりするのが、個人的にはギギギってなってた

• Framerはページ読み込みが早いって聞いてた

• 新しいツール触りたさ

つまづきポイントはこちら

英語

英語が良いところもあれば悪いところも。
UIの項目名なんかは大概CSSのプロパティ名なのでじっくり読めばわかる。
それが英語やからパッと自分に入ってこず、スライダーの矢印ボタンを自作のものに変えるのに、あるんか？どこやどこやと小一時間彷徨った。
→じっくり読め、大概設定あるから。
→操作をchatGPTに聞いたんもあかんかった。無い設定とかゆうてきよる

なんか勝手に色々補完してる？

Fit contentにしてた高さとかがチョロチョロいじっているうちにFixedとかになって、はみ出た部分がoverflow:hiddenで切れて見えなくなったり。
→操作に慣れろ、チョロチョロすな

Figmaからの貼り付け

一回め、Figmaのアートボードまるっとプラグインでコピーして貼り付けたらびっくりそのまんまのデザイン貼り付けれたの！
乗算とかの効果もそのまま！！しかもコピー時間も早くてスムーズ。
けど私がラフだからってレイヤー整理してなかったせいもありぐちゃぐちゃレイヤーがたくさん量産され、位置はabsoluteで配置されてしまう羽目に。
→ちゃんとFramer側で階層を作って、パーツをコピーして持ってきて対応。

バリアントを使ったアニメーション

これも私が悪い。
重なった画像を動かすアニメ用のバリアント作成時、なんかFigmaから画像貼り付けたり、Framer側で画像を読んだりしたのが悪かった。
画像のTypeの設定がFillだらStretchになってたりで、その影響かバリアント単体でのプレビューでは問題なかったのにページをプレビューしたら2枚めの画像がアニメーションと共にでかなったりしてつまづいた。primaryのバリアントがぐちゃぐちゃやったらそらあかんよな。

Studioとの違いで良いなって思った点

Figmaのインポートがほんまにそのまんま

StudioやったらFigma貼り付けで乗算読み込まんかったり、absolute系で配置したい要素とかがどっか違う位置にいっちゃったり（レイヤー整理しとらんかったからかも）
多分何も気にせぇへん人やったらFramerにぺったんしたらそのまま公開できる

アニメーションの自由度

これは・・・操作になれたら作れる表現の幅広がるなって思った。
今回作ったバリアントのアニメーションもFigmaのLottieプラグインみたいにコマ取りアニメ方式で作るの納得がいったし楽しかった

Studioの方がいいなって思った点

日本語

そうよJapanに住んでるのよ、歌は英語の方が好きだけれど日本が好きなの
クライアントさんが頻繁に触るんやったらそらこっちかなぁと思う
知名度もあるしなぁ

ヘルプ・サポート

Studioでわからないことは大体検索したらでてくるし、それは日本語で書いてあって分かりやすい
Framerは大体英語圏の皆様が使用なされているので、何調べるにも英語。
翻訳かけたら読めるけど、手間はかかる。

Framerすっきゃ

いい歳こいた大人が好き嫌いで判断すんなとか思うけど、アニメーションの部分とか簡単に、しかも細かく設定できることが多くてすごくいいなと思った！とりあえず今は英語と操作慣れやね。がんばる。
いつか日本語化したりするのかな、覇権とってほしい