Figma MCP × Cursor との連携で実現する最強デザイン→コード変換ワークフロー

この記事では、Figma MCP × Cursor の組み合わせで、デザインからコードへの変換を劇的に効率化する方法を実践的に解説します。

Transcript

1. Figma MCP × Cursor Ͱ࣮ݱ͢Δ ࠷ڧσβΠϯˠίʔυม׵ϫʔΫϑϩʔ ;ΈϖϯˏCursorAIݚڀॴ 2025೥1 ⽉
2. ͸͡Ίʹ ͜ͷൃදͰղܾͰ͖Δ໰୊ ʮσβΠφʔ͔ΒFigmaͰड͚औͬͨσβΠϯΛɺ஧࣮ʹίʔυʹམͱ͠ࠐΉͷʹ࣌ؒ ͕͔͔Γ͗͢Δ...ʯ ͦΜͳ೰ΈΛ๊͑ΔϓϩάϥϚʔͷ ⽅ ʹ޲͚ͨ಺༰Ͱ͢ɻ
3. ͜ͷൃදͰಘΒΕΔޮՌ • FigmaσβΠϯΛ௚઀CursorͰಡΈࠐΜͰίʔυ ⽣ ੒Ͱ͖ΔΑ͏ʹͳΔ • σβΠφʔͱͷमਖ਼΍ΓऔΓ͕࠷ ⼩ ݶʹͳΔ • ॳظίʔυ ⽣ ੒ޙɺAIͱͷର࿩Ͱ100%͍ۙ׬੒౓·Ͱ͍͚࣋ͬͯΔ • Stagewiseͱͷ࿈ܞͰɺ͞Βʹ௚ײతͳमਖ਼͕ՄೳʹͳΔ
4. ैདྷͷ։ൃϑϩʔͷ՝୊ Α͋͘Δ ⾮ ޮ཰ͳϫʔΫϑϩʔ 1. σβΠφʔ͔ΒFigmaσβΠϯΛड͚औΔ 2. σβΠϯΛ ⾒ ͳ͕Β ⼿ ࡞ۀͰNext.jsͰίʔυΛॻ͘ 3. ΫϥΠΞϯτ͔Βʮ͜ͷ ⾊ Λม͑ͯʯʮυϩοϓμ΢ϯͷಈ͖Λม͑ͯʯͱमਖ਼ґ པ 4. ࠶౓ ⼿ ࡞ۀͰमਖ਼...ແݶϧʔϓ ݁Ռɿ1ͭͷը ⾯ Λ׬੒ͤ͞Δͷʹ਺͔࣌ؒΒ1 ⽇ ͔͔Δ
5. ໰୊ͷࠜຊݪҼ • σβΠϯͷղऍʹ͕͔͔࣌ؒΔ FigmaΛ ⾒ ͳ͕ΒCSSͷmargin΍paddingΛਪଌ • मਖ਼ͷͨͼʹ ⼿ ࡞ۀ σβΠφʔͱͷೝࣝζϨͰԿ౓΋मਖ਼ • ΠϯλϥΫςΟϒཁૉͷ࣮૷͕ࠔ೉ υϩοϓμ΢ϯ΍ϞʔμϧͷڍಈΛਖ਼֬ʹ࠶ݱ͢Δͷʹ͕͔͔࣌ؒΔ
6. ͳͥFigma MCP × Cursor͕ඞཁͳͷ͔ ैདྷπʔϧͱͷܾఆతͳҧ͍ ⼀ ൠతͳσβΠϯˠίʔυม׵πʔϧ͸ɺ੩తͳ ⾒ ͨ ⽬ ͔͠࠶ݱͰ͖·ͤΜ ͔͠͠ɺFigma MCP͸ҟͳΓ·͢ɿ • ΠϯλϥΫςΟϒཁૉ΋ਖ਼֬ʹಡΈऔΔ • σβΠϯͷҙਤΛཧղ • Cursorͱͷ׬ᘳͳ࿈ܞ
7. ղܾࡦɿஈ֊త׬੒౓Ξοϓઓུ ޮ཰తͳ3ஈ֊ϫʔΫϑϩʔ ϑΣʔζ1ɿॳظίʔυ ⽣ ੒ʢ׬੒౓60%ʣ Figma MCPͰσβΠϯΛಡΈࠐΈɺجຊతͳϨΠΞ΢τͱίϯϙʔωϯτΛ ⽣ ੒ ϑΣʔζ2ɿAIର࿩Ͱͷਫ਼៛Խʢ׬੒౓90%ʣ Cursorͱͷ4ʙ5ճͷର࿩Ͱɺࡉ͔͍ௐ੔ͱػೳ࣮૷ ϑΣʔζ3ɿStagewiseͰͷ࠷ऴௐ੔ʢ׬੒౓100%ʣ ϏδϡΞϧΤσΟλͰ௚ײతͳඍௐ੔
8. ޮՌ ैདྷͷ1/3ͷ࣌ؒͰ ⾼ ඼࣭ͳίʔυΛ ⽣ ੒ ͜ͷ3ஈ֊ͷΞϓϩʔνʹΑΓɺ։ൃ࣌ؒΛ ⼤ ෯ʹ୹ॖͰ͖·͢ɻ
9. ࣮ફνϡʔτϦΞϧ AI Document SummarizerΛ࡞ͬͯΈΑ͏ ࠓճ࣮૷͢ΔσβΠϯͷཁૉɿ • ϔομʔλΠτϧɿϝΠϯλΠτϧͱαϒλΠτϧ • AIϞσϧબ୒υϩοϓμ΢ϯɿGPT-4ɺClaude 3ɺGemini Pro͔Βબ୒ • ϑΝΠϧΞοϓϩʔυྖҬɿυϥοά&υϩοϓରԠ • ࣮ ⾏ ϘλϯɿʮSummarize Documentʯ
10. εςοϓ1ɿFigma MCPͷઃఆ Framelink Figma MCP ServerΛ࢖ ⽤ 1-1. Figma APIτʔΫϯͷऔಘ FigmaͷϗʔϜϖʔδ͔Βɺࠨ্ͷϓϩϑΟʔϧΞΠίϯΛΫϦοΫ υϩοϓμ΢ϯ͔ΒʮSettingsʯΛબ୒ ʮSecurityʯλϒΛબ୒ ʮPersonal access tokensʯͰτʔΫϯΛ ⽣ ੒
11. εςοϓ2ɿॳظίʔυ ⽣ ੒ Figma MCPͰσβΠϯΛಡΈࠐΈ 1. FigmaͷURL͔ΒϑΝΠϧΩʔΛऔಘ 2. CursorͰҎԼͷίϚϯυΛ࣮ ⾏ ɿ このFigmaデザインをReact + Tailwind で実装してください ݁Ռɿ໿60%׬੒౓ͷUI جຊϨΠΞ΢τ͸׬੒ ࡉ෦͸ௐ੔͕ඞཁ
12. εςοϓ3ɿAIͱͷର࿩Ͱਫ਼៛Խ ⽣ ੒͞ΕͨίʔυΛݩʹվળ 生成されたコードを確認しました。以下の点を修正してください： Select AI Model は左寄せでよろしくお願いします ͜ͷஈ֊Ͱͷվળɿ վળ͞ΕͨUIϓϨϏϡʔ ϨΠΞ΢τ͕FigmaσβΠϯʹΑΓ͍ۙͮͨঢ়ଶ جຊతͳΠϯλϥΫγϣϯ͕࣮૷͞Εͨঢ়ଶ
13. εςοϓ4ɿStagewiseͰͷ࠷ऴௐ੔ ࢹ֮తͳඍௐ੔Λ ⾏ ͏ 1. Cursorͷ֦ுػೳ͔ΒʮstagewiseʯͰݕࡧ 2. ্ͷλϒͰ >setuptoolbar Λ ⼊ ⼒ 3. stagewiseΛݱࡏͷίʔυʹಋ ⼊ 4. मਖ਼ՕॴΛબ୒ͯ͠ௐ੔ ࠷ऴతʹ100%ͷ׬੒౓Λ࣮ݱ
14. τϥϒϧγϡʔςΟϯά Α͋͘Δ໰୊ͱղܾࡦ ໰୊1ɿMCP઀ଓΤϥʔ͕ൃ ⽣ ͢Δ ղܾࡦɿ APIτʔΫϯͷ֬ೝ ݖݶͷ֬ೝʢFile contentͱDev resourcesͷಡΈऔΓݖݶʣ Cursorͷ࠶ىಈ ωοτϫʔΫ؀ڥͷ֬ೝ
15. τϥϒϧγϡʔςΟϯάʢଓ͖ʣ ໰୊2ɿॳظ ⽣ ੒ͷਫ਼౓͕ظ଴ΑΓ௿͍ ղܾࡦɿ FigmaσβΠϯͷ࠷దԽɿϨΠϠʔߏ଄Λ੔ཧ͠ɺҙຯͷ͋Δ໊લΛ෇͚Δ ίϯϙʔωϯτԽɿ࠶ར ⽤ ͞ΕΔཁૉΛίϯϙʔωϯτԽ ໌ ⽰ తͳπʔϧࢦఆɿget_codeπʔϧΛ࢖ͬͯɺ͜ͷϑϨʔϜΛReact + Tailwind Ͱ࣮૷͍ͯͩ͘͠͞
16. ·ͱΊ Figma MCP × CursorͷޮՌ • ։ൃ࣌ؒΛ ⼤ ෯୹ॖɿैདྷͷ1/3ͷ࣌ؒͰ࣮૷Մೳ • ⾼ ඼࣭ͳίʔυ ⽣ ੒ɿσβΠϯʹ஧࣮ͳ࣮૷ • ஈ֊తͳ׬੒౓޲্ɿ60% → 90% → 100%ͷ3ஈ֊Ξϓϩʔν • σβΠφʔͱͷ࿈ܞվળɿमਖ਼΍ΓऔΓ͕࠷ ⼩ ݶʹ
17. ࠓޙͷల๬ ͞ΒͳΔՄೳੑ • ΑΓෳࡶͳΠϯλϥΫγϣϯͷ ⾃ ಈ࣮૷ • σβΠϯγεςϜͱͷ࿈ܞڧԽ • νʔϜ։ൃͰͷޮ཰Խ • ϓϩτλΠϓ͔Βຊ൪ίʔυ΁ͷ௚઀ม׵
18. ࢀߟࢿྉ • Framelink Figma MCPެࣜΨΠυ • Figma MCP࠷৽৘ใʢGLips/Figma-Context-MCPʣ • Figma Dev Mode MCPެࣜυΩϡϝϯτ • Cursor MCPઃఆϚχϡΞϧ
19. ँࣙ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࣭໰ɾσΟεΧογϣϯͷ࣌ؒ Figma MCP × CursorΛ࢖ͬͨ։ൃମݧʹ͍ͭͯɺ ͥͻ͝ҙ ⾒ Λ͓ฉ͔͍ͤͩ͘͞ʂ