Figma

Tailwind CSSチームのデザイナー Steve Schoger が、「Claude Codeをメインのデザインツールにした」という1時間の解説動画を公開した。Figmaを使わず、Claude Codeだけで金融アプリのランディングページをゼロから構築する過程を全公開している。 Steve Schoger とは Steve Schoger は Tailwind Labs のデザイナーで、Adam Wathan と共に「Refactoring UI」の著者としても知られている。開発者向けにデザインスキルを体系的に教える活動で広く認知されており、X（Twitter）でのデザインTipsや YouTube でのUI改善動画でも人気が高い。 動画の内容 動画では、約50回の対話を通じて初期出力をプロ級の品質に仕上げていく過程が公開されている。 注目すべきは、Schoger 本人が「コマンドラインはディレクトリ移動と Claude 起動しかできない」と語っている点だ。プログラミングの深い知識がなくても、Claude Code との対話だけでプロ品質のLPを作り上げている。 ワークフロー 左画面: ブラウザ（localhost 表示） 右画面: Claude Code のターミナル これだけのシンプルな構成で、Figma は一切使っていない。 技術スタック Vite — ビルドツール Tailwind CSS — ユーティリティファーストCSS React — UIライブラリ デザイナーがCLIに移行する時代 「デザイナーがCLIに移行する」というのは、一見ありえない話に思える。しかし、この動画を見ると、AIコーディングツールがデザインワークフローを根本的に変えつつあることが実感できる。 従来のデザインワークフローでは、Figma などのビジュアルツールでモックアップを作成し、それをエンジニアが実装するという流れが一般的だった。しかし Claude Code を使えば、デザイナーが自然言語で指示を出すだけで、直接コードとして実装されたUIを確認・修正できる。 ui.sh — デザインスキルをAIに組み込むツール Schoger と Adam Wathan は ui.sh というツールも開発している。これは Claude Code や Cursor などのAIコーディングエージェントに、プロレベルのデザイン基準を適用させるスキルツールキットだ。ターミナルを「デザインエンジニア」に変えるというコンセプトで、AIが生成するUIの品質を大幅に向上させることを目指している。 ...

デザイナーの仕事が AI で「本当にすぐ終わる」時代が来ている。21歳でデザイン会社を経営するコンドウハルキ氏が X で共有した AI 活用術が大きな反響を呼んでいる。本記事では、同氏が紹介した 5 つの実践的な AI 活用ユースケースを掘り下げる。 1. Claude Code × Figma で制作スピードを大幅に高速化 最も注目すべきユースケースが Claude Code と Figma の連携 だ。チャットで指示するだけで、編集可能なデザインファイルが生成される。 従来は数時間かかっていたランディングページの制作が、わずか数分で完成するという。ポイントは「完成品を作る」のではなく「たたき台を一瞬で作り、そこから人間が磨く」という使い方にある。 2. AI モックアップで制作前の事前検証 本制作に入る前に、AI でモックアップやデザインバリエーションを素早く作成し、クライアントに方向性を確認する手法。 事前にバリエーションを見せることで「思っていたのと違う」という手戻りを大幅に減らせる。Autodesk の調査では、AI ツールの活用によりデザイン修正時間が 約40%削減 されたというデータもある。 3. AI 画像生成で素材検索の時間をゼロに ストックフォトサイトで「ちょうどいい画像」を探す作業は、意外と時間がかかる。30分以上かけて検索した挙句、微妙な妥協をした経験は誰にでもあるだろう。 AI 画像生成を使えば、必要なイメージをテキストで指示するだけでカスタム素材が生成できる。検索時間がゼロになるだけでなく、案件ごとにオリジナルの素材が使える点も大きい。 4. セールスコピーの作成支援 技術的なスキルは高いのに、デザインの価値を言葉で伝えるのが苦手 — そんなデザイナーは少なくない。 AI を使えば、デザインのコンセプトや効果を的確に言語化できる。提案書のコピーライティングやクライアントへの説明文など、「言葉にする」作業を AI がサポートしてくれる。 5. AI が24時間対応のデザインメンターに 余白のバランス、タイポグラフィの比率、ビジュアルヒエラルキー — デザインのフィードバックが欲しいとき、AI が 24時間対応のメンター として機能する。 特に一人で仕事をしているフリーランスデザイナーにとって、いつでも客観的なフィードバックが得られる環境は心強い。 AI 活用の成否を分けるポイント コンドウ氏が強調するのは、「何を AI に任せ、何を人間がやるか」の判断力 が成否を分けるという点だ。 AI はあくまでツールであり、デザインの本質的な価値 — ユーザーの課題を理解し、最適な体験を設計すること — は人間の仕事のままだ。AI で効率化した時間を、より本質的な思考やクライアントとのコミュニケーションに充てることで、結果的により高い価値を提供できる。 ...

