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

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