Figma Dev Modeで変わる！Flutterの開発体験

Transcript

1. Figma Dev ModeͰมΘΔʂ Flutterͷ։ൃऀମݧ Flutter Kaigi 2024
2. w ౉෦ཅଠ
   ʢΑʔͨΜʣ
   w גࣜձࣾΏΊΈ
   औక໾$50
   w ஶॻ
   'MVUUFS࣮ફ։ൃ
   w
   !ZPIUB@XBUBOBWF ΑʔͨΜ
3. w גࣜձࣾΏΊΈɹσβΠϯςοΫϦʔυ
   w 6*σβΠφʔྺ೥ɹ'JHNBྺ೥
   w ௕ظϓϩδΣΫτͰ͸'JHNBͷ৽ػೳʹΑΓഁյతͳΠϊ ϕʔγϣϯΛ΋ͨΒ͞Ε͕ͪ ಸྑྠເඒʢͳΒΘɹΏΊΈʣ O@ @ ZVNFNJ
4. w ੇܶʮגࣜձࣾͶΉΈͷ೔ৗʯ
   w ੇܶৼΓฦΓɻͦͯ͠'JHNBͱ͸ʜ
   w 'JHNBʹͰ͖ͳ͍͜ͱɺͦΕΛ৐Γӽ͑Δώϯτ
   w 'JHNB͔Βιʔείʔυੜ੒ Contents
5. ੇܶ גࣜձࣾͶΉΈͷ೔ৗ
8. w %FW
   .PEFͱ͸ͳʹ͔
   w 'JHNBͱ͸ͳʹ͔
   w ͜ΕΒΛ׆༻͢Δ͜ͱͱ͸
   w͜ͷυϥϚ͸ϑΟΫγϣϯͰɺגࣜձࣾͶΉΈ͸Սۭͷا ۀͰ͢ɻ ੇܶΛৼΓฦΓɻͦͯ͠'JHNBͱ͸
9. w ΤϯδχΞ޲͚ͷ৘ใ͕ڧௐ͞Εͨ6*
   w ίʔσΟϯάʹ໾ཱͭػೳ
   w ϓϥάΠϯ
   
   ιʔείʔυੜ੒
   w 3FBEZ
   GPS
   EFW
   
   'PDVT
   WJFX
   w $PNQBSF
   DIBOHFT DevModeͱ͸Կ͔
10. DevModeͱ͸Կ͔
11. DevModeͱ͸Կ͔
12. DevModeͱ͸Կ͔
13. w 7BSJBCMFT
    ͱ
    7BSJBOUʢΧϥʔͷ໾ׂɺऔΓ͏Δঢ়ଶʣ
    w 3FBEZ
    GPS
    EFWʢσβΠϯͷεςʔλεʣ
    w $PNQPOFOUʢڞ௨8JEHFUͷઃܭʣ
    w 'SBNFͷ໊લʢઃܭҙਤʣ ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ
14. ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ
15. ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ
16. w 7BSJBCMFT
    ͱ
    7BSJBOU
    w 3FBEZ
    GPS
    EFWʢσβΠϯͷεςʔλεʣ
    w $PNQPOFOUʢڞ௨8JEHFUͷઃܭʣ
    w ֤'SBNFͷ໾ׂ ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ σβΠφ͞Μ͕఻͍͑ͨ͜ͱʂ
17. w σβΠφ͕σβΠϯ͢ΔɺઃܭΛՄࢹԽɾߏ଄Խ͢Δπʔ ϧ
    w σβΠφͷҙਤΛΤϯδχΞ໨ઢʹม׵ʢ%FW
    .PEFʣ͠ ͯ఻͑Δ
    w ͭ·ΓɺίϥϘϨʔγϣϯπʔϧ Figmaͱ͸
18. w σβΠφ͸ҙࢥΛ࣋ͬͨσβΠϯɺઃܭΛ͢Δ
    w 'SBNFͷ໋໊ɺ$PNQPOFOUɺ7BSJBOUͳͲ
    w ΤϯδχΞ͸σβΠφͷҙਤΛίʔυʹ൓өͤ͞Δ
    w σβΠφɾΤϯδχΞ͕ҙࢥૄ௨Λ͸͔Δ FigmaΛ׆༻͢Δ͜ͱͱ͸
