Framerのインターフェース
Framerは、Figmaなどの一般的なデザインツールと同様の直感的なインターフェースを採用しています。
左:ページ切り替えやレイヤー表示など
中央:作業スペース
右:選択した要素の設定

探しているものがどこにあるのか迷った時は、クイックアクションショートカット(Mac: Command + K
/ Windows: Control + K
)を押して検索してみましょう。必要な機能やコマンドに素早くアクセスできます。

トップツールバー
主要機能へのアクセスは上部にあります。

Framerロゴボタン(環境設定など)
挿入
レイアウト
テキスト
CMS
プラグイン
コラボレーター
言語設定
設定
プレビュー
招待
公開
左サイドバー
ページ切り替えやレイヤー表示、アセット管理を行う場所です。

ページパネル
レイヤーパネル
アセットパネル
右サイドバー(プロパティパネル)
選択した要素の詳細設定を行う場所です。
最初に気づきにくい箇所としては以下があります。
「+」ボタンをクリックし各セクションの設定を追加
例えばZ Indexなど使う頻度が高くない設定は+にしまわれています。右クリックでメニューを出す
設定のコピー&ペーストも可能です。塗り、シャドウ、アニメーションなどの複雑な設定も簡単に別の要素に適用できます

キャンバス
実際のデザインや要素の配置、編集を行う作業スペースです。
公開されるWebサイトの枠外にも自由に要素を配置でき、保留中のデザインを隣に置いたり、画像作りなどにも使うことができます。

キャンバスツール
コメントしたりモードを切り替えたりする操作用のツールバーです。

パンツール(スペースバーで一時的に切り替え)
コメントツール
ダーク/ライトモード切り替え
言語モード切り替え
ズームコントロール
デスクトップアプリ
Framerはブラウザでもデスクトップアプリでも利用できます。パフォーマンスは両者でほぼ同等ですので好みに合わせて使うことができます。デスクトップアプリのみ、画像やSVGのエクスポート(書き出し)機能があります。
ダウンロードはこちら
←