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

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

Transcript

1. Figma MCP × Cursor ͱͷ࿈ܞͰ࣮ݱ͢Δ ࠷ڧσβΠϯˠίʔυม׵ϫʔΫϑϩʔ σβΠϯ͔Βίʔυ΁ͷม׵Λܶతʹޮ཰Խ 1
2. ͜ͷهࣄͰղܾͰ͖Δ໰୊ ʮσβΠφʔ͔ΒFigmaͰड͚औͬͨσβΠϯΛɺ஧࣮ʹίʔυʹམͱ͠ࠐΉͷ ʹ͕͔͔࣌ؒΓ͗͢Δ...ʯ ͜ͷهࣄΛಡΉͱಘΒΕΔޮՌ FigmaσβΠϯΛ௚઀CursorͰಡΈࠐΜͰίʔυ ⽣ ੒ σβΠφʔͱͷमਖ਼΍ΓऔΓ͕࠷ ⼩ ݶʹ AIͱͷର࿩Ͱ100%͍ۙ׬੒౓·Ͱ౸ୡ Stagewiseͱͷ࿈ܞͰ௚ײతͳमਖ਼͕Մೳ ૝ఆಡऀɿ React/Next.jsܦݧऀɺCursorͱMCPαʔόʔͷجຊૢ࡞Λཧղ͍ͯ͠Δ ⽅ 2
3. ैདྷͷ։ൃϑϩʔͷ՝୊ͱݶք Α͋͘Δ ⾮ ޮ཰ͳϫʔΫϑϩʔ 1. σβΠφʔ͔ΒFigmaσβΠϯΛड͚औΔ 2. σβΠϯΛ ⾒ ͳ͕Β ⼿ ࡞ۀͰNext.jsͰίʔυΛॻ͘ 3. ΫϥΠΞϯτ͔Βमਖ਼ґཔ 4. ࠶౓ ⼿ ࡞ۀͰमਖ਼...ແݶϧʔϓ ໰୊ͷࠜຊݪҼ σβΠϯͷղऍʹ͕͔͔࣌ؒΔɿCSSͷmargin΍paddingΛਪଌ मਖ਼ͷͨͼʹ ⼿ ࡞ۀɿೝࣝζϨͰԿ౓΋मਖ਼ ΠϯλϥΫςΟϒཁૉͷ࣮૷͕ࠔ೉ɿυϩοϓμ΢ϯ΍Ϟʔμϧͷڍಈ࠶ݱ ݁Ռɿ1ͭͷը ⾯ Λ׬੒ͤ͞Δͷʹ਺͔࣌ؒΒ1 ⽇ 3
4. ͳͥFigma MCP × Cursor͕ඞཁͳͷ͔ ैདྷπʔϧͱͷܾఆతͳҧ͍ ⼀ ൠతͳσβΠϯˠίʔυม׵πʔϧ͸੩తͳ ⾒ ͨ ⽬ ͔͠࠶ݱͰ͖ͳ͍ Figma MCPͷ༏Ґੑ ΠϯλϥΫςΟϒཁૉ΋ਖ਼֬ʹಡΈऔΔ υϩοϓμ΢ϯͷ։ดɺϘλϯͷঢ়ଶมԽ σβΠϯͷҙਤΛཧղ ͨͩͷը૾ม׵Ͱ͸ͳ͘ɺσβΠϯγεςϜΛཧղ࣮ͨ͠૷ Cursorͱͷ׬ᘳͳ࿈ܞ AIͱͷର࿩Ͱஈ֊తʹ׬੒౓Λ ⾼ ΊΒΕΔ 4
5. ໰୊ղܾͷίϯηϓτɿஈ֊త׬੒౓Ξοϓઓུ ϑΣʔζ1ɿॳظίʔυ ⽣ ੒ʢ׬੒౓60%ʣ Figma MCPͰσβΠϯΛಡΈࠐΈɺجຊతͳϨΠΞ΢τͱίϯϙʔωϯτΛ ⽣ ੒ ϑΣʔζ2ɿAIର࿩Ͱͷਫ਼៛Խʢ׬੒౓90%ʣ Cursorͱͷ4ʙ5ճͷର࿩Ͱɺࡉ͔͍ௐ੔ͱػೳ࣮૷ ϑΣʔζ3ɿStagewiseͰͷ࠷ऴௐ੔ʢ׬੒౓100%ʣ ϏδϡΞϧΤσΟλͰ௚ײతͳඍௐ੔ ݁Ռɿैདྷͷ1/3ͷ࣌ؒͰ ⾼ ඼࣭ͳίʔυΛ ⽣ ੒ 5
6. ࣮ફνϡʔτϦΞϧɿAI Document SummarizerΛ࡞ͬͯΈΑ͏ ࢖ ⽤ ͢ΔαϯϓϧσβΠϯ ʮAI Document Summarizerʯͷཁૉɿ ϔομʔλΠτϧɿϝΠϯλΠτϧͱαϒλΠτϧ AIϞσϧબ୒υϩοϓμ΢ϯɿGPT-4ɺClaude 3ɺGemini Pro͔Βબ୒ ϑΝΠϧΞοϓϩʔυྖҬɿυϥοά&υϩοϓରԠ ࣮ ⾏ ϘλϯɿʮSummarize Documentʯ ࣮ࡍͷWebΞϓϦέʔγϣϯͰΑ͘࢖ΘΕΔύλʔϯͰԠ ⽤ ͕ར͘ 6
7. εςοϓ1ɿFigma MCPͷઃఆ Framelink Figma MCP ServerΛ࢖ ⽤ 1-1. Figma APIτʔΫϯͷऔಘ 1. FigmaͷϓϩϑΟʔϧΞΠίϯ → ʮSettingsʯ 2. ʮSecurityʯλϒ → ʮPersonal access tokensʯ 3. ৽͍͠τʔΫϯΛ࡞੒ 4. ඞཁͳݖݶΛઃఆ 1-2. CursorͰͷઃఆ { "mcpServers": { "figma": { "command": "npx", "args": ["@framelink/figma-mcp"], 7
8. εςοϓ2ɿσβΠϯͷಡΈࠐΈͱίʔυ ⽣ ੒ FigmaϑΝΠϧͷ४උ 1. σβΠϯϑΝΠϧͷURLΛऔಘ 2. ඞཁʹԠͯ͡node-idΛಛఆ CursorͰͷίʔυ ⽣ ੒ @figma このFigmaデザインをReact + Tailwind CSS で実装してください URL: https://www.figma.com/design/[file-key]/... ⽣ ੒௚ޙͷঢ়ଶ ࠨଆʹίʔυΤσΟλɺӈଆʹϓϨϏϡʔը ⾯ ໿60%׬੒౓ͷUIʢجຊϨΠΞ΢τ͸׬੒ɺࡉ෦͸ௐ੔͕ඞཁʣ 8
9. εςοϓ3ɿAIͱͷର࿩Ͱਫ਼៛Խ ۩ମతͳमਖ਼ࢦ ⽰ ྫ 生成されたコードを確認しました。以下の点を修正してください： Select AI Model は左寄せでよろしくお願いします ͜ͷஈ֊Ͱͷվળ఺ վળ͞ΕͨUIϓϨϏϡʔ ϨΠΞ΢τ͕FigmaσβΠϯʹΑΓ͍ۙͮͨঢ়ଶ جຊతͳΠϯλϥΫγϣϯ͕࣮૷͞Εͨঢ়ଶ 4ʙ5ճͷର࿩Ͱ׬੒౓90%·Ͱ౸ୡ 9
10. εςοϓ4ɿStagewiseͰͷ࠷ऴௐ੔ Stagewiseͷઃఆ 1. Cursorͷ֦ுػೳ͔ΒʮstagewiseʯͰݕࡧ 2. Πϯετʔϧޙɺ্ͷλϒͰ >setuptoolbar Λ ⼊ ⼒ 3. CursorͷAIνϟοτʹද ⽰ ͞ΕΔ ⽂ ষΛΫϦοΫ࣮ͯ͠૷ ࢹ֮తͳඍௐ੔ υϥοά&υϩοϓͰͷཁૉҠಈ ϦΞϧλΠϜͰͷελΠϧௐ੔ ௚ײతͳUIमਖ਼ ࠷ऴతʹ׬੒౓100%Λୡ੒ 10
11. τϥϒϧγϡʔςΟϯάͱ࣮ફతͳώϯτ Α͋͘Δ໰୊1ɿMCP઀ଓΤϥʔ ঱ঢ়ɿ ʮMCP server failed to startʯΤϥʔ ղܾࡦɿ 1. APIτʔΫϯͷ֬ೝ 2. ݖݶͷ֬ೝʢFile contentͱDev resourcesͷಡΈऔΓݖݶʣ 3. Cursorͷ࠶ىಈ 4. ωοτϫʔΫ؀ڥͷ֬ೝ Α͋͘Δ໰୊2ɿॳظ ⽣ ੒ͷਫ਼౓͕ظ଴ΑΓ௿͍ ղܾࡦɿ 1. FigmaσβΠϯͷ࠷దԽʢϨΠϠʔߏ଄Λ੔ཧʣ 11
12. ޮՌతͳ׆ ⽤ ͷϙΠϯτ σβΠϯ४උͷϕετϓϥΫςΟε ϨΠϠʔߏ଄Λ੔ཧɿҙຯͷ͋Δ໊લΛ෇͚Δ ίϯϙʔωϯτԽɿ࠶ར ⽤ ͞ΕΔཁૉΛ౷ ⼀ ঢ়ଶΛ໌֬ʹɿϗόʔɺΞΫςΟϒঢ়ଶ΋ؚΊΔ AIର࿩ͷίπ ۩ମతͳࢦ ⽰ ɿʮࠨدͤʹͯ͠ʯʮ ⾊ Λ#333ʹมߋʯ ஈ֊తͳमਖ਼ɿ ⼀ ౓ʹଟ͘ΛٻΊͣɺ1ͭͣͭվળ ࢹ֮తͳ֬ೝɿϓϨϏϡʔΛ ⾒ ͳ͕Βௐ੔ 12
13. ·ͱΊɿ։ൃޮ཰ͷܶతͳ޲্ ैདྷͷ։ൃ࣌ؒ 1ը ⾯ ͋ͨΓɿ ਺࣌ؒʙ1 ⽇ मਖ਼ରԠɿ ແݶϧʔϓ ඼࣭ɿ σβΠφʔͱͷೝࣝζϨ Figma MCP × Cursor׆ ⽤ ޙ 1ը ⾯ ͋ͨΓɿ 1ʙ2࣌ؒ मਖ਼ରԠɿ ࠷ ⼩ ݶ ඼࣭ɿ σβΠϯ஧࣮౓99% ։ൃ࣌ؒΛ75%୹ॖɺόάൃ ⽣ ཰Λ70%࡟ݮ 13
14. ࣍ͷεςοϓ ࠓ͙࢝͢ΊΒΕΔ͜ͱ 1. Figma APIτʔΫϯΛऔಘ 2. CursorʹϑϨʔϜϫʔΫઃఆ 3. αϯϓϧσβΠϯͰ࿅श ͞ΒͳΔޮ཰ԽͷͨΊʹ σβΠϯγεςϜͷߏங ίϯϙʔωϯτϥΠϒϥϦͷ੔උ νʔϜ಺ͰͷϫʔΫϑϩʔඪ४Խ ͋ͳͨͷ։ൃϫʔΫϑϩʔΛࠓ͙͢ม ⾰ ͠·͠ΐ͏ʂ 14
15. Q&AɾσΟεΧογϣϯ Α͋͘Δ࣭໰ Q: ෳࡶͳΞχϝʔγϣϯ΋࠶ݱͰ͖·͔͢ʁ A: جຊతͳτϥϯδγϣϯ͸Մೳɺෳࡶͳ΋ͷ͸ ⼿ ಈௐ੔͕ඞཁ Q: νʔϜ։ൃͰͷ׆ ⽤⽅ ๏͸ʁ A: σβΠϯγεςϜΛ౷ ⼀ ͠ɺίϯϙʔωϯτϥΠϒϥϦΛڞ༗ ͋ͳͨͷମݧΛγΣΞ͍ͯͩ͘͠͞ʂ 1. Figma MCPΛ࢖ͬͯΈͨ཰௚ͳײ૝͸ʁ 2. AIͱͷର࿩ͰಛʹޮՌతͩͬͨϓϩϯϓτ͸ʁ 3. ͋ͳͨͷνʔϜͰ͸ͲΜͳ׆ ⽤⽅ ๏Λߟ͍͑ͯ·͔͢ʁ 15
16. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Figma MCP × Cursor ͰɺσβΠϯ͔Βίʔυ΁ͷม׵Λ ⾰ ৽͠·͠ΐ͏ ࢀߟϦϯΫ Framelink Figma MCPެࣜΨΠυ Figma MCP࠷৽৘ใʢGLips/Figma-Context-MCPʣ Cursor MCPઃఆϚχϡΞϧ ࣭໰ɾ૬ஊ͸͓ؾܰʹͲ͏ͧʂ 16