19. w 'JHNBΛ׆༻ͨ͜͠ͱʹΑͬͯ
    w νʔϜͷҙࢥૄ௨͕͏·͍͘͘
    w ϓϩμΫτͷ੒ޭʹ޲͔ͬͯίϥϘϨʔγϣϯͰ͖Δঢ় ଶʹͳΔ
    w ΤϯδχΞ͸8JEHFUઃܭΛσβΠφͱڞಉͰߦ͏͜ͱ ੇܶͰ఻͔͑ͨͬͨ͜ͱ
20. FigmaʹͰ͖ͳ͍͜ͱ ͦΕΛ৐Γӽ͑Δώϯτ
22. w ΤϯδχΞͷ੒Ռ෺ΛσβΠφ͕ϨϏϡʔ͢Δػձ͕গͳ͍
    w ·ͨ͸λΠϛϯά͕஗͍ʢϓϧϦΫͷϚʔδޙʣ
    w ΤϯδχΞʢͷ੒Ռ෺ʣ
    ˠ
    σβΠφ΁৘ใ఻ୡ͕ߴίετ
    w ϕʔλϦϦʔε
    w ϨϏϡʔର৅ͷػೳ͕ਂ͍ͱ͜Ζʹ͋Δ
    w ঢ়ଶΛ࡞ΓͮΒ͍ ࣄ৅ͷݪҼ
23. ίϥϘϨʔγϣϯ్͕੾ΕΔ σβΠϯͱઃܭ 🤨 ࣮૷݁Ռ
24. ՝୊ͷղܾͷҰྫ σβΠϯͱઃܭ 🤝 WidgetBook
25. w 8JEHFU#PPL
    w 8JEHFUͷΧλϩάΛ࡞੒͢Δύοέʔδ
    w ༷ʑͳ৚݅Ͱ8JEHFUͷݟͨ໨΍ΠϯλϥΫγϣϯΛ֬ೝ
    w 8JEHFU#PPL
    $MPVE
    w 'MVUUFSϓϩδΣΫτ޲͚ͷίϥϘϨʔγϣϯπʔϧ
    w ඇΤϯδχΞͱͷϨϏϡʔϓϩηεΛศརʹ͢ΔαʔϏε WidgetBookͱ͸
26. ՝୊ͷղܾͷ΋͏Ұͭͷྫ σβΠϯͱઃܭ 🤝 Figma Rest API
27. Figma REST API w 'JHNB͸"1*Λఏڙ͍ͯ͠Δʂ
    w ୅දతͳ΋ͷ͸ͭ
    w 1MVHJO
    "1*
    w 8JEHFU
    "1*
    w 3&45
    "1*
28. %&.0
29. FigmaΛӽ͑ͨίϥϘϨʔγϣϯ w 'JHNBΛӡ༻͢Δ্Ͱى͜Γ͕ͪͳ՝୊ͱͦͷղܾ๏ͷྫΛ ঺հ
    wίϥϘϨʔγϣϯΛ్੾Εͤ͞ͳ͍
    w ֎෦࿈ܞػೳΛར༻ͯ͠ίϥϘϨʔγϣϯͷύεΛิ͏
    w 'JHNBϓϥάΠϯͰղܾ͢Δέʔε΋͋Δ
    w σβΠϯ޻ఔʹϑΥʔΧεͤͣɺશମΛଊ͑ͯӡ༻ઃܭ
30. ࠷ྑͳӡ༻͸Ұͭ͡Όͳ͍ w ࠷ྑͳӡ༻͸νʔϜ΍ϓϩμΫτɺ·ͨͦͷϑΣʔζʹΑͬ ͯมԽ͢Δ
    w ελʔτΞοϓͰ͸σβΠϯϑΝΠϧΛ౎౓ࣺͯͳ͕Β΋࠷ ଎Ͱ։ൃ͢Δ͜ͱ͕ඞཁͳ৔߹΋
    w 'JHNBͰѻ͏σβΠϯɾઃܭͷϥΠϑαΠΫϧ͕௕͘ͳͬͯ ͖ͨΒɺ࣋ଓՄೳͳӡ༻ͷػӡ͔΋஌Εͳ͍
