🦄

Framer + RemixでWebサイトをつくる #1 - やることきめてFramerの準備する

2 min read

これはAdvent Calender 2021 #Framer 1日目の記事です。

1日目 - やることきめてFramerの準備まで

目的

「Framer + RemixでWebサイトをつくる」ととりあえず思いつきではじめてみます。
作るWebサイトは毎週開催しているもくもく会「Kamakura MokMok Hack」のサイト。

とりあえず時間あまりないので記事もサイトも雑になりますがご容赦あれ。
そしてFramerに至っては初歩的なところもあるのでご容赦あれ。

今回アドベントカレンダーでやること

今回アドベントカレンダーでやることは以下。

  • サイトデザインと各種Basic Component(AtomicでいうAtoms, Molecules)はFramerでつくる
  • ルーティングはRemixを使う
  • ViewはRemixなのでReact Component
  • Gateway層設けてConnpass情報はAPIか静的jsonかでRemixのloader関数にぶん投げる
  • RemixのPage ComponentにFramerのSmart ComponentをHandshake機能を使いURL importしpropsで渡す
    • またはContainer的なComponent設けてpropsで渡す
  • vercelかどっかにdeployする
  • 所感をまとめる

余裕があればやる

  • Framer以外でつくるReact ComponentをFramerに逆importする
    • bitで共有してFramerのCode ComponentでURL importする



ざっくり要件定義

別になくてもいいけど一応まとめておく。必要なら追記してく。

開発・デザイン

用語集

概念名 Name 説明
Association もくもく会「Kamakura MokMok Hack」を主催・運営する「Kamakura Dev」のこと
イベント Event もくもく会「Kamakura MokMok Hack」や関連するイベントのこと
目的 Purpose 会の目的のこと
雰囲気 Vibes 会の雰囲気、どんな人が参加して、どんなことやっているのかのこと
参加 Entry イベントへの参加のこと
直近 RecentEvent 翌週・今週のイベントのこと

サイトのOutline

  • 紹介
    • 会の目的
    • 会の雰囲気・やってること
    • 会のルール
    • 参加方法
  • イベント
    • 直近のイベント

んな感じかな。とりあえずここまでやる。無理はしない。その後にイベントの記録とか自己紹介記載できるようにとかすると思うような思わないような…。


Framerを準備する

まずはプロジェクトをつくりましょー

とりあえずiPhone 12サイズでScreenをつくりしょー
※FramerのScreenはFigmaでいうFrameと同じです。

Screenサイズは後で変えられますが、各コンポーネントのサイズを Relative にしておかないと横幅( Width )は固定サイズになるので注意しましょー。詳しくは次回へ。

Discussion

ログインするとコメントできます