💡 MCPの始め方シリーズについて Claude などの AI を強化する「MCP（Model Context Protocol）」の導入方法と活用テクニックのシリーズ。今回は、Figma MCP の導入方法と活用例を解説します。デザイナーとエンジニアの連携が格段にスムーズになり、開発効率が向上するはずです。 シリーズ目次 MCPの概要と導入方法 Filesystem MCP Server： AIでローカルファイルを扱う YouTube MCPサーバー：動画の内容を取得 mcp-pandoc： AIでドキュメント形式を変換 GitHub MCPサーバー： AIでリポジトリを管理 👉 Figma MCP：デザインとコードを効率的に連携 Slack MCPサーバー：チームコミュニケーションを強化 Firecrawl MCP：スクレイピングでウェブ情報を取得・分析 Markdownify M

はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか

「Figmaデータからコードの自動生成できたら良いのに！」 と思いますよね。 CursorではFigmaのスクショ画像からコード生成は可能でしたが、 細かなデザイン仕様を把握していないので結局一つ一つ修正する必要があることや、 スクショして貼り付けて説明してみたいなことが面倒に思っていました。 ただ最近、FigmaのMCP Serverなるものを知り、 使い方によってはかなり実装が楽にできたので共有します！ Figma MCP Serverについて MCPについては下記の記事がとても参考になったので詳しくは割愛しますが、 AIと特定の外部サービス（今回はFigmaのAPI）とのやり取りを行えるようになる仕組みのことです。 今回は下記のFigma MCP Serverを使用してFigmaのデザインデータを取得できるようにします🏃 MCP ServerからFigmaデータを取得する流れ 一応

「忙しいデザインや開発の現場で、新しいツールを試す時間がなくて…」そんな悩みを抱える方も多いのではないでしょうか？ でも、ツールの選択ひとつで、プロジェクトの効 […] Webデザイナー＆開発者必見！2024年公開の神ツール総まとめ80選はPhotoshopVIPで公開された投稿です。

🎄この記事はenechain Advent Calendar 2024の18日目の記事です🎅 こんにちは！enechainデザイナーのET(@et_universe)です！ JTC総合職やデザインファームでの経験ののち、今年の10月からenechainで働いています。 enechainでは、有志のエンジニアとプロダクトデザイナーによるデザインシステムチームが活動しており、私も入社直後からデザインシステムチームに参加しました。現在はFigmaのUIコンポーネントライブラリのページ構成や使いやすいコンポーネントの作りについて考え改善をしています。 ※デザインシステムについて、今までの経緯などはメンバーの記事が詳しいです！ techblog.enechain.com はじめに この記事では、「Figmaコンポーネントライブラリで便利なページ構成ってなんなんだろう？」「理想的なUIコンポーネン

Untitled UIブログで公開された「The Ultimate Guide to Creating Color Palettes in Figma (free Figma file)」より、許可をもらい日本語抄訳しています。 無料のFigmaライブラリとこの完全ガイドで、理想のカラーパレットを作ろう！ 色彩理論やアクセシビリティの基本、さらにオンラインやFigma内で使える便利な配色ツールを一挙にご紹介します。 「配色ツールを使ってみたけど、なんだかなんだかしっくりこない…」 そんな経験、ありませんか？私も同じ悩みを抱えていました。 そこで、Figmaで理想のカラーパレットを作れるように、実践的なガイドを用意しました。 このガイドでは、色彩理論やアクセシビリティ、色のコントラストなどの基本から、WebやUIデザインで役立つカラーパレットのつくり方まで、すべて網羅しています。 さあ、一緒

今のデザイン作業で、無駄な手間や時間を感じていませんか？ 忙しい毎日のデザイン作業において、時間がかかる平凡なタスクや反復作業はできるだけ省きたいですよね。 プロも初心者も関係なく、「これさえあれば」と思うツールがいくつもあります。 今回は、作業をシンプル化し、生産性を最大化するために役立つFigmaプラグインをご紹介します。 作業を効率化するプラグイン：プラグインを活用すれば、細かな調整や手間がぐっと減ります。 初心者にも優しい使いやすさ：どのプラグインも操作がシンプルで、すぐに使いこなせるのがポイントです。 SEOにも効果的：効率を高めるだけでなく、コンテンツの質も底上げできます。

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素です。 デザイントークンについて詳しく知りたい方はAdobe Blogに掲載されている以下の記事が参考になります。 デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 今回は、Figmaのプラグイン「Tokens Studio for Figma」（デザイントークン管理ツール）の基本編について書いてみたいと思います。本記事は、2024年8月時点の無料版に基づいたレビューです。 tokens studio公式サイト トークンの作成・定義 Primiti

リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー

みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの？ Figmaでどうやって設定するの？ という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに？ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで

ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり

アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると

Information ArchitectureFintech DesignAI DesignDesign SystemsBrand DesignContent DesignDesign SprintMobile DesignEnterprise DesignSolo DesignerAccessibility DesignGrowth Design

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ

Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots! Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots!

2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな

明確なドキュメントは、抽象的なデザイン原則を実用的なツールに変える役割を果たします。先進的なチームが、デザインシステムとともに進化する生きたドキュメントをどのように構築・維持しているかをご紹介します。

65インチ4K有機ELレグザがまさかの半額に!年末年始は映画にゲーム三昧もいいかも #Amazonセール

こんにちは。Technology部のいとしゅんです。 生成AIやノーコードツールなどの発達によりWeb制作の手段が増えている昨今ですが、海外で注目されている「Webflow」をご存じでしょうか？ 今回は、ノーコードツールWebflowの基本操作と応用的な使い方について紹介したいと思います。 Webflowとは？ Webflowは、実装者向けのノーコードツールといえます。 ノーコードというとプログラミング知識のない人向けのイメージを持ってる方も多いですが、本来は実装者の負担を減らし、効率よく実装するために作られたツールです。 Webflowはまだまだ機能的に充実しているわけではありません。ですが、CSSプロパティやインタラクションなど細部の設定ができるようになっており、実装の負担を減らすことに期待が持てます。 アカウント登録 Webflowの作業は全てブラウザ上で操作が可能です。利用するには