海外サービスの UI を調査するとき、スクリーンショット内のテキストを手作業で翻訳するのは地味に手間がかかる。TSUMIKI INC. の鈴木慎吾氏（@shingo2000）が公開した Figma プラグイン Image Translator は、この作業を自動化してくれる。 Image Translator とは Image Translator は、Figma 上で選択した画像からテキストを自動抽出（OCR）し、指定した言語に翻訳する Figma プラグインだ。 主な特徴： 画像からのテキスト自動抽出 — スクリーンショットや UI キャプチャからテキストを認識 多言語翻訳 — 英語、日本語、中国語、スペイン語、韓国語、ポルトガル語などに対応 2つの表示モード — Figma のアノテーション機能で表示するモードと、テキストレイヤーとして配置するモードを選択可能 使い方 Figma で翻訳したい画像を選択する プラグインメニューから Image Translator を起動する 翻訳先の言語を選択する 抽出・翻訳されたテキストがアノテーションまたはテキストレイヤーとして表示される 活用シーン 海外サービスのデザイン調査 競合分析や UI リサーチで海外アプリのスクリーンショットを収集した際、画面内のテキストを素早く日本語で確認できる。翻訳結果がアノテーションとして画像に紐づくため、チームメンバーとの共有にも便利だ。 多言語対応の確認 自社サービスの多言語版スクリーンショットを取り込み、各言語のテキストが正しく表示されているか確認する用途にも使える。 まとめ Image Translator は、デザイン調査における画像内テキストの翻訳という地味だが頻出する作業を自動化してくれるプラグインだ。海外サービスの UI を日常的に調査しているデザイナーにとって、ワークフローの効率化に役立つだろう。 Figma Community: Image Translator 作者: 鈴木慎吾 / TSUMIKI INC.

Figma が提供する AI デザイン機能「Figma Make」を実務で活用するための実践的なコツをまとめる。1000 回以上のプロンプト作成を通じて見つかった知見や、効率的なワークフローを紹介する。 Figma Make とは Figma Make は、Figma に統合された AI 搭載のデザイン生成ツール。テキストプロンプトからUIデザインを自動生成でき、AutoLayout 付きの構造化されたデザインを高速に作成できる。 実践テクニック 1. Context 設計を明確にする AI に指示を出す前に、以下を明確にしておくことが重要: ユーザーペルソナ: 対象ユーザーの年齢層、IT リテラシーなど 実行アクション: 何をデザインするのか具体的に 制約条件: ブランドカラー、フォント指定、アニメーション仕様など 例: 「40代のITリテラシーが低いユーザー向けの、 シンプルで直感的なダッシュボード画面を作成してください。 フォントはNoto Sans JP、メインカラーは#2563EB」 2. 「大枠 → ピンポイント」の2段階アプローチ 一度に完璧を目指すのではなく、2段階で進める: 第1段階（大枠）: 初期プロンプトで全体構造を作る 対象画面の詳細説明 必要な機能リスト デザインテイスト（既知のサービス名で参照すると有効） 第2段階（ピンポイント）: ファイル名やクラス名を指定して細部を修正 3. デザインシステムを活用する 既存のテンプレートやサンプルをインポートして効率化する: 既存のデザインをキャンバスに置いて「これっぽく作って」と指示 Guidelines.md にデザインシステムとコーディングルールを記載 「〇〇画面の△△表と同様の UI で」と既存 UI を参照指示 4. Figma Design との往復ワークフロー Figma Make 単体で完結させるのではなく、通常の Figma Design と組み合わせる: Figma Make でデザインを生成 コピーして Figma Design にペースト Design で手動修正して期待通りに調整 修正版を再度 Figma Make に取り込んで再実行 このサイクルを回すことで、レイヤー構造が整理され、より高品質なコード生成が実現する。 ...

Claude-Native Designer — デザイナーが「作る人」になる Figma MCP × Claude Code ワークフロー @felixleezd（Felix Lee）氏のポストが注目を集めています。ADPList の共同創業者であり、1,500 人以上のデザイナーに Vibe Coding を教えてきた Felix Lee 氏が、4 ヶ月の実践から導いた「Claude-Native Designer」のワークフローを公開しました。 If you want to ship products you designed, stop using Figma only. Do it on Claude Code instead. Autonomous AI = memory + planning + tools + safety + collaboration. It’s a system, not a prompt. 「デザインの未来はコードを学ぶことではない。ビルドすることを学ぶことだ」— この記事の核心は、デザイナーが抱えてきた「アイデアはあるが実装できない」という壁が、Claude Code によって構造的に消滅したという主張です。 デザイナーの天井 — 7 年間の経験が語る構造的問題 Felix Lee 氏は Gotrade（YC S19）と ADPList で 7 年間デザインに携わってきました。その間、デザイナーが直面する共通の天井を目撃しています。 ...

