Figmaのプラグイン

投稿日：2022/03/16

Figmaをいろいろ触る前に、有用なプラグインたちをいれておくといいと記事を見つけたのでプラグイン周りの覚書。

プラグインのインストールの仕方

プラグインはFigmaにログインしたあと、WordPressでいうダッシュボードのような画面の右上のプロフィールアイコンをクリックしたあと、「Plugins」をクリックする

まだなにもインストールしてない状態。

「Browse plugins in Community」をクリックする。

Figmaのプラグイン一覧が表示される。

インストールしたいプラグインの「Install」ボタンをクリックします。

今回は「Wireframe」にしてみた。

「Install plugin」ボタンをクリック。

インストール後はボタンが黒くなります。

ツールバーの「Figmaアイコン」-「Plugins」-「Wireframe」をクリック。

使いたいワイヤーフレームをデザイン画面にドラッグ

デザイン画面に選択したワイヤーフレームが追加され、レイヤーにはワイヤーフレームの情報が表示されました。

ワイヤーフレームのほかにもいろんなプラグインがあるので覚書も兼ねたブックマーク。

配色カラーパレットの作成

Geenes　…　カラーパレット、配色まわり。色のアクセシビリティチェックなどに。
Stark　…　コントラスト比のチェックとか作成した色を実際のウェブデザインに適用できる。

Redlines　…　デザインの寸法、使用などを測定できる。
Figma to HTML, CSS, React & more!　…　参考サイトのデザインをトレースすることができる。

A selection of Google Fonts　…　Googleフォントを選択できるようにするプラグイン。