中田のタスク管理

タスクの詳細

依頼者作業・確認待ち
Figma AI連携
依頼者 EIjiさん
進捗率
80%
作業開始予定日
タスクタイプ 通常
タグ AI,Figma
現状サマリー

現在「依頼者作業・確認待ち」、進捗 80%

対応者メモ・コメント 別ウィンドウで表示


コメント コメントフォーム

中田

Figmaのアカウントをお借りして検証した内容を、以下のページにまとめました。
「Claude Code to Figma」を使い、FigmaとClaude Codeを連携してコーディングさせた検証です。

レポート:
https://plus-creative.xyz/nakata/2026/0302/figma-ai-guide/

Basic認証:plustest/plussp

対象デザイン:
一人親方(SP版)

コーディングページ:
https://plus-creative.xyz/nakata/2026/0302/hitorioyakata_sp/

レポート本文はAIに作成させたため、やや難しく感じるかもしれません。
内容は主に、AIに意図を正確に伝えるためのFigma側のデザイン構造化についてです。


Claude Code で、広告バナー200本を15分で作るえぐい手順

https://izanami.dev/post/33bc0c0f-4210-4f5e-90e5-4ee8efe9ac66

ClaudeCodeにFigmaのプラグインを作ってと依頼すると簡単にプラグインの作成ができます。
以下の記事の通りに行えば可能です。
https://izanami.dev/post/33bc0c0f-4210-4f5e-90e5-4ee8efe9ac66

こちらの記事のURLをAI(Claude)に渡して、プラグインを作ってと言っただけです。

この記事の内容では、
作成してあるテンプレートバナーに
CSVにまとめた見出しや文章を流し入れ10パターン作成するというものでした。
https://gyazo.com/fe9a6b2b16ee6e61ba79e169142e2781


ClaudeCodeにHTMLをFigmaに反映させるプラグインを作らせたので実験してみました。
(1)HTMLで作ったデザインをFigmaに流し込むプラグインのテスト。
(2)今回の記事で作成したプラグインで、(1)へ見出しと文章を反映。
https://gyazo.com/2df40c45c963dfdcc4d0dc9a66a02196

コメントのURLコピー 2026-03-02 19:11:26

コメントフォーム

名前
タイトル
コメント
    ファイルのアップロード
    (このエリアにドロップしてください)
    ※ ファイルのURLはコメント内に含めてください。
    Markdown記法が使用可能
    # 見出し h1
    ## 見出し h2
    ### 見出し h3
    #### 見出し h4
    ##### 見出し h5
    
    **太字**
    
    水平線
    ---
    
    > 引用テキスト
    > 引用テキスト 
    
    ```
    コードの表示(ブロック)
    コードの表示(ブロック)
    コードの表示(ブロック)
    ```
    
    * リスト
    * リスト
    * リスト
    
    0. 番号リスト
    0. 番号リスト