tag:speakerdeck.com,2005:/vivion tag:speakerdeck.com,2005:Talk/1569906 2026-07-20T09:51:51-04:00 2026-07-20T09:53:35-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1569900 2026-07-20T09:26:50-04:00 2026-07-20T09:31:37-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1555990 2026-06-18T04:03:14-04:00 2026-06-18T04:04:24-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1542683 2026-05-18T03:04:54-04:00 2026-05-18T03:06:02-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1532134 2026-04-22T01:09:33-04:00 2026-04-22T01:10:38-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1505169 2026-02-15T22:33:01-05:00 2026-02-16T20:45:36-05:00 こんにちは、viviONプロダクトデザインチームです！ 今年（2026年）に入ってますますAI関連の技術革新が加速しており、Figmaのデザインからコードを自動生成することも注目されています。 そこでよくFigma MCP（Model Context Protocol）という言葉を目にする機会も増えてきました。 実際には、存在は知っていても「導入するメリットがわからない」「何から始めたら良いのかわからない」という悩みがあったり、実際にやってみても「実装時のデザインの再現性が低い」「思っていたコードと違う」「修正に時間がかかる」など、現状難しいことも多いかもしれません。 その原因の多くは、AIがデザインの意図を読み取れず、「推測」で補完してしまうことにあります。 そこでviviONでは、Figma MCPを活用した実装生成において、AIが迷わず正確にコードを書けるようにデザイナーとフロントエンドエンジニアで協力して研究し、得た成果をまとめた「Figma MCPを活用するためのデザインハンドブック」を作りました。 今回は、その社内ハンドブック（β版）の内容を一部公開します。 より詳細な内容はnoteにて解説しています。 https://note.com/vivion_design/n/n0224e7cb851f?sub_rt=share_pw viviON (@vivion) tag:speakerdeck.com,2005:Talk/1452621 2025-10-16T06:52:40-04:00 2025-10-16T06:56:48-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1398432 2025-07-09T03:15:43-04:00 2025-07-09T03:42:20-04:00 viviON (@vivion) tag:speakerdeck.com,2005:Talk/1325059 2025-02-14T02:14:28-05:00 2025-02-14T02:17:16-05:00 https://note.com/vivion_design/n/n582bf710a67c viviON (@vivion) tag:speakerdeck.com,2005:Talk/978833 2023-01-19T02:14:57-05:00 2023-01-20T00:39:08-05:00 viviON (@vivion) 2026-07-20T09:51:51-04:00