shadcn/ui × Cursor × Figmaプラグイン × MCP連携で実現する高速UIデザイン
はじめに 本記事の位置づけ 今回ご紹介する方法は、吉川聡史さんの記事の基本フローを踏襲しています。 吉川さんの記事では Claude を使ってデザインをHTML化し、プラグインでFigmaに戻すフローが紹介されています。 本記事も基本の流れは同じですが、AIツールを Cursor に置き換えて実装しています。 経緯・背景 私はエンジニアですが、UIデザインにも興味があり、新規プロジェクトのMVPデザインを担当することになりました。最初は、自分が想定している画面に合うUI kitを参考にしながらFigmaで作っていました。けれど、プロジェクトはスピード感を持って進める必要がある一方で、UIデザイン初心者の私にとっては効率が悪く、時間がかかっていました。 そこで選んだのが shadcn/ui Figma kit です。 よく使うコンポーネントが一通り揃っている デザインの統一感が保てる 実装コ
🎨Figma MCPの構造化問題を改善！「Layermate」でデザイン再現率を向上させた話
みなさんこんにちは！ カンリーでVPoEをしてます長谷川です。 今回は、Figma MCPの構造化問題に取組んだお話ができればと思います！ ✨ はじめに Figma MCPを使ったことはありますか？MCPとは「Model Context Protocol」の略で、AIがFigmaのデザインファイルを読み取り、コード生成などを行うためのプロトコルです。しかし、実際に使ってみると、構造化されたデザインファイルからの再現性は高い一方で、非構造化されていないデザインファイルからの再現率の低さに直面することも多いです。 今回は、この問題を解決するために、AIデザインツール「Layermate」を活用することで、デザインの再現性を向上させることができたので、紹介です。 🔰 Figma MCPとは？ まず、Figma MCPについて簡単に説明します。 Figma MCPは、OpenAIやClaude等
Figma MCPを攻略して最高のコード生成を実現する
はじめに こんにちは！令和トラベル Frontendエンジニアのふくだです。 「Figma MCPを使っているけれど、生成されるコードの精度がイマイチ...」 そんな悩みを抱えていませんか？ 本記事では、実際にFigma MCPを使ったコード生成を体験し、そこから段階的に改善していく過程を詳しく解説します。セットアップから始まり、失敗例の分析、具体的な改善手法、そして最終的なベストプラクティスまで、実践的なアプローチでFigma MCPのポテンシャルを最大限引き出す方法をお伝えします。 事前準備 検証環境 Figmaデスクトップアプリ（Web版では利用できないので注意） MCP対応エディタ（VS Code, Cursor, Windsurf, Claude Code等） Next.js 14+ (App Router) TypeScript、Tailwind CSS
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
ウェブ・アプリエンジニアのためのFigma入門 (3) うまく使う・みんなで使う | さくらのナレッジ
初回のFigmaを使う理由、前回の基本的な使い方に引き続きFigma入門の3記事目では、応用的な使い方としてページの利用、共通パーツやスタイルをまとめるコンポーネントやテキストスタイル、中のレイヤーによってサイズが変わったり、レイヤーをうまく並べたりできるオートレイアウト、複数人でFigmaを使うための機能について説明します。 ページを利用する Figmaで作業を進めていると、多くのフレームが増えて目的のものが探しにくくなります。そういった時に利用するのが「ページ」です。前回の記事で説明した「フレーム」は複数のレイヤーをまとめるものといいましたが、「ページ」は複数のフレームをまとめたものと捉えて大丈夫です。 ページは画面左上の「Pages」で追加や変更できます。たとえば、機能ごとに分割したり、デバイスごとに分割したりして、デザインデータを分類するために使うことが多いです。 共通パーツ・スタ
ウェブ・アプリエンジニアのためのFigma入門 (1) Figmaを使うわけ | さくらのナレッジ
FigmaはWebブラウザ上で動作し、複数人同時で編集が可能なデザインツールです。 従来UIデザインの分野ではSketchやAdobe XDといったツールが使われてきました。そういったデザインツールの分野にFigmaは複数人同時編集・Webアプリという特長を活かし登場しました。現在は5000万ドル以上の資金を調達するに至る、極めて注目度の高いツールに成長しています。 本連載ではUIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニアに向けに注目度の高まっているFigmaを導入すると嬉しい理由と使い方をお伝えします。 連載の一本目である本記事では、なぜFigmaを使うのか・今までのツールと何が違うのか？という点を重点に解説します。 対象読者 UIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニア デザインファイルの管理で困っているエンジニア・デザイナー Fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/uisavior/status/2013112991399530577?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
Desktop server (using desktop app) | Developer Docs
https://x.com/yusuke_post/status/2000719180166021140?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
https://x.com/jirosh1998/status/1938125349528998255?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
https://x.com/kawai_design/status/1936789008270627278?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
https://x.com/tetsuro_b/status/1917482807942864927?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
Onlook – Cursor for Designers
https://x.com/huseyingayiran/status/1854130610110943532?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
Plasmic | Build powerful apps fast— without the limits
https://x.com/shiba_program/status/1809150238663610510?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
https://x.com/kajikent/status/1805843479450226881
https://x.com/ayami_marketing/status/1790022885148368994?s=46&t=WLoQjPOJLfZ0ZJFtTOS7aw
Framer: Design and ship your dream site with zero code | Product Hunt
Figma