Claude Code+FigmaMCPより正式サービスした「Figma Make」がFigmaデザインの再現はよい（個人の感想）
一番最初に 「ごめんね、出せるデザインがないこととデザイン能力なくて 記事内にClaudeCode+FigmaMCPとFigmaMakeでの比較はないんだよ！ 」 見事に体調崩してました FigmaMakeのベータ版が終わって正式サービスになりました。 ベータのころから触っていました。特にデザイナさんに依頼しずらい金額で受注せざる得ないような状況ではとても重宝しました。 既にZenn記事はありますが、リハビリのため記載しましたので正直記事の内容は微妙です。 結論：「Figma Make」ってなに？ AIプロンプトベースでデザイン作ってくれるサービスだよ！ Figmaに親和性が高いので、ClaudeCode等でデザインするよりもかなりスタイリッシュなデザインができます。 デザイナーさん入れれない環境だとかなり重宝します。 また、人間に依頼しないでプロンプトベースで、クレジットの範囲内ですが、
Figma MCPとCode Connectで実装効率を向上させる方法 - Sansan Tech Blog
こんにちは、技術本部 Contract One Engineering UnitでAI契約データベース「Contract One」の開発をしている井上です。 今回は、現在各所で注目を集めているFigma MCP（Model Context Protocol）について書きます。 Figma MCPとは Figma MCPの設定方法 1. Figmaデスクトップアプリのインストール 2. MCPの有効化 3. MCPサーバーの設定 4. 設定完了 Figma Code Connectの設定方法 1. @figma/code-connectをインストール 2. アクセストークンの取得 3. Figmaとの接続 4. ひな型コードの生成 5. Prop Mappingの設定 6. 設定の反映 実際の活用事例 デザインの修正に爆速で対応する 新しい画面を爆速で作る まとめ 参考リンク Figma M
効率的なFigmaデザインをHTML/CSSへ変換する方法 #webデザイン - シナプス技術者ブログ
WEBソリューション課の田畑です。 現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。 もっと効率的にページ作成を行いたいと思ったので、Figmaのデザイン画面をHTMLやCSSへ変換する方法について調べてみました。 Figmaとは FigmaのデザインからHTML/CSSへ変換する方法 1.Figmaの開発モード(Dev Mode）を使う 2.プラグインを使ってデザインをHTML/CSSへ変換する 試したプラグイン プラグインの使い方 プラグインで変換した結果 3.AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する まとめ Figmaとは Figmaとはウェブ上で使えるデザインツールです。 Fig
jlink によるカスタムJREイメージ - A Memorandum
はじめに Hello World アプリの準備 Hello World アプリのコンパイルと実行 jlink でカスタムJREを生成する モジュールイメージ ランチャーを生成 Gradle からイメージを作成 jlink-gradle プラグイン まとめ はじめに Java Platform Module System (JPMS) に合わせて導入された jlink。 jlink により、必要なモジュールに絞ったアプリケーションの配布イメージを簡単に作成することができます。 ここでは、コマンドラインから jlink を操作することから初め、Gradle によるイメージ作成方法までを説明します。 Hello World アプリの準備 最初にコマンドラインから jlink コマンドを操作することで、イメージ作成の流れを見てみましょう。 簡単なソースを準備します。 $ mkdir jlink $
Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
DMARCレポートを解析・可視化する parsedmarc を試してみた
こんにちは。 ご機嫌いかがでしょうか。 "No human labor is no human error" が大好きな吉井 亮です。 DMARC 対応していますか？ メール管理者の方々の苦労が目に浮かぶます。DAMRC レポートを受け取ってチェックするといった作業がしばらく続くことと想像します。 ただ、xml を解析するのは生産性が低い作業だと思います。少しでも楽をしたいと思います。 parsedmarc 今回は parsedmarc を使います。 parsedmarc は OSS の DMARC レポート解析と可視化ツールです。 xml 形式の人間には読みにくい DMARC レポートを読みやすく可視化してくれます。 私は試していないですが、IMAP 等でメールを読み込み、自動で解析してくれる機能もあるようです。 parsedmarc は Grafana と Elasticsearch
FigmaはなぜPayload CMSを買収したのか
2025年6月17日、FigmaはPayloadというCMSを提供する企業を買収しました。Figmaは、なぜCMSを買収したのか、なぜCMSの中でもPayloadなのかについて考察してみたいと思います。 Figmaのアナウンスはこちら Payloadのアナウンスはこちら 最近のFigmaの動向 Figmaは、2025年5月7日に開かれたConfig 2025で、Figma Sitesという新しい機能を発表しました。Figma Sitesとは、Figma上でデザインしたWebサイトをそのまま公開できる機能で、従来行なってきたデザインをもとにフロントエンドのコーディングを行ないWebサイトを実装するという一連の作業が不要になります。Figmaは単なるデザインツールではなく、ノーコード開発ツールへと進化を遂げようとしているわけです。 ただし、Webサイト開発と一口に言ってもその規模は大小様々です
Framelink Figma MCPを使用したSwiftUIのコード生成を試行錯誤する
概要 この記事では、Framelink Figma MCPという3rd party製のMCPを使用してFigmaのデザインからSwiftUIのコードをうまく生成するための試行錯誤について記します。 環境 Editor: Cursor 1.1.4 Model: Claude 4 まずは素朴に使ってみる 特に工夫せずにFigmaのURLを貼って実装を依頼してみます。 例えば、下記のようなGitHubアプリにおけるプロフィール画面のデザインを今回はお題としてみます。 Copy link to selection でレイアウトに対応するURLを取得し、Cursorのチャットに貼り付けて下記のように指示を与えます。 @https://www.figma.com/design/... こちらのデザインに対応するSwiftUIのコードを @ProfileScreen.swift に実装してください。 i
プロダクトを横断したFigmaコンポーネント構築 〜「インスタンスガイドライン」を策定した話〜
はじめに はじめまして！ レバテックでプロダクトデザイナーをしている成田です。 現在は日々のプロダクトデザインの業務に加え、デザインシステム『VoLT』の構築と運用に取り組んでいます。 なんとか社外公開まで漕ぎ着けた『VoLT』ですが、プロジェクトが開始してすぐの頃は「無理だ」と弱音を吐きたくなるほど課題が散見されていました。実際、私は何度も「え〜無理なんだが」と声に出しながら作業を進めていました（笑） 本記事では、Figmaでのコンポーネント管理の話を中心に、抱えていた課題を解決するために生み出した 「インスタンスガイドライン」 というものについてお話しできればと思います。 ちなみに、デザインシステム構築の背景や目的が書かれた記事も公開されているので、気になる方はぜひチェックしてみてください👏 何が難しい？レバテックのデザインシステム デザインシステムは、定義すること自体は難しくありま
Figma公式のDev Mode MCPサーバーでUIメンテナンスから解放されよう
はじめに こんにちは、ふるしょうです。 DRESS CODEは画面数が既に200を超えており、新規機能開発や既存機能の拡張が目まぐるしく進んでいます。 デザイントークンやタイポグラフィをデザインシステムとして運用していますが、画面内のレイアウトや複合コンポーネント、共通UIコンポーネントがFigmaのデザインデータと微妙に「ズレ」ていることが課題になってきています。(絶賛解消に向けて試行錯誤中🔥) 今回は、デザインデータとUIのズレを解消する手段として、2025年6月4日にベータリリースされたFigmaのDev Mode MCPサーバーとCursorを活用して既存画面のUIメンテナンスに取り組んだ事例について紹介します。 TL;DR Dev Mode MCPサーバーと Cursor を連携し、デザインデータと実装 UI のズレを爆速で修正 17ファイルをCursorとペアプロしながら約3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UI Effects - Easing demo