Documentation about figma plug-ins

Slides used for the presentation.
2022/09/20

Transcript

1. Figmaのプラグインを 色んな視点から深掘りしてみた。 Figmaのプラグインを 色んな視点から深掘りしてみた。 1 Title Contents 自己紹介 Figmaにあるプラグインについて プラグインは「目的」とセット！ 作業フローとプラグイン
2. 自己紹介 2 平林 竜一 ひらばやし りゅういち 22年度入社 CXDG　デザイナー 業務内容：クライアント事業や自社サービスのクリエイティブ作成 （LP、アプリ開発、バナー、チラシなど...） プロトタイプツール歴 2019〜21まで インターン先で主に利用。簡単な ワイヤーを組んだり、アプリや サイトのデザインをする。 入社後は大半の業務をFigmaで こなす。チームでコミュニケー ションがとりやすいという印象。 2022 4月〜今現在（これからも...？） ◁なぜFigmaがいいのか？
3. Figmaにあるプラグインについて 3 デザイナー
4. 4 デザインの管理を上手にしたい！ グラフィック処理を上手にしたい！ アニメーションをつくり込みたい！ データを楽に置き換えたい！ チーム間の共通認識を高めたい！ Figmaにあるプラグ インについて Breakpoints Breakpoints Croma Color Croma Color Design System Organizer Design System Organizer Master Master Snap to Grid Snap to Grid CopyDoc Text Kit CopyDoc Text Kit Instance Finder Instance Finder Detach Component Detach Component Instance Finder Instance Finder Wire Box Wire Box Figma to Code Figma to Code Emailify HTML Email Builder Emailify HTML Email Builder Convertify to Sketch/XD/AE/EPS Convertify to Sketch/XD/AE/EPS Similayer Similayer Bannerify Banner Studio Bannerify Banner Studio Figmotion Figmotion Motion - UI and Games animation Motion - UI and Games animation Flowkit Flowkit Redlines Redlines Commentful Feed back Work flow Commentful Feed back Work flow Image tracer Image tracer TinyImage Compressor TinyImage Compressor Stark Stark Filter / effects Filter / effects Favvy Favicon Exporter Favvy Favicon Exporter さまざまなニー ズに 答えてく れるプラグ インた ち...
5. 5 デザインシステムの管理・移行 Design System Organizer Design System Organizer 利用シーン 利用シーン 使い方 使い方 機能 機能 他のファイルで同じスタイルを 引き継ぎたい。 ih プラグ インを起動 2. 任意のコンポーネント、スタイルを選択 3. 整理、リネーム、分類、移動、エクスポートなどを行う ・コンポーネント、スタイルの整理、リネーム、分類、 　 移動、エクスポート。 ・編集メニューの中で変更を加えたものはリア ルタイム 　 で反映される スタイルの情報をローカルデータ にも保存しておきたい。 デザインシステムを編集しやすく したい。 ▷チュートリア ル
6. 6 デザインパーツの更新・アタッチの効率を改善 Master Master 利用シーン 利用シーン 使い方 使い方 機能 機能 コンポーネントの置き換えを楽 にしたいとき。 ed プラグ インを起動 2. コンポーネントまたはオブジェクトを選択 3. Masterのメニューからデータにかけたい効果を選択 3. 選択したオブジェクトがインスタンスとなる ・ コンポーネントを作成 ・ コンポーネントのクローンを作成した後で 　 アタッチが可能 ・ 新しいファイルに移動してもリンク切れを一度に 　 修復できる 類似のコンポーネントを一つに統一 したい。 リンク切れしたコンポーネントなどを まとめて更新したい。 ▷チュートリア ル
7. 7 ヒューマンエラーを防ぐ、または効率化 Design Lint Design Lint 利用シーン 利用シーン 使い方 使い方 機能 機能 スタイルの当て忘れを防止したい。 ba プラグ インを起動 2. フレームを選択 3. スタイルを当てていないものがあれば、選択することで 　 場所、情報を詳細に教えてくれる ・ デザインに欠けているスタイルを見つける ・ エラーはリスト表示、カテゴリー別表示の２つの表示 　 方法がある ・ 特殊なレイヤーや固有のレイヤーを無視する機能があり、 　 レイヤー内の各スタイルに対して使える。 未登録のスタイルを探したいが、時間がかかり すぎるので、効率化させたい。 ▷チュートリア ル動画
8. 8 ダイレクトなフィードバック Commentful Feedback Workflow Commentful Feedback Workflow 利用シーン 利用シーン 使い方 使い方 機能 機能 SlackやBacklog上のようなコミュニケーション をFigma内でも行いたい。 †… プラグ インを起動 2. FigmaのAPIトークンを発行する 3. コメント、フィードバック等を行う ・ 自分に割り当てられたすべての ToDoを確認できる。 ・ Figmaファイル以外の外部デザイン・フィードバックを 　 収集できます 。 ・ Figma のコメント、TODO、外部からのフィードバック をスプレッドシートにエクスポートできる。 外部のステークホルダーとデザインデータ上で 直接やり取りしたい。 ▷チュート リアル動 画
9. 9 レスポンシブデザインを検討したい Breakpoints Breakpoints 利用シーン 利用シーン 使い方 使い方 機能 機能 さまざまなデバイスに対応したデザイン （レスポンシブデザイン）を検討したい rq プラグ インを起動 2. 既存のキャンバスに新しいポイントやスナップレンジを 　 追加し、サイズを変更すると切り替わるライブプレビュー 　 フレームを取得する。 3. Figmaアニメーションプロトタイプを作成。 ・ フレーム内でレスポンシブレイアウトを作成 ・ レスポンシブレイアウトをアニメーション・プロトとして 　 共有可能 どのようなサイズで変化し、どのようなレイアウトに 切り替わるのかをガイドとして表現したい。 ▷チュートリア ル動画
10. 1 0 業務フローからみたプラグ イン 要件定義、ワイヤーフレーム Flowkit Flowkit Wire Box Wire Box Snap to Grid Snap to Grid Breakpoints Breakpoints カラー、フォント選定、パーツ等の作成。 並行してスタイルを作成 Croma Color Croma Color Master Master Redlines Redlines Contrast Contrast デザインシステムをまとめる Design System Organizer Design System Organizer 実装時のデザイン調整 Figma Walker Figma Walker Design Lint Design Lint Figmotion Figmotion Commentful Feedback Workflow Commentful Feedback Workflow Link Card Link Card 改修、デザインの引き継ぎ Master Master Design Lint Design Lint Instance Finder Instance Finder
11. 終わり 11 ご清聴ありがとうございました。