Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニアにオススメの Figma 活用

seya
February 09, 2023

エンジニアにオススメの Figma 活用

seya

February 09, 2023
Tweet

More Decks by seya

Other Decks in Design

Transcript

  1. エンジニアにオススメの

    Figma 活用
    @devsumi 2023/02/09
    by Seya(@sekikazu01)

    View Slide

  2. Seya
    Figma 開発エンジニア@カケハシ
    @sekikazu01 @seya
    @yukkuri-product-development
    Figma to React Component Japanese Font Picker Random Cat

    View Slide

  3. 最近猫(ルイちゃん)と暮らし始めました

    View Slide

  4. 最近 YouTube 始めました
    https://www.youtube.com/@yukkuri-product-development

    View Slide

  5. Figma (フィグマ)

    View Slide

  6. Q. なぜ今Figmaなのか

    View Slide

  7. A. コラボレーション

    View Slide

  8. Web ブラウザで動Ä
    同時編集 = デザインが誰でも・いつでも開ける

    View Slide

  9. デザインを助ける様々な機能
    プラグイン
    コンポーネント
    他にも色々あるよ!

    View Slide

  10. もちろんエンジニアも重要なターゲット
    Spotify
    Figma with Dylan Field
    Listen to this episode from PodRocket - A web development podcast
    from LogRocket on Spotify. CEO and Co-Founder of Fi...
    表示
    Figmaのユーザの

    1/3はエンジニアだよ

    View Slide

  11. エンジニアにとって嬉しいことも色々
    値が読み取りやすい!
    フロントエンドのコードと

    ほぼ同じコンポーネント設計!
    プラグイン ウィジェット
    プログラマブルに

    デザインにアクセス!

    View Slide

  12. このトークのテーマ
    エンジニアB
    9 普段の業務での Figma をフルに活用できるようにな3
    9 Figma で遊びたくな3
    9 ついでにデザインにも興味を持ち始める

    View Slide

  13. 私自身が Figma がなかったら

    「そんなにデザインに興味を持ってなかっただろう」

    と感じているので同じような気持ちになる方が増えれば
    嬉しいです。

    View Slide

  14. アジェンダ
    U Figma のキホン for エンジニ2
    U 実装する時のFigma活用方'
    U プログラマブルに Figma を操作しよ
    U Figma API
    U Figma Plugi9
    U Figma Widget

    View Slide

  15. Figma のキホン for エンジニア
    エンジニアのための Figma 知識
    zenn.dev

    View Slide

  16. Inspect ペーンを使おう
    ねこちゃん
    かわいいかわいいかわいいかわいいか
    わいいかわいいかわいいかわいいかわ
    いいかわいいかわいいかわいい
    会いにいく
    ねこちゃん
    かわいいかわいいかわいいかわいいか
    わいいかわいいかわいいかわいいかわ
    いいかわいいかわいいかわいい
    会いにいく
    会いにいく
    f Cmd(WindowsならCtrl) 押しながらクリックで最下層のレイヤーを選択できるぞ!

    View Slide

  17. 要素間のマージンをみよう
    2 デザインペーンでも Option 押しながら選択するとマージンが見られるぞ!

    View Slide

  18. スタイルを見よう
    色 タイポグラフィ
    text-normal
    text-italic
    text-bold
    text-uppercase
    text-underline
    Sample Text

    View Slide

  19. 画像をエクスポートしよう
    $ Cmd+Shift+C で PNG としてコピーできたりするぞ!

    View Slide

  20. Variants/Component を知ろう
    コンポーネント
    ボタン
    Variants
    インスタンス
    ボタン

    View Slide

  21. Plugin を使おう
    ※Viewer 権限では使えないので会社にお金を払ってもらいましょう
    https://www.figma.com/community/plugin/789009980664807964

    View Slide

  22. Widget を使おう
    https://www.figma.com/community/widget/1030479012894344777

    View Slide

  23. APIからスタイルのデータを取ってくる

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Figma API

    View Slide

  29. Figma API でできること
    API 経由
    指定したファイルの大体のものを取得でき1
    チームに紐づいたプロジェクトやファイルを取得でき1
    チームのコンポーネントやスタイルとかも取得できる
    あとはe
    Webhook でコメントとかライブラリのアップデートの通知とかもでき1
    OAuth もあるので Figma ログインのアプリとかも作れる

    View Slide

  30. 具体例: スタイルをコードにする
    API の操作には Figma-js (非公式の Figma API クライアント)が便利!
    https://github.com/jemgold/figma-js#readme
    GitHub - jemgold/figma-js: Little
    wrapper (+ types) for...
    Little wrapper (+ types) for the Figma
    API. Contribute to jemgold/figma-js...
    github.com

    View Slide

  31. 2.データを元に文字列を組み立てる

    View Slide

  32. APIはコードと同期の文脈では
    Figma から生成できるものが全くいじらず

    そのままコードで使えるものに便利
    q スタイg
    q 画像(画像圧縮系の API かませると更に V
    q アイコン

    View Slide

  33. AI で自動タグ付けしてくれたり
    して結構ガチ
    有象無象のコード生成ツールと
    は一線を画す感ある
    Locofy https://www.locofy.ai/

    View Slide

  34. 開発の始め方
    0 Figma 上から始め!
    0 GitHub 上で boilerplate 探
    0 create-fimga-plugin
    https://speakerdeck.com/mottox2/create-figma-plugin

    View Slide

  35. "' Figma のレイヤーツリーをコードに変換
    しやすい形に成形する

    View Slide

  36. View Slide

  37. 2. 先ほど作ったツリーからJSXの文字列を

    組み立てる

    View Slide

  38. View Slide

  39. 3. CSSの文字列も組み立てる

    View Slide

  40. View Slide

  41. めっちゃかいつまんで説明したのでもっと詳しく知りたい方は

    解説記事や GitHub 上のコードをお読みください!
    https://zenn.dev/seya/articles/105ab3e2864178
    作ろう!自分だけの Figma コード
    生成機
    zenn.dev
    GitHub - kazuyaseki/figma-to-
    react:...
    Simple generator of React code from
    Figma. Contribute to kazuyaseki/fig...
    github.com

    View Slide

  42. 生成する上での課題
    ƒ 初期で未実装のコンポーネントがたくさんある時にはワークしやすい|
    ƒ アプデの時に使い勝手が悪H
    ƒ コードだけで実装したものと競合(タグを変えたり、イベントハンドラを
    くっつけたり)すm
    ƒ コンポーネント化したものはコンポーネントとして表示してほしH
    ƒ アイコンなどのアセット系の扱H
    ƒ デザイナーがしっかりデザインを作っていないとワークしなH
    ƒ Auto Layout 必要なところに全部使ったg
    ƒ レイヤー名をきちんとしたg
    ƒ コンポーネント設計をコードと同期したg
    ƒ Figma で表現できないもの(Table や Grid のレイアウトなど)は生成できなH
    ƒ etc...

    View Slide

  43. プライベートプラグインの配布の仕方
    1. Organization プランにして private プラグインを使う

    2. 使う人各自でコードをダウンロードして使う

    3. コミュニティに公開しちゃう

    View Slide

  44. Figma Plugin

    View Slide

  45. Figma Plugin でできること
    Figma ファイル上から実行でき&
    E API と比べると Figma を実際に使いながらの作業に有効
    書き込みもできる(API は read-only)
    UI 側のスレッドは割となんでもできる

    (外部にリクエスト飛ばしたり)

    View Slide

  46. https://www.figma.com/plugin-docs/how-plugins-run

    View Slide

  47. 具体例: Figma から React コードの生成
    https://zenn.dev/seya/articles/105ab3e2864178

    View Slide

  48. Figma Widget

    View Slide

  49. Figma Widget でできること
    できることはプラグインと大体同じだが


    Figma ファイル上に設置できP
    B 誰でも同じものを参照できP
    B ゴリ押しみがあるが定期実行もできる!

    (ただし、他のプラグインやWidgetを実行すると止まる)

    View Slide

  50. 事例: Widget から GitHub Actions 実行
    W やりたかったこR
    W アイコンが追加された時にデザイナーにポチッと押してもら
    うだけでコードにも反映される
    Widget から GitHub Actions 起動
    GitHub Actions から Figma API でアイコンの画像とってくる

    スクリプトを実行してコミット or PR 作成

    View Slide

  51. API でアイコン生成するスクリプトを書く

    View Slide

  52. View Slide

  53. 2. スクリプトを実行する Actions を作る

    View Slide

  54. View Slide

  55. 3. Actions を Widget から実行する

    View Slide

  56. View Slide

  57. この Widget のコードは公開してます
    https://github.com/kazuyaseki/figma-invoke-github-webhook-widget
    GitHub - kazuyaseki/figma-
    invoke-gi...
    Contribute to kazuyaseki/figma-invoke-
    github-w...
    github.com

    View Slide

  58. 開発の始め方
    Figma 上からも始められるが...

    Figma の Developer Adovacate が作っている CLI を使った方がい
    い。Vite と React が搭載されていて開発し始めやすい。
    https://github.com/figma/create-widget
    GitHub - figma/create-widget:
    Create new FigJam widgets...
    Create new FigJam widgets with a single
    command. Contribute to figma...
    github.com

    View Slide

  59. Plugin と Widget の使い分け
    ' 誰でもすぐに触れる0
    ' 定期実行できる!
    の二つがプラグインとの差別化点

    View Slide

  60. おわりに

    View Slide

  61. 最近はデザイン x エンジニアなロールも様々
    デザインエンジニア
    UXエンジニア
    デザインシステムエンジニア

    View Slide

  62. エンジニアもデザインに参加
    エンジニアもデザインに参加
    W 早期に実装可能性の視点をデザインに取り入れられた&
    W より良いデザインのコンポーネント設計をした&
    W 主体的に作るものを考えるようになったり

    View Slide

  63. 「Figma いじるの楽しい!」

    からこういう道に進むのもいいかも
    私がそうでした

    View Slide

  64. ご清聴ありがとうございました!

    View Slide