Open3
Framerの基本的な使い方。StudioみたいなノーコードWeb制作ツール
ゆうごFramerの基本情報
オランダ発のノーコードツール「Framer」
エディターがFigmaのようなUIで、サクサク軽快にWebサイトを構築することができる。
Web版とデスクトップアプリ版がある。
基本料金は無料。有料プランもあり、LPからコーポレートサイトまで作ることができる。
ゆうごエディター画面
実際にデザインを組んでいくメインのエディター画面がこちら。
UIは現代的ですごく見やすく、Figmaに近しいものを感じる。
細かな画面の紹介
エディターを構成しているのは以下の4つ
- キャンバス
- サイドパネル
- ツールバー
- ボトムバー
1) キャンバス
Figmaと同じようなキャンバス。中央にあるフレームが実際にWebサイトになるもの（いわゆるアートボード的なもの）で、ここに要素を配置していきデザインを組んでいく。フレーム外も画像やテキストなどを自由に配置できるので、デザインを並べて見比べることもできる。
2) サイドパネル
左パネル
ページ、レイヤー、アセット管理などに使うパネル。
右パネル
デザインやスタイルなどのプロパティを編集するパネル。
こちらを使うことがほとんど。
ゆうご書こうと思っていることリスト
- レイアウト
- フレーム
- スタック、グリッド
- サイズ
- ポジション
- テキスト、フォント
- プロパティ
- スタイル
- エフェクト（アニメーション）
- アセット
- 画像、動画
- プレビュー、公開
- オーバーレイ
- リンク
- iframe（YouTube）
- SVG
- CMS
- コンポーネント
- バリアブル
- バリアンツ
- Code Overrides（コードオーバーライド）
- Code Component（コードコンポーネント）
- プラグイン
機能というよりFramerのメリット
- ショートカットが豊富
- Studioとの比較
- コミュニティ
- アップデート情報
- Remix文化
- コードコンポーネント
- プロジェクト
- リンクの作り方
- キャンバスの自由配置
Tips系・小技・コンポーネント
- BGM付きボタンの作り方