ワイヤーフレーム上でフリーアイコンを使用する

Prottは Iconfinderと連携しています。Iconfinder内でフリーで提供されているアイコンを自由にワイヤーフレーム上へ挿入できます。


アイコンをワイヤーフレーム上に挿入する

  1. ワイヤーフレーム編集画面の左側のパネルの画像アイコンをクリックします。
  2. 「▼アイコン」タブにデフォルトのアイコンが表示されます。
  3. 任意のアイコンをドラッグ&ドロップしてワイヤーフレームへ挿入できます。
これまでアップロードした画像が表示されていたところは、アイコンタブ上にある「▶︎画像」タブをクリックすると、これまでどおりに表示されます。

アイコンを検索する

デフォルトで表示されるアイコン以外にも、検索ボックスより探したいアイコンの単語を入力して検索してください。

Iconfinderは海外のサービスですので、検索に使用できる文字は「 半角英数字」のみです。
日本語ではなく英語で検索してください。

例)「矢 → arrow」「 123 → 123」「ハンバーガー → hamburger」

お探しのアイコンの英語名表記がわからない場合は Font Awesome のようなサービスから検索いただくと見つかりやすいのでおすすめです!

アイコンを編集する

Iconfinderと連携しているアイコンは画像として表示されているため、色変更などの編集はできません。 

アイコンのサイズは、選択した状態で枠線をドラッグすると拡大縮小できます。
そのままドラッグすると、縦横の比率が変わってしまうので、同じ比率で拡大縮小したい場合は「Shift」を押下しながら、ドラッグしてください。


アイコンを保存する

検索して見つけたアイコンは、右クリックしコンポーネント化して登録することで、検索せずすぐに利用できます。

また、アイコンをセットにしてコンポーネント化しておくと、他のプロジェクトやスクリーンの共用部にそのまま配置できるのでオススメです。

もし解決しない場合 お問い合わせ お問い合わせ