Figmaに入門しようと思い、本を2冊読んでみたら、
便利なプラグインとかがあるようなので、
いろいろ調べてみたときの備忘録(*´ω｀*)
読んだのはこの2冊
調べ始めたら無限に便利なのがあってすごい。。(*´ω｀*)
Design Kit
- Material 3 Design Kit | Figma
- Material 2 Design Kit | Figma
- Nuxt UI | Figma
- User Flows & Annotation Kit | Figma
プラグイン
アイコン
- Material Symbols | Figma
- Googleのアイコンを利用できる。色や太さのカスタマイズも
- Iconify | Figma
- Material iconを含めた多くのアイコンを利用できる
フォント
- Japanese Font Picker | Figma
- 日本語対応のフォントを試しながら選べる
- Better Font Picker | Figma
- 同じくフォントを試しながら選べる
ダミー
- realistic-dummy-text-ja | Figma
- 本物っぽい日本語のダミーテキストを生成してくれる
- User Profile | Avatar | Figma
- プロフィール写真を利用できる
スタイル/コンポーネント
- Chroma Colors | Figma
- 選択中の要素の色を一括でスタイルに登録できる
- Text Styles Generator | Figma
- 選択中のテキストのプロパティを一括でスタイルに登録できる
- Typescales | Figma
- テキストのスタイル/タイポグラフィーのスケールを自動生成してくれる
- Styler | Figma
- 複数のスタイルを簡単に管理できる様になる
- Design System Organizer | Figma
- コンポーネント管理を簡単にしてくれる
カラー
- Image Palette | Figma
- 写真からカラーパレットを生成してくれる
- Color Kit | Figma
- 色のバリエーションを生成してくれる
- Dot Grid | Figma
- 大量のドットを生成してくれる
画像/イラスト
- Unsplash | Figma
- Unsplashにあるフリー写真素材の検索・挿入ができる
- Blush | Figma
- Blushにあるイラストの検索・挿入ができる
- Humaaans for Figma | Figma
- Humaaansにあるイラストの検索・挿入ができる
- Sketch Elements Brushes Set – Visual assets | Figma
- 手書き風のイラストが利用できる
- Colors to Code | Figma
- カラースタイルをコードに変換してくれる
- Color Style Guide | Figma
- スタイルガイドを生成してれる
モックアップ/デモ
画像編集/便利ツール
- Remove BG | Figma
- 画像の背景をAIが自動で切り抜いてくれる
- Insert Big Image | Figma
- 大きい画像を解像度そのままに読み込ませられる。通常は自動縮小される
- uiGradients | Figma
- いいかんじのグラデーションを生成してくれる
- SkewDat | Figma
- 図形やテキストを斜めにしてくれる
- Isometric | Figma
- 図形やテキストを斜めにしてくれる
- Image Tracer | Figma
- 画像をベクター化してくれる。色の変更などに便利
その他
- Autoflow | Figma
- データフローの矢印を自動的に描画してくれる
- Wireframe | Figma
- ワイヤフレームのテンプレを利用できる
- Contrast | Figma
- コントラストのチェックをしてくれる
- A11y - Color Contrast Checker | Figma
- コントラストのチェックをしてくれる
- Breakpoints | Figma
- レスポンシブデザインのプレビューができる
- QR Code Generator | Figma
- QRコードを生成してくれる
とりあえず、ざっと調べた範囲で。。
こんだけいろいろあると、さらに捗るね(´ω｀)
