Figma MCPを活用するためのデザインハンドブック

こんにちは、viviONプロダクトデザインチームです！
今年（2026年）に入ってますますAI関連の技術革新が加速しており、Figmaのデザインからコードを自動生成することも注目されています。
そこでよくFigma MCP（Model Context Protocol）という言葉を目にする機会も増えてきました。

実際には、存在は知っていても「導入するメリットがわからない」「何から始めたら良いのかわからない」という悩みがあったり、実際にやってみても「実装時のデザインの再現性が低い」「思っていたコードと違う」「修正に時間がかかる」など、現状難しいことも多いかもしれません。

その原因の多くは、AIがデザインの意図を読み取れず、「推測」で補完してしまうことにあります。

そこでviviONでは、Figma MCPを活用した実装生成において、AIが迷わず正確にコードを書けるようにデザイナーとフロントエンドエンジニアで協力して研究し、得た成果をまとめた「Figma MCPを活用するためのデザインハンドブック」を作りました。

今回は、その社内ハンドブック（β版）の内容を一部公開します。

より詳細な内容はnoteにて解説しています。

Transcript

1. Fi gm a R ule F i g m a M C P ™ ; ( Y ‰ _ † n Ç ¶ ¤ ó Ï ó É Ö Ã ¯ Card Title Connect { " r o l e " : " i m a g e " , " a l t " : " v i v i O N " } { " r o l e " : " t i t l e " , " l e v e l " : " 2 " } { " r o l e " : " b u t t o n " , " l a b e l " : " C o n n e c t " } ²H Ve r. 0 .1 ô° 202 6.02.0 5
2. î! SCO P Eˆ SnÐ ü¸ç óL i(U „‰Ä ò PA RT 1ˆ A IÆ Õ‰zk J Q‰ Fig maǶ¤ó×í »¹ Ç ¶¤ó ×í» ¹k‘‰™ ‡_ ›Y PA RT 2 ˆ Ë  nú ™\‰ } ‘ G ˆ ÷ D j O q ž ™ ı © Y ‰ Ë h } ‘ G n q A u t o L a y o u t k ‹ ‰  ó n  : ì ¹ Ý ó · Ö Ç ¶ ¤ ó n  ó n  : ¢ Î Æ ü · ç ó ˆ A I k c º j  : ™  H ‰ ¢ Î Æ ü · ç ó ˆ Ë  Ç ü ¿ k ‹ ‰ ı © È ü ¯ ó ˆ D e s i g n T o k e n s ¯ ê ü ó ¢ Ã × ˆ D a t a C l e a n u p PA RT 3 ˆ Õ£ü ÉÐà ¯ fij g² f‰ Õ£üÉ Ðïûµ ¤¯ë EXTRAˆ AI ÆÕ‰z nǶ¤ óÕØg
   Fig maåk ˘ Y ‰‡n ûûûûûûûûûûû û û ûûûûûûûûû P.3 ûûûûûûûûûûû û û ûûûûûûûûû P.4 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.5 ûûûûûûûûûûû û û ûûûûûûûûû P.6 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.7 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.8 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.9 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P. 10 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P. 11 -1 2 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P. 13 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.14- 15 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P. 16-1 7 ûûûûûûûûûûû û û ûûûûûûûûû P. 18 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P. 19 ûû ûû ûûû ûûû ûû ûûû ûû ûûû ûû û P.20