「Figma は 100% 不要」宣言の真意 — Claude Code が溶かすデザインとコードの境界 @kawai_design 氏が X で公開した記事が議論を呼んでいます。 Claude Code を使えば使うほど、Figma を開く理由が消えていく。これは私だけの感覚ではありません。今、世界中のデザイナーが同じ疑問を抱えています。私の結論は明確です。Figma は 100% 不要。 同時期に UX Collective に掲載された Michael Buckley 氏の記事「Figma はデザインツールではない。コードを避けるためのピタゴラスイッチだ」も世界のデザイナーを震撼させました。本記事では、この「Figma 不要論」の構造と、Figma 自身の対応、そして AI 時代のデザインワークフローの変化を技術的に整理します。 「ピタゴラスイッチ」批判 — 何が問題なのか UX Collective の記事が突いた急所 Michael Buckley 氏の記事は、Figma でのデザイン作業を**ルーブ・ゴールドバーグ・マシン（ピタゴラスイッチ）**に例えました。 Figma でボタンを作る作業: 1. Auto Layout を設定する 2. パディングを調整する 3. ホバーステートを作る 4. インタラクションを設定する 5. プロトタイプモードで動作確認する 6. 開発者に引き渡す 7. 開発者がコードで再実装する 開発者が同じボタンを作る作業: <button className="btn-primary">送信</button> → 5 分で完了。ホバー、アクセシビリティも含めて 「パンケーキを返すためにピタゴラスイッチを作るようなもの」— この比喩が刺さったのは、多くのデザイナーが無意識にこの非効率を受け入れていたからです。 本質的な問題: デザインとコードの「翻訳」 Figma の存在意義はデザインとコードの間の翻訳レイヤーにあります。 従来のワークフロー: デザイナーの意図 → Figma でビジュアル化（翻訳 1） → デザインスペック作成（翻訳 2） → 開発者がコードに変換（翻訳 3） → 実装結果をデザイナーがレビュー（逆翻訳） 翻訳のたびに情報が劣化する: - ピクセルのズレ - インタラクションの解釈違い - レスポンシブ挙動の不一致 - アクセシビリティの抜け漏れ AI がデザインの意図を理解し、直接コードを生成するようになれば、この翻訳プロセス自体が不要になります。@kawai_design 氏の「翻訳の元データである Figma ファイルも要りません」という指摘は、ここに根ざしています。 ...

Anthropic 社内チームの Claude Code 活用 — マーケから法務まで、全部門が「自分で自動化」する時代 Anthropic 公式記事: How Anthropic teams use Claude Code 再現記事: Claude Code で広告バナー200本を15分で作る手順 紹介ポスト: commte はじめに Anthropic が「自社のチームが Claude Code をどう使っているか」を公式ブログで公開した。注目すべきは、エンジニアリングチームだけでなく、マーケティング、法務、データサイエンス、デザインといった非技術部門が、コードを1行も書かずに高度な自動化を実現している点。 特にマーケティングチームの事例は、ツイートでも「えぐい広告手法」として話題になり、実際に再現して15分で広告バナー200本を生成した記事も登場した。 マーケティングチーム — たった1人で10倍の成果 チーム構成 驚くべきことに、Anthropic のグロースマーケティングチームはエンジニアがゼロの1人チーム。担当の Austin Rau 氏は、元々ターミナルの開き方すら知らなかったという。 それが、非技術者向けガイドを見てから1週間で、Figma プラグインと広告コピー生成ワークフローの両方を構築した。 4つの自動化事例 1. Google Ads の広告コピー生成（2時間 → 15分） 数百件の既存広告 CSV を Claude Code に読み込ませ、パフォーマンスの低い広告を自動特定。改善案をサブエージェント方式で生成する。 サブエージェント設計のポイント: エージェント 専門 制約 headline-writer 見出し生成 30文字以内 description-writer 説明文生成 90文字以内 1つのプロンプトで全部やらせるのではなく、タスクごとに専門エージェントを分けることで、文字数制約を守りつつ品質を維持する。 2. Figma プラグインでバナー一括生成（数時間 → 0.5秒） Claude Code で自作した Figma プラグインが、テンプレートのテキストノードを CSV データで自動差し替え。最大100パターンのバナーを一括生成する。 ...

