Figma MCPを活かすためのデータ作りとプロンプト 20パターンの検証で分かったこと - Qiita
概要 Figma MCPを使った高品質なコード生成を実現するために、Figmaデータをどのように作れば良いのか、どのようなプロンプトで指示を出せば良いかを調べました。 20パターンの検証で分かったことを記事にしています。 この記事で分かること Variables, Auto Layout, Layer Names, Annotationsが生成コードに与える影響 20パターンの検証結果と、各機能の組み合わせでの発見 最終的な推奨設定とプロンプトテンプレート 想定読者 Figma MCPを使ってコード生成したいデザイナー・エンジニア デザインシステムを構築しているチーム AIコード生成の品質を高めたい人 結論（先に知りたい方向け） 20パターンの検証を通じて得られた結論を先に示します。 詳細な検証過程は後述します。 推奨Figma設定 当たり前の結論かもしれませんが、全要素を有効にすることを
FigmaのデザインデータをAIに伝えるプラグイン「Figma Raw」を公開しました｜Yasuhiro Yokota
こんにちは、タイミーのプロダクトデザイナーの横田です。 誰でもFigmaからデザインをAIで正確に実装することができるツールをつくりました。 最近、AIを活用した開発フローが注目されています。 デザインデータから直接コードを生成したり、レビューを自動化したりといった試みも増えてきました。しかし、FigmaのデザインデータをLLMに正確に理解させるには、まだ工夫が必要だったり、ツールが制約されたりするのが現状です。Figmaでは公式のMCPのような仕組みはまだありません。 AIを活用した取り組みをやっている会社はちらほらあるけど、うちでやるにはどうやれば…？という方は多いのではないかと思います。 そこで今回、Figmaのデザインノード情報を詳細なJSON形式で出力するプラグイン「Figma Raw」を開発し、公開しました。 一言でいえば、FigmaのデザインをいろんなAIでコーディングできる
初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
Figmaに公開されている日本のデザインシステム系ファイル
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
日本でもメジャーなデザインツールとなった「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは、設定した
勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
今日から使える Figma ショートカット・時短の技術｜itou｜note
突然ですが、皆さん Figma 使ってますか？ 私は2,3ヶ月前から使い始めたのですが、デザインだけでなく付随するコミュニケーションや挙動の確認まで包括して行える Figma の便利さを日々実感しています。 最近ではデザインワークフローの一環として採用している企業も増えていると聞きます。その一方で、既に知見が広く共有されている Adobe 系や Sketch ほど作業ノウハウなどの記事がなく、皆さん手探りで使っている部分もあるかと思い、自分の知る範囲ではありますが業務の合間で Figma についての記事を発信し情報共有をやっていければと思っています。 かなり話を飛ばしますが、つい最近、納期に追われる Web 制作会社が舞台となる（書籍を映像化した）TV ドラマが放送されているのを見ました。 まさにパブリックなイメージ通りといった感じの労働環境が分かりやすく描かれていて、ついでに自分がまだデ
A complete guide to iconography
Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly
Figmaで色の変数管理をする🎨｜わたなべなつき
こんにちは！コネヒト株式会社デザイナーのなっぴーこと、わたなべなつきです。 コネヒトでは、最近SketchからFigmaに移行しました！まだまだ慣れない点も多く、日々、FigmaでのUI運用を試行錯誤しています。 今回は、そんな日々の試行錯誤の中で発見した、FigmaのLibrary機能を使って、色を変数管理する方法についてしたためてみました🎨 Sketch&Zeplin→Figma移行時の「色」に関する課題弊社ではこれまでSketchでUI制作後、ZeplinにUIデータをimportし、エンジニアさんにZeplinのUIデータを参照していただいていました。 Figma移行に伴い、エンジニアさんから「ZeplinのときはStyleguide機能があって、実装時に共通化する色がわかりやすかったけど、Figmaにはないの？」というご意見があがりました。 Figmaでも色に変数がつけられる！
Figmaを使ったリモートワークショップの可能性｜Takehisa Gokaichi
昨年末に書いた「できる！リモートワークでのUXデザイン」という記事に引き続き、今回はUXデザイン界隈の実践者に向けて、主にスマートルアーとGoodpatch Anywhereでの業務で見つけた「Figmaを使ったリモートワークショップの可能性」について語ってみます。 ※この記事に書かれている「ワークショップ」は、基本的に「UXデザインの現場におけるワークショップ」に限ったものです。ワークショップって何？ワークショップといえば「モノづくり会」や「体験型講習会」が一般的です。新人研修や外部セミナーでの意見交換会を想像される方もいるかもしれません。 一般的な学習は、答えが定まっていたり学ぶべき事柄が明確に決まっています。一方でワークショップは定まっていない答えを自ら探す活動です。授業のように、決まった内容、決まった答えを受動的に学ぶのではなく、ワークを通じて「気づき」や「発見」を得ることを促すた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.figma.com/community/plugin/1490907592288129044/sync-variables-with-notion
Design Systems For Figma
JSON from figma