31. Figma͔Β ιʔείʔυੜ੒
32. DevModeͰͷίʔυੜ੒ w J04΍"OESPJEͷ6*ίʔυɺ$44ͷੜ੒͸'JHNB͕αϙʔτ
    w 'MVUUFSͷίʔυੜ੒͸αʔυύʔςΟͷϓϥάΠϯ͕ଟ਺
    w ϘΠϥʔϓϨʔτίʔυΛੜ੒ͯ͘͠ΕΔϓϥάΠϯ͸👍
    w 8JEHFUΛੜ੒͢Δ৔߹ɺϓϥάΠϯͰ͸ෆे෼ʁ
33. Figmaͱੜ੒AIΛ૊Έ߹Θͤͯίʔυੜ੒ ը૾ͱ+TPO Dartίʔυ
34. CursorΤσΟλΛར༻ w $VSTPSͱ͍͏ੜ੒"*࿈ܞʹಛԽͨ͠ΤσΟλ
    w 74$PEF͕ϕʔεʹͳ͍ͬͯΔͷͰ'MVUUFS։ൃʹ΋⭕
    w ϓϩδΣΫτͷίʔυɺίʔσΟϯάϧʔϧͳͲ"*ʹ఻͑Β ΕΔίϯςΩετ͕ଟ͍ʢଟ͘ͷίϯςΩετΛ౉͢ମݧʹ ༏Ε͍ͯΔʣ
38. ը૾͚ͩͰ΋·ͣ·ͣͷ݁Ռ
39. Cursor rules w ҎԼΛϧʔϧʹࢦఆ
    w ΞϓϦͷσβΠϯ͸ը૾ϑΝΠϧʹै͏
    w σβΠϯ͸ը૾ϑΝΠϧΛ஧࣮ʹ࠶ݱ͢Δ͜ͱɻͦͷͨΊʹɺ ϑΥϯταΠζ΍༨നͳͲͷύϥϝʔλ͸KTPOϑΝΠϧΛಡΈ औΔɻ
40. ը૾͚ͩͰ΋·ͣ·ͣͷ݁Ռ
41. ࣮૷ํ๏͕෼͔͍ͬͯΔͳΒࢦࣔͰमਖ਼Մೳ
42. ͨ͘͞Μͷ৘ใΛ༩͑ΔͱΑΓਖ਼֬ʹͳΔ
43. Figmaͱੜ੒AIͰWidgetͷίʔυੜ੒ w $POUFYUͷ෇༩Λ޻෉͢Ε͹ɺ֓ͶσβΠϯʹ͍ۙ΋ͷΛੜ ੒͢Δ͜ͱ͸Մೳ
    w શͯΛσβΠϯ௨ΓʹҰܸͰੜ੒͢Δͷ͸ɺ·ͩ೉͍͠
    w ඍௐ੔͢Δ৔߹ɺ࣮૷ํ๏Λ஌Βͳ͍ͱࢦࣔͰ͖ͳ͍৔߹ ΋
44. Figmaͱੜ੒AIͰWidgetͷίʔυੜ੒ w 'JHNBΛ׆༻͢Δͱ͍͏ҙຯͰ͸ɺσβΠφͷҙਤΛੜ੒"* ʹ఻͍͑ͯ͘
    w $PNQPOFOUຖʹίʔυΛੜ੒
    w 7BSJBCMFTΛҰׅੜ੒͠ɺ$POUFYUͱͯ͠෇༩
    w ͕࣌ؒղܾ͢Δ෼໺Ͱ΋͋Δɻࠓޙͷల։ʹظ଴ʂ
45. w %SFBN
    $BDIFSʢ(JU)VCʣ
    
    w %SFBN
    $BDIFS
    'JHNB
    
    QBTTXPSE
    SJWFSQBTUFUBXOZHMPX
    w 8JEHFU#PPL
    $MPVE
    ͜ͷηογϣϯͰར༻ͨ͠ϓϩδΣΫτ౳