業務フローの設計にPowerPointではなくBPMNを使うべき理由 — Claude Code時代の詳細設計 はじめに 業務システムの設計でSwim Lane（スイムレーン）形式の業務フローを書くとき、多くの現場ではPowerPointやFigmaが使われています。見た目は整えやすく、関係者への説明資料としてはよくできています。 しかし、この「人間が読むための図」を設計の源泉にしてしまうと、あと工程で大きなコストが発生します。特に、Claude CodeのようなAIエージェントを開発に活用する場合、設計成果物のフォーマット選択が開発効率を決定的に左右します。 本記事では、実際にPowerPointのスライドからBPMN 2.0に変換した経験をもとに、BPMNを採用する利点を解説します。 PowerPointの業務フローが抱える問題 PowerPointのスライドに描かれた業務フローは、本質的に「画像」です。 PowerPoint (.pptx) ├── 図形の座標とスタイル情報 ├── テキストボックスの文字列 └── グループ化とレイヤー これは人間が見るには十分ですが、次のような問題があります。 構造情報がない: 「この矢印がどのタスクからどのタスクへ向かっているか」をプログラムが読み取れない アクターの定義が曖昧: レーンの境界が図形の配置で表現されているだけで、意味的な紐付けがない 分岐条件が自然言語: ゲートウェイの条件が図中のテキストに埋め込まれ、機械的に検証できない フロー間の接続が不明確: 複数スライドにまたがるフローの接続点（「次のフローへ」）が視覚的な慣習に依存 BPMN 2.0とは BPMN（Business Process Model and Notation） は、業務プロセスを図式化するための国際標準記法です。OMG（Object Management Group）が策定し、ISO 19510として国際標準化されています。現行バージョンはBPMN 2.0.2です。 BPMNの最大の特徴は、人間が理解できるフロー図と機械が処理できるXMLが一つのファイルに同居している点です。プールとレーン（Swim Lane）でアクターを表現し、タスク・ゲートウェイ・イベントでプロセスの流れを記述します。 BPMN 2.0がもたらす構造化 BPMN 2.0はXML形式で、見た目と意味の両方を持つフォーマットです。 1 2 3 4 5 6 7 8 9 10 11 12 13 <bpmn:process id="Process_1" isExecutable="false"> <bpmn:laneSet id="LaneSet_1"> <bpmn:lane id="Lane_reception" name="太平受付担当"> <bpmn:flowNodeRef>r1</bpmn:flowNodeRef> <bpmn:flowNodeRef>r2</bpmn:flowNodeRef> </bpmn:lane> <bpmn:lane id="Lane_system" name="システム" /> </bpmn:laneSet> <bpmn:task id="r1" name="修理内容の特定" /> <bpmn:exclusiveGateway id="d2" name="保証範囲?" /> <bpmn:sequenceFlow sourceRef="r1" targetRef="d2" /> </bpmn:process> この構造から、以下がプログラム的に読み取れます。 ...

Locofy Figmaで作ったデザインをLocofyで自動生成してみた

オートレイアウト FigmaのREST APIで取得したJSONデータから、FrameがAuto Layoutかどうかを判断するには、以下のフィールドをチェックします： layoutMode: このフィールドが存在し、値が "HORIZONTAL" または "VERTICAL" であれば、そのFrameはAuto Layoutが適用されています。 例えば、以下のようなJSON構造です： 1 2 3 4 5 6 7 { "id": "123", "name": "Frame 1", "type": "FRAME", "layoutMode": "HORIZONTAL", ... } この例では、layoutModeが "HORIZONTAL" なので、このFrameはAuto Layoutが適用されています。 ソース: Copilot との会話、 2024/9/19 (1) Figma オートレイアウトの使い方とうまくできないときの … - Designup. https://designup.jp/figma-auto-layout.html. (2) 【Figma】オートレイアウトの使い方完全ガイド（Auto Layout …. https://tagnote.net/figma/auto-layout/. (3) 【Figma】フレームの使い方マスター編 〜グループとの違いや …. https://implist.dev/entries/figma-frame-and-auto-layout-group. (4) Working with Auto Layout in Figma - a Self-Guided Tutorial. https://www.figma.com/community/file/1207414800398401244/working-with-auto-layout-in-figma-a-self-guided-tutorial. (5) FrameNode | Plugin API - Figma. https://www.figma.com/plugin-docs/api/FrameNode/. ...