Framerをやってみる

デザインツールやプロトタイピングツール、そういったものをこれまで使ったことがなかった。
そういうものがないままサイトを作ると結局どうなるのかというと、サイトに関するメモ書きが膨れることになる。消化不良になり、どうにも良くない。なのでこれを機会に触ってみよう。Reactを使っているので、Framerをやってみることに。

framerというのは組み立てる人、立案者という意味があるらしい。
それとwebの中でのフレームを掛けている感じかな。

Framerにはweb版とデスクトップ版があるらしい。
デスクトップ版は今のところ有料なので、とりあえずはweb版ということになる。

適当にごちゃごちゃやってるうちにロゴを入れることができた。svgもドラッグアンドドロップで入れられるのはありがたい。特になんも考えなくても使えそうなのは良い。

次の流れを繰り返せば良さそう。
Frameを適当に入れる→コンポーネントを選ぶ
コンポーネントな以下のリンクから貼り付けするのが楽そう。
https://www.framer.com/components/

<li><ul>とかの箇条書きをどうすればいいのかわからないな

Features Listをいじることにした

こんな感じになった。

バレットの位置がちょっと上めなのが気になる。少し下げたいけど設定できるのかな

スタックの中にアイコンを入れると良さそう

コードコンポーネントにて、既存のCSSをFramerのstyleに変えるには以下のツールが良さそう。もっと良いのがあるかも。
https://casbin.org/CssToAndFromReact/