figma

Figmaのプラグイン

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

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

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

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

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

Figmaのプラグインページ

https://www.figma.com/community/plugins

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

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

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

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

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

インストール完了

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

実際につかってみる

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

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

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

Figmaのプラグインブックマーク

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

アクセシビリティ

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

Geenes … カラーパレット、配色まわり。色のアクセシビリティチェックなどに。

Stark … コントラスト比のチェックとか作成した色を実際のウェブデザインに適用できる。

デザインまわり

Redlines … デザインの寸法、使用などを測定できる。

Figma to HTML, CSS, React & more! … 参考サイトのデザインをトレースすることができる。

Basic Patterns for backgrounds … シンプルでベーシックなパターンのコレクション

Split Shape … 図形を分割することができる。

写真・イラスト素材

Unsplash … 無料で利用できる高解像度写真

Image Tracer … 画像をベクター化する

デザイン素材・あしらい素材

Blobs … 不規則な形を自動生成。

アイコンまわり

Iconify … 複数のアイコンを集めたプラグイン。

フォントまわり

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

Japanese Font Picker … 日本語対応のフォントを探せる

 

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
gifteeを贈る / コーヒーをおごる / mail

1

outlookを最小化すると勝手に終了してしまう outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になって ...

2

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 素敵なフォロー、フォロワー、創作作家さんに作品の感想を送りたい…!が、語彙力がないという方向けの感想メーカ ...

-figma