目次
目次
このドキュメントは、Framerを学ぶ日本国内のユーザーが日本語資料の不足で経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加しました。Framerを使用している皆様に少しでもお役に立てることを願っています。
アイコンとは？
アイコン（Icon）は意味を視覚的に表現した小さなグラフィックシンボルです。
主にボタン、メニュー、情報表示などで使用され、テキストなしでもユーザーに機能や内容を直感的に伝えることができるため、UIの単純化とユーザビリティの向上に良い影響を与えることがあります。
基本アイコンセットの追加
FramerはPhosphor、Feather、Hero、Iconoir、Twemojiなどのベクターアイコンセットを基本的にサポートしています。
[+]Insert→Iconsを選択好きなアイコンをキャンバスにドラッグ（クリック）
右のプロパティパネルで
Iconをクリック開いたアイコンパネルで好きなアイコンをクリックして加工
プラグインでアイコンを追加
Framer Marketplaceにあるアイコン関連のプラグイン(Phosphor、Bootstrap Icons、Logofyなど)をインストールしてアイコンの種類を追加できます。
マーケットプレイスをクリック
上部メニューの
Pluginsボタンをクリック好きなアイコンセットを検索
Open Pluginボタンをクリックアイコンプラグインを追加するページを選択
アイコンパネルで好きなアイコンをクリックして加工
Note : ページ下部のフローティングバーでPluginsを選択し、好きなアイコンプラグインを検索して実行すると、そのページで直接アイコンパネルを開けます。（プラグインの詳細内容は確認できません）
SVGアイコンファイルの直接インポート
SVGファイルをキャンバスに直接ドラッグ＆ドロップするか、SVGファイルを（macOS: ⌘+C,⌘+V Windows: Ctrl+C,Ctrl+V）で貼り付けると、Framerで好きなSVGファイルをアイコンとして使用することができます。Note : ロゴやカスタムアイコンを直接挿入して使用する場合に便利な方法です。
この記事はFramer公式ブログの‘How to add icons’を翻訳・翻案したコンテンツです。
