最近は、Figmaを利用して画面遷移図等を作成しています。
Figma: The Collaborative Interface Design Tool
ほんと直感的に使え個人利用であれば無料なので使わない手はないです。
パターンの複製も簡単にできるので、想像力を働かせるにも持ってこいです。
基本機能だけで充分利用できるのですが、プラグインの仕組みがあるので機能拡張も簡単に行えます。
そんなプラグインで、私がよく利用しているプラグインを紹介したいと思います。
目次
Find and Replace(文字列検索と置換)
テキストの検索、一括置換が簡単に行えるプラグインです。
↓の形で、指示をテキストで書いたりします。
このメモが基本機能では検索ができません。一括置換したい場合も不便です。
こちらのプラグインを入れると、メニューのプラグインから、Find and Replaceを起動し、検索したい文字列を入れると、色々なところにあるメモから文字列を検索してくれます。
以下は、disabledを検索している例です。2つ見つけてくれています。置換もReplace Allすれば一括置換できます。
テキストを使う人は入れておいて損はありません。
Autoflow(オブジェクト間のコネクターを簡単に設定する)
こちらは、オブジェクトとオブジェクトを選択すると、接続線を簡単に引いてくれるプラグインです。
プラグインを起動して、2つのオブジェクトをshiftキー押しながら選択すると線を引いてくれます。
コネクタの形は、以下から変更可能です。
始点・終点の形や線の太さ等を変えることができます。
Autoflowなしではもう2つのオブジェクトのつなぎこみはできません。
Remove BG(画像の背景を取り除く)
こちらは、簡単に画像の背景を取り除けるツールになります。
こちらのツールは、remove.bgのAPIを利用するため、remove.bgのアカウントを作成する必要があります。
左の画像を右の画像に簡単に変更することができます。
remove.bgで取得したAPI KeyをプラグインのSet API Keyのところにセットすれば利用できるようになります。
HTML to Figma(URL入力でサイトをまるっと取り込む)
こちらの最強ツールだと思います。
今までは、実際のhtmlを表示してスクショして、加工を行っていましたが、このプラグインがあれば
URLを入れるだけで、デザインの取り込みを行ってくれます。
そして1つ１つの要素が変更することができます。
公開サイトのデザイン変更を考える場合は、このツール最強です。
取り込み時に、PC/タブレット/SPが選択できるので、切り替えてデザインを取り込むことができます。
もう感激します。
Figdoc
Figmaを仕様書として利用する際に、メモを記載しますが、矩形エリアを作成して、その上にテキストメモを貼り付ける形で行っていました。
わかりやすく見出しをつけることができ、メモ書きもAutoLayoutで作成できるこのプラグインはおすすめです。
このようなメモ欄がワンクリックで作成できます。
見やすい形なので大変便利です。
番外編
スクショとか画像とかをバンバン大きいサイズのままFigmaに投げ込んでいくと重くなります。
私は、基本、スクショや画像は、Squooshで圧縮してから貼り付けるようにしています。
これは、WordPressでのメディアアップロード前にも利用しています。
こちらのツールで、画像自体の圧縮と画像のサイズ変更も行えます。
(5000pxとかのファイルってほんとWeb表示では不要)
使えるプラグインに遭遇したら随時更新していきたいと思います。
Figmaさん感謝感謝。
いつか、プラグインの作成にも挑戦したいと思います。