3. iÜ– F i g m a M C P ™ ) ( W f Å ˜  ™ L F U I Ç ¶ ¤ ó  , j Å ™ M Ð h W _ ; b û ³ ó Ý ü Í ó È  A I L ¨ , [ Z k ³ ü É  g M ‰ ¶ K ™ \ ‰ _ † n Ç ¶ ¤ ó  ³ ü Ç £ ó ° B o
   » ¯ · ç ó T h k Ç ¶ ¤ ó ™ Å ˜   iÜ ¢¤Ç¢˝  µ ”néÕ ‰_ î˝ <n n Ƕ ¤ó  M C P # : ™ M Ð h W j D Ç ¶ ¤ ó \ m  ³ ü Ç £ ó ° B o
   1 ; b  n Ú ü ¸ Ç ¶ ¤ ó ™ Å ˜   ͤ Æ£Ö¢ ×ê(n Ƕ¤ó i( ¹Õ Y y f ™ ¦ k ‹ ‰ Å † o B − ~ [ fi  ¹ Æ ü ¸ 2 ™ ¹ Æ ü ¸ 3 x µ ” — k i ( Y ‰ S h ™ ó ı W f D ~ Y  K ( n - g ‰  — 9 — ¹ L ú ‰ S h ™ M Ð h W f D ~ Y  Ðü ¸çó , ë ü ë o ² H  V e r . 0 . 1 g Y  K ( n Õ £ ü É Ð Ã ¯ ™ ‡ h k
   Å † h ˛ ‘ „ ‰ 9 — ¹ L B c _ 4  o ë ü ë L ô ° U „ ~ Y  SCO PE SnÐ ü¸ç óLi(U„ ‰Äò AIL¨,[Z
   XË û Xóg ÅgM ‰¶K™\ ‰
   F i g m a ë ü ë n i Ü k ÷ c _ ›
   Å S  k º “ W f O ` U D
   
4. A I Æ Õ ‰ z k J Q ‰ F i g m a Ç ¶ ¤ ó × í » ¹ Fig ma MC P
5. ¹Æ ü¸ 1 ¶K ˆë üëj W {| hf n† ™ ¨ , ¹Æü¸ 2 Car dWrap per Head erSecti o n Pr im ar yB utto n Ti tl eT e xt Ë h} ‘Gnq ³óÝ üÍóÈn ú,Ë ™“ X ¹Æü¸ 3 Auto La y o uth¢ÎÆü·çó 줢¦Èóh† nyr™ã z- in dex : 100 ¢ÎÆü·ç óAIÆÕ‰zkJQ‰Figma Ç ¶¤ó×í» ¹ Ƕ¤ó ×í»¹k ‘‰™ ‡_› Y ë ü ë n ! D ¨ , ™ — † f Ë ™ à H f  ó ™ c º k ˛ H ‹ F
   Fig ma MC Pk‹‰Ç ¶ ¤ ón“ þ ' = 80%L Ü üÀüé ¤ ó
   
6. Ë  nú™\‰
7. Com p on entûI nstance B u t t o n P r i m a r y C a r d R e s t a u r a n t Varian t ca melC ase p r i m a r y , s e c o n d a r y i c o n L e f t VariableûTok en kebab-c ase c o l o r - t e x t - p r i m a r y r a d i u s - s m .^ } ‰ } b ( UIè ÁnË ¶Kû Ðê¨ü· çó Ƕ ¤ó ^'$ Pa scal Case Ë n ú™ \ ‰ } ‘ Gˆ÷ Dj O q ž ™ı ©
8. WH ATˆ snB ‰s emantic } ™ ¹ŁY‰ Component / Instance: PascalCase（例: PrimaryButton） Frame: 役割を明示（例: Container, Section, Wrapper WHYˆÖ'j } o A In¤ã ™ ÛO  s n B ‰ M o
   A I L Ë ™ c W O  ã Y ‰ _ † n ˛ n  : g Y  Be for e Fr am e 10 24 Gro up 5 Rectangle 2 Tex t Aft er Card Wrappe r He ad er Se cti o n Pr im ary Bu tt on Ti tl eT ex t Ë h} ‘Gn q Ë n ú™ \ ‰ Ç ¶ ¤ ó ì ¤ ä ü n } k ÷ c _ › N u x t U I ™ Â  k W f O ` U D
   Nuxt UI Official Design Ki
9. WHATˆhf n † g Auto Lay o ut™ ( Frame n width/height kúı$Fixed ™(WjD WH Yˆfixe d o ì¹Ýó·Ö) Ê n' à A u t o L a y o u t o ì ¤ ¢ ¦ È n  ó ™ A I k c º k ˛ H ‰ / n ¹ Õ g Y  No A ut o Lay o ut Auto Layo ut Ë n ú™ \ ‰ Auto La yo u tk‹‰ ón:
10. Ë n ú™ \ ‰ ì¹Ý ó·Ö Ƕ ¤ ónó n : 10 De skt op De si gn Mo bi le D es ig n Tab let Design ì ¹ Ý ó · Ö Ç ¶ ¤ ó n “ þ ' ™ Ø † ‰ _ † k o
    Å † k Ü X f Ç ¹ ¯ È Ã × û ¿ Ö ì Ã È û â Ð ¤ ë ( n Ç ¶ ¤ ó ™ \  W f
    × í ó × È g  : W f O ` U D
    å n F i g m a Ç ¶ ¤ ó ™ Â g W f
     ı U „ _ U I ™ * * ì ¹ Ý ó · Ö Å W f O ` U D * *  Ç ¹ ¯ È Ã × Ç ¶ ¤ ó h t t p s : / / w w w . f i g m a . c o m / . . . . . â Ð ¤ ë Ç ¶ ¤ ó h t t p s : / / w w w . f i g m a . c o m / . . . . . ×í ó× È: ‰
    
11. ¢ÎÆ ü · çó ³áóÈ ¢ÎÆü·ç ó ,ı çM z- inde x: 1 00 11 ¢ Î Æ ü · ç ó o
    ‰ _ î ` Q g o ˛ ‘ › j D -   ó ™ A I k c º k ˛ H ‰ _ † k D ~ Y
    
12. @mcp-l ay out M n û E û Y } û ì ¹ Ý ó · Ö ˇ Õ j i
    ì ¤ ¢ ¦ È n  ó ™ ˘ ð  ‰ ˆ p o s i t i o n : a b s o l u t e @mc p-sty le r û ⁄ W û Ò 8 û q j i
    ¹ ¿ ¤ ë — È ü ¯ ó n  ı ™ ˘ ð  ‰ ˆ c o l o r : # f f f f f f @m cp -i nt er ac tio n H o v e r / P r e s s / F o c u s / D i s a b l e d j i ¶ K  n ë ü ë ™ ˘ ð  ‰ ˆ p o i n t e r - e v e n t s : n o n e @mcp-role † n  s  b u t t o n
    c a r d — z - i n d e x n ì ¤ ä ü ™ ˘ ð  ‰ ˆ z - i n d e x : 1 0 0 @m cp -a cce ss ibi li ty r o l e / a r i a - l a b e l / t a b  j i ¢ ¯ » · Ó ê Æ £ Å 1 ™ ˘ ð  ‰ ˆ a r i a - l a b e l : ˝ ˝ " ˛ z-index O Ln ãz Õ @m cp -la y out: pos ition: ab solute h@m cp-ro le: z -index : 100™D ‘ [ ‰Shg
    Ím  ™ AIk:—k :gM‰ ¢Î Æü·çó AIk c º j: ™H ‰ 5 d n ¢ Î Æ ü · ç ó û « Æ ´ ê ü ™ - ı W f ) ( Y ‰ S h g ¨ , L ˙ − “ þ ' L ¢ Ã × W ~ Y
    12
13. WHATˆÖ' h þ ™  sLºı W _JS O NË k Û ¬  — û ˜ ı — j h þ ™
    y r û ¶ K û 6  L  º j Ë Ç ü ¿ k = h W ¼ • S h g
    A I o ⁄  ™ ¨ , [ Z
    ı © U „ _  s ` Q ™ ] n ~ ~ Å k Û g M ‰  WH YˆAIn¨ Ö û ãÈnú „™¼ í k Y ‰ _† A I n $ ™ ™ d  8 k X  ó û X Ë g ³ ü É ™ ˜  g M ‰ ‹ F k Y ‰  ê6ž¨, @mcp- json ; b – g - à h j ‰ ³ ü ë È ¥ ¢ ¯ · ç ó Ü ¿ ó g Y  Ë  Çü¿ : @mcp- json { € " r o l e " : " b u t t o n " , € " v a r i a n t " : " p r i m a r y - c t a " } ¢ÎÆü·çóûË Çü¿k‹‰ı© A I L ‡ Š  h Y ‰ n o
    J S O N n ‹ F j Ö ' U n j D Ë  Ç ü ¿ ¢ Î Æ ü · ç ó n « Æ ´ ê ü k @ m c p - j s o n ™ - ı W f K › ) ( W f O ` U D
    ¨ , U „ L a j  Ñ j Ç ¶ ¤ ó — ¤ ó ¿ é ¯ · ç ó g J F
    ¤ ó Ç ó È o ¢ Î Æ ü · ç ó – g Í U „ ~ [ fi
    13
14. Èü¯ó( 14
15. Èü¯ ó Design Tokens W H A T ˆ ë ü ë k ¿ c f \  U „ _ L o c a l V a r i a b l e s / S t y l e s ™ ) ( Frame n width/height kúı$Fixed ™(WjD W H Y ˆ × í À ¯ È h S n Ó ¸ å ¢ ë L ê Õ g q U „ A I n ¨ , L † áóÆÊó¹ 'L Y ‰ Local V ariables se ctio ns sta ndar d/16 co mpo nen ts sta ndar d/12 modul es stan dard/8 M elem ents stan dard/4 sp Lo cal St yle s ¹¿¤ë ƹȹ¿¤ë Hea ding re gul ar 2xl û32/ 125 15
16. ¯êüó ¢ Ã× 16
17. ¯êüó ¢Ã× Dat a Cl e anu p W H A T ˆ ^ h : ì ¤ ä ü
    * ( ì ¤ ä ü
    s t r o k e : 0 p x n ‹ F j ´ ß ì ¤ ä ü o „ h k J d Í¹È W _ Frame oPkY‰ WHYˆ´ßì¤äüoAIk †jdiv™˜ Û B k † j Ë ~ g ³ ü É  U „ ‰ h
    Ý ‹ ý j ³ ü É L ˜ ~ „ ‰  *Proper t y n f alse™)(W_^h: ™dO Be for e Card Wrappe r He ad er Se cti o n Pr im ary Bu tt on Ti tl eT ex t FooterSecti o n Sub titl eTex t Af ter Card Wrappe r He ad er Se cti o n Pr im ary Bu tt on Ti tl eT ex t 17
18. Õ£ üÉ Ðï 18
19. Õ£ü É Ð Ã¯ 19 fij g²f ‰Õ£üÉÐà ¯ûµ¤¯ë INP U T - fi jnð L9 — n Õł ê O û ‚ O ˆ S S L  K › j D ™ ã ‹ W ‹ F ‰ ˆ S n 4  o i F i ( Y „ p D D g Y K ˜ õ g n ð − T h ˆ S S g d ~ e D _ ™ q W ‹ F ‰ ˆ f W f _ Q i
    ó ı h U F P œ k j c f & 9 — Ð H ˆ ‡ c h S F W _ › ˜ ™ Ð H W ‹ F ‰ ˆ S F D F ± ü ¹ ‡  n W _ ¹ L o U ] F å + ˆ S F W _ › K O D c _
    ™ … H ‹ F ‰ ˆ S fi j å + ™ W f ~ W _ PR OC ESS - å ‰™Æ†‹ F S S L  K › j D ™ ã ‹ W ‹ F
    ‰ ˆ S n 4  o i F i ( Y „ p D D g Y K ˜ gMjD‹−i FY„pgM‰˜™H‰ Sfi jS h^ DfD DnK j ˜ SS'S Î „§ ojD fi jg ëü뙲 f‰ OUTPUT - ‹−oDëüënu F i g m a Ï ó É Ö Ã ¯ n Ž ı — j 9 — A I Æ Õ ‰ z ¨ 2 k  Q _ F i g m a ë ü ë n Ö é à · å ¢ à ×
20. EXT R A AI Æ Õ ‰zn Ƕ¤ óÕ Øg
    Fi gm aå k˘ Y ‰‡n †öøûs0-ø FigmaのURL FIXデザイン ユーザーストーリー その機能を利用するときの体験 エッジケース・異常系の場合の大まかな挙動
 （ネットワークエラーの場合はダイアログ ³ó Æ ¹ÈÇ Ž ビジュアル・アイデンティティ デザインシステムについての情報 レスポンシブ対応方 20