サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Claude CodeとFigmaをMCPサーバーを経由して接続する方法について解説します。 公式ドキュメントに記載してある内容となります。 まず、前提として、MCPサーバは、プロフェッショナルプラン以上のDevシートを契約しないといけないのでご了承ください。FigmaでMCPサーバを有効化するFigmaのプロフェッショナルプラン以上のDevシートを購入した前提で進めます。Figmaデスクトップアプリじゃないと設定ができないので、アプリをダウンロードします。 以下からデスクトップアプリをダウンロードしておきます。 次にDevシートの対象となったチームのシートを開きます。 シートの右上の設定から[Preferences] > [Enable Dev Mode server]をチェックして有効化します。 これでMPCサーバー側の設定ができました。 Claude CodeでMCPサーバを登
生成AIの進化により、デザインと開発のプロセスはこれまで以上に密接に結びつき始めています。本ウェビナーでは、Figmaが提供するDev Mode MCP Server、Figma Makeといった最新の機能と、ゆめみによる実践的なアプローチを通じて、「AIとともにつくるこれからのデザインシステム」を探求します。 （すでに終了致しました。アーカイブの配信はございません。） こんな方にオススメですFigmaを活用したAIドリブンなプロダクト開発について知りたい方Figma MCP Server、Figma Makeといった新機能に興味がある方デザインシステムの構築に興味がある方 構築済のデザインシステムの運用を進化させたい方 開発チームとデザインチームとの連携をスムーズに進めたい方 デザインチームのマネジメントを担当されている方 タイムテーブル
こんにちは、タイミーのプロダクトデザイナーの横田です。 誰でもFigmaからデザインをAIで正確に実装することができるツールをつくりました。 最近、AIを活用した開発フローが注目されています。 デザインデータから直接コードを生成したり、レビューを自動化したりといった試みも増えてきました。しかし、FigmaのデザインデータをLLMに正確に理解させるには、まだ工夫が必要だったり、ツールが制約されたりするのが現状です。Figmaでは公式のMCPのような仕組みはまだありません。AIを活用した取り組みをやっている会社はちらほらあるけど、うちでやるにはどうやれば…？という方は多いのではないかと思います。 そこで今回、Figmaのデザインノード情報を詳細なJSON形式で出力するプラグイン「FigmaRaw」を開発し、公開しました。 一言でいえば、FigmaのデザインをいろんなAIでコーディングできる
登壇者紹介合同会社DMM.comエンジニア 高井 実氏（@debiru_R）2010年よりSNSエンジンの開発、Webサイトの受託開発、ネットワークシステムの開発など、フロントエンド開発もバックエンド開発も携わってきたフルスタックエンジニア。趣味でHTML,CSSの研究を長年行っており、HTMLやブラウザ実装事情、Webアクセシビリティにも精通している。その知識を活かして、2024年から合同会社DMM.comにてデザインシステム開発を行っている。 LT：DMM.comでのFigmaを活用したデザインシステム開発と情報の一元化｜合同会社DMM.com 高井 実氏▼登壇資料はこちら 高井氏：DMM.comでのFigmaを活用したデザインシステム開発と情報の一元化に関するセッションを始めさせていただきます。 まず、簡単に自己紹介をさせていただきます。高井実と申します。DMMのプラットフォーム
はじめにFigmaで作業をしていて、レイヤーを整理したくなる場面はありませんか？ 今回はFigmaのデフォルトの機能とプラグインを使用して、効率良くレイヤーを整理する方法を解説します。 レイヤー名を一括変更 まずはレイヤー名を一括で変更する機能を使ってみましょう。 変更したいレイヤーを全て選択し、『command』+『R』でウィンドウを開きます。 今回は「box01,box02,box03～」と連番を振っていきます。 「変更後の名前」の箇所に「box」と記入した後に『番号↑』をクリックします。 すると「box$nn」と記入されました。 左側にプレビューがあるので上手く反映されているか確認します。 問題なければ右下の「名前を変更」を選択しましょう。 レイヤーを確認すると、きちんと「box01,box02,box03～」と名前が変更されていますね。 レイヤーの順序整理 次に、先ほど連番を振っ
こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 最近v0.devやFigmaMake、Lovableなどの自然言語でUIを生成できるAIツールが増えてきて、1年前に比べるとかなり精度も上がり実践導入が進んだ感じがしますね。実際Gaudiy社内でもデザイナー以外の職種も積極的に使っていて、かなり浸透してきてます。 そんな中で、v0等を使ってプロトタイピングしていると、6-7割くらいの完成度から詳細を作っていくプロセスでディティールの修正をプロンプトするのはどうも面倒で、自分でパパッと直したいのに「Figmaで調整できない」のがどうしてもネックになります。とはいえ、せっかくAIが作ったUIをFigmaで作り直すのも二度手間でコスパが悪い。 ということで、v0の生成結果をFigmaに変換する方法を紹介します。「Figmaに持っていけないじゃん〜〜」とお困りの
このままこのデザインで判定を続けてはこのプラグインの性能がどれほど優れたものなのかわからないため、問題ないデザインと明らかに問題があるデザインを混ぜて判定させてみましょう。 ここで驚きの精度を発見！！！！ これはすごい。 数日ひたすらこのプラグインを試して一番驚きました。すごい。 ほかの日本で主に使用されているアクセシビリティチェッカー（厳密にはコントラストチェッカー）のプラグインでも、昨年試した段階ではどれも背景が柄のデザインは判定ができませんでした。 判定文を読んでみると、「柄」を認識していそうな感じがします。 柄を混ぜてこれくらいの色、と単色に直して判断しているんですね。人間の目と同じ判定の仕方をしています。 別の柄でも試してみます。 画像のような、１つ１つオブジェクトを作成・配置したものは柄認定されず、判定してくれないようです。 ちなみに問題ないデザインでも「AltText」とい
AsFigmagoes public, our commitment endures—to eliminate the gap between imagination and reality. Read Dylan Field’s founder letter about why design is more important than ever, and what’s next for the company. When Evan and I startedFigma in 2012, our founding vision was to “eliminate the gap between imagination and reality.” At the time, people found this vision a bit confusing and abstract, e
みなさんこんにちは。Amebaデザインシステム「Spindle」テックリードの原 ( @herablog )とAI 活用に詳しい Spindler の柳 ( @pagu0602 ) です。本記事では2025年5月30日に開催された Spindle SUMMIT 2025 での発表をもとに、AIを活用してデザインシステム開発を劇的に加速させる「Spindle MCP Server」について、その詳細と成果をご紹介します。 さらに、この記事では2025年6月4日に発表されたFigma 公式の Dev Mode MCP Server との連携についても触れています。NOTE:本記事にはPodcast風のまとめもあります (NotebookLM で作成) 目次 Spindle MCP Server とは Spindle MCP Server の仕組みと実装 Spindle MCP Ser
厳選された高級旅館・ホテルを、上質な体験とともに。 日本全国の特別な宿泊施設だけを掲載する プレミアムな予約サービスです。
![｜ 一休.com公式アプリ｜上質な旅館・ホテルの宿泊予約をもっと快適に 宿泊予約は[一休.com]](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f9e2409c3420c522950f469f4e57c0d70a8fe302e%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fwww.img-ikyu.com%252Fcontents%252Fdg%252Fapp%252Fogp.png&f=jpg&w=240)
AIだけでLPができる時代が来た一休デザイナーの河村です。 LP制作で、Figmaもコードも「自分で書かない」時代が、本当に来てしまったかもしれません。 今回は「Figma Make」というFigma公式が2024年にリリースした自然言語でUIを作成・編集できる生成AIツールを使って、デザインからアニメーション、レスポンシブ対応のコード生成まで、すべてAI任せでLPを完成させてみました。その工程と、使ってみての気づきをレポートします。 実際に出来上がったLP ※Figma Make上で、デザインからHTML/CSSファイルの生成まで完結。最終的なプロダクト反映（ファイルの保存）のみ手作業で対応しています。 なぜ“AI縛り”で作ってみようと思ったか一休では現在、CTOの伊藤直也さんを中心に、全社的にAI活用・開発を加速させています。エンジニアチームでは「まだ手で書いた方が早い」と言いつつも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
