目次
目次
アイコンとは？
アイコン（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’を翻訳・翻案したコンテンツです。
