FigmaがMCPサーバーを導入しました。使い方はこちらです。
AIを使ってデザインプロセスを変革しようとしていますか？実は、MCP（モデルコンテキストプロトコル）は、FigmaのデザインとClaude、Windsurf、Cursor、Clineなどの大規模言語モデル（LLM）が簡単に連携できるようにする、全く新しいゲームチェンジャーです。このステップバイステップガイドでは、Figma MCPが何か、どのように機能するのか、そしてこの素晴らしいツールを始める方法を探っていきましょう。 buttonFigma-MCPとは？Figma-MCPは、モデルコンテキストプロトコルを実装したサーバーであり、LLMがFigmaリソースとやり取りするための標準化されたコンテキスト提供を可能にします。この統合により、デザイナーや開発者はAIを活用してデザインタスクを自動化し、コラボレーションを強化し、ワークフローを効率化できます。 Figma-MCPはどのように機能しま
Figmaマスターファイル運用をやめてみた｜川上ヒロ
株式会社ダイニーでデザインマネージャーをやっている川上です。 ダイニーのデザインチームでは、この師走の時期に一つの意思決定を行いました。それは、マスターファイルの運用をやめたことです。そこに至った経緯について書いていきます。 💡 マスターファイルとは ここで言うマスターファイルとは、各プロダクトごとの全画面のデザインを集約したFigmaファイルを指しています。 マスターファイルを運用していた理由ダイニーでマスターファイルの運用をしていた理由は大きく3つありました。 プロダクトの全画面を一望することで、全体像を俯瞰的に把握し、一貫性を保ちながら車輪の再発明を防ぎやすくなるため。 新規デザインを作成する際に、類似する画面を参照してテンプレートとして活用するため。 デザイナー以外もマスターファイルを参照することで、各プロダクトの画面をヘルプサイトや資料、プレスリリースやマーケティングなどの素材
FigmaのVariablesをダミーデータに活用したら、作業効率が格段にアップした話｜かんちゃん
こんにちは。hacomonoのプロダクトデザイナーのかんちゃんです。 2024年1月で入社して1年が経ちました。 hacomonoは店舗運営のためのプラットフォームを提供しているサービスです。 まだまだ発展途上なデザインチームで「本質的な業務にどう時間を割くのか？」はとても大きな課題だなと感じる毎日です。 FigmaのVariablesを使って作業効率を上げたいと考えているデザイナーさん、多いのではないでしょうか？ この記事はそんな方のお役に立つと嬉しいです。 FigmaのVariablesとは？Variables（バリアブル）とは、Figmaで使用できる変数のことです。 そもそもVariablesの事を知らない方は公式のこちらをどうぞ。 hacomonoの他のメンバーもVariablesに関する記事を書いています。そちらも興味があったらぜひ読んでみてください。 Variablesをダミー
FigmaとAIを組み合わせたインタラクティブなユーザーテストの実践 Friends of Figma Tokyo 忘年会2024 LT｜りゅー
FigmaとAIを組み合わせたインタラクティブなユーザーテストの実践 Friends of Figma Tokyo 忘年会2024 LT こんばんは。Aメンタルパートナーアプリ 「アウェアファイ」でデザイナーをしているりゅー(@ryuki_kyoto)です。 「ファイさん」というAIメンタルパートナーが、深夜2時でもずっと話を聞いてくれたり、心理学に基づくおすすめのメンタルケアを提案してくれるような体験を提供しています。 他にもルーティン機能や心理学について学べるコンテンツなど、すべての人の生活をサポートするアプリです。 今日は、ファイさんがLTのサポートをしてくれます。 ファイさんだけでも覚えて帰っていただけると嬉しいです。 AI体験における検証の課題では本題に入ります。 AI体験の検証って、むずかしくないですか？ 具体的には、AIの出力こそが体験の肝なのに、「AIとやり取りできないプロ
Figmaコンポーネント・スタイル整理におすすめのプラグイン6選 - necco Note | necco inc.
ウェブサイトやUIデザインの際に便利なFigmaのコンポーネント、テキストやカラーのスタイル登録。 プロジェクトの途中でスタイルが変更になったり、コンポーネントがどんどん増えたり… デザイナーやエンジニアなど、チームの誰にとっても分かりやすく整理するのって意外に大変なんです！ そこで今回は、Figmaでのコンポーネント・スタイル整理が楽になる便利なブラグインを6つご紹介します。 UIデザインを行うデザイナーが、実際に業務に使って便利だったものばかりですので、ぜひ一度試してみてください！ 1.スタイル未登録のテキストやカラーをリスト化できる「Design Lint」 スタイルが適用されていないテキストやカラー要素をリスト化してくれるプラグイン。 その場で一括選択して、スタイルを充てることもできるので便利です！ テキストやカラーの他にも、角丸やドロップシャドウなどもリスト化可能です。 未登録の
Figmaのレイヤー名を連番で整理！効率アップのための手順
はじめに Figmaで作業をしていて、レイヤーを整理したくなる場面はありませんか？ 今回はFigmaのデフォルトの機能とプラグインを使用して、効率良くレイヤーを整理する方法を解説します。 レイヤー名を一括変更 まずはレイヤー名を一括で変更する機能を使ってみましょう。 変更したいレイヤーを全て選択し、『command』+『R』でウィンドウを開きます。 今回は「box01,box02,box03～」と連番を振っていきます。 「変更後の名前」の箇所に「box」と記入した後に『番号↑』をクリックします。 すると「box$nn」と記入されました。 左側にプレビューがあるので上手く反映されているか確認します。 問題なければ右下の「名前を変更」を選択しましょう。 レイヤーを確認すると、きちんと「box01,box02,box03～」と名前が変更されていますね。 レイヤーの順序整理 次に、先ほど連番を振っ
Figmaのプラグインで、特定のノードを取得する方法
デザインエンジニアのりょーたです。 最近、「FigTodo」というFigmaのプラグインをリリースしました✨ 簡単にいうと、期限や担当者を設定できるタスク管理ツールなのですが、機能の１つに、アンカーリンクの作成があります。外部リンク（figmaファイル内の選択範囲へのリンクでない）であればブラウザでページを開き、ファイル内の特定のノードへのリンクであれば、そのノードの位置に移動します（下記参照） ノードとは Figmaにおけるノード（以降Nodeと記載します）とは、Figmaのドキュメント内の個々のオブジェクトや要素を表現するものであり、図形やテキスト、グループやセクションなど様々なオブジェクトに一意のIDが割り当てられています。 この記事は、取得したNodeの位置に移動させる処理を実装するのに試行錯誤したため、その手順について共有します。 この記事で紹介するのは、デバッグをしつつ考えた方
Figma APIで特定File内の任意のFrame名を全てクリップボードにコピーする - Qiita
@xrxoxcxox さんのcurlでやる方法ではなく、JavaScriptでやる方法です。 やりたいこと 下記のようなことを想定しています。 FigmaのFrame名を画面名やIDにしており、それをスプレッドシート等で管理（一覧化）するために、Figmaから対象のFrame名一覧を取得したい どうやるか DevToolsのConsoleを利用し、JavaScriptで取得する 手順 下記のような手順で実行します。 Figmaの該当ファイルを開く ⌘ + Option + I or Ctrl + Shift + I でDevToolsを開き、Consoleタブを開く 抽出したいFigmaのFrameを選択する 後述するコードをConsoleに貼り付けて実行する クリップボードに選択したFrame名がコピーされるので、それをスプレッドシートなどに貼り付ける
【初心者向け】Figmaの便利Tips8選｜セブンデックス
Figmaはコラボレーションツールという通り、デザイナー以外の方にも多く利用されています。 セブンデックスでも、デザイン業務だけでなく様々なフェーズでディレクターやクライアントとFigmaを利用しています。 私は社内でちょこちょこFigma Tipsを流しているので、みなさんから使い方の質問をされることがよくあります。 自分が当たり前に使っていることでも、意外と「早く知りたかったです」と言ってもらえることが多いので、今回は私がよく聞かれる&よく使うTipsをご紹介します！ Tips以外にも、Figmaについて基礎から知りたい場合は以下の記事がおすすめです！ コピペ編 別のフレームの同じ位置に同じオブジェクトを配置したい 「同じところに見出しを入れたい！」という時は、コピー先のフレームを選択してからペースト（⌘command+V）すると、コピー元と同じ位置に配置されます。 また、複数フレーム
【Figma】おすすめのプラグインのご紹介！テキスト・フォント編① | Dezainaz Inc. |「デザインで世界を生き生きとさせる」（合同会社デザイナズ）
Figmaのプラグインは、普段のデザインの作業をより効率的に進めることができる機能です。 今回はフォントやテキストのデザインでお悩みの方におすすめしたいプラグインの中から、フォント選定やテキスト入力の際に役にたつプラグインをご紹介いたします！ ぜひ参考にしてみてくださいね！ フォント選定におすすめなプラグインフォントデザインを即座に確認「Japanese Font Picker」Figmaの仕様上、フォントを選ぶ際に表示されるタブには英語表記だけで、日本語だとどのようなフォントデザインになるのかが分かりづらいです。 気に入ったフォントを実行してみると、日本語対応していなかった…なんてこともあると思います。 このプラグインは日本語のフォントデザインを即座に確認することができるものです。 使い方は通常のプラグインと同様に、プラグインの検索窓からJapanese Font Pickerを実行する
Figma Plugin「Pie Chart Generator」を作りました - feb19
Figma Plugin「Pie Chart Generator」を作りましたdate2024.7.23(Tue.)tagsPluginsFigmaDesign 円グラフが作れる Figma プラグイン「Pie Chart Generator」を公開しました。シンプルなものが欲しかったので作りました。 行区切りで値を入力し、Create で円グラフが作れます。Google 風の Colorful なカラースケールや、グレースケール、単色スケールなどのカラープリセットを用意しています。※それぞれのパーツはレイヤーに分かれており、編集可能な状態で生成できます。以前から使っていて無料公開する理由が特になかったのですが、有休消化期間で暇なのでなんとなく公開してみました。各所でご紹介いただけると幸いです！ ※ プリセットカラーには、オープンソースの Design System である Pattern
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/kenshir0f/status/1601026931931377664
Variables Modes remain visible in panel after deleting | Figma Forum
Gradients angle control after last update | Figma Forum
https://www.figma.com/community/file/1024066926350231135/storyboard-mix-and-match-library
https://www.figma.com/community/plugin/1404898839237603459/japanese-font-library
Figmaで作るマイクロインタラクションとアニメーション | C5log
Change Properties Variant Order
https://x.com/muuuuu_chang/status/1820701649452818819
https://www.figma.com/community/file/1372969251006652467/microsoft-fabric-visuals-kit