デザインをさらに強化する2つのコード機能
Framerにはコードを書いて純正にはない機能や要素を追加することができます。コードコンポーネントとコードオーバーライドです。どちらもReactのコードを書き作成することができます。
<head>や<doby>にHTML, CSS, JavaScriptを書くカスタムコードとは別の機能です。
コードコンポーネント（Code Components）
Reactのコードでページ上の要素やパーツを作成できます。Framerの純正機能では実現が難しい複雑なインタラクションや動作をカスタマイズできます。
例えばCMSのページネーション、WebGL、プログレスバー、アイテムカウンター、動的なグラデーション背景、など。
コードオーバーライド（Code Overrides）
オーバーライドは名前の通り、機能を上書きするためのコード機能です。エディター上で作成した既存のデザインやパーツに対して、動作やプロパティを追加できます。見た目を維持したまま、ある特定の小さな機能を追加したい場合はこちらを使うことをオススメします。複数の要素に対して一括して同じ動作を割り当てることが可能です。
例えば、現在のリアルタイム時刻、カウントダウン、スクロールによるサイズやプロパティの変更、リロードするたびに設定されるランダムな背景色、シャッフルテキスト、テキストの縦書き、ネガティブマージン、スクロールブロック、など。
まとめ
コードコンポーネント
純正機能では実現できない動的な要素やパーツを作る。
コードオーバーライド
エディター上で作成したデザインに対して、現在時刻などの小さな機能を上書き・追加する。
他のノーコードツールと違って良い点は、Framerのコード機能ならプレビューですぐ確認できます。インターネットで検索すれば大抵の物は見つかりますし、ChatGPTに聞けばすぐ作成してくれます。
XなどのSNSや、インターネット上にコピペで使えるコンポーネントがたくさん配布されています。自分に合ったものを見つけるのも楽しいかもしれないですね。
←