Slide 1

Slide 1 text

Figma Dev ModeͰมΘΔʂ Flutterͷ։ൃऀମݧ Flutter Kaigi 2024

Slide 2

Slide 2 text

w ౉෦ཅଠʢΑʔͨΜʣ w גࣜձࣾΏΊΈऔక໾$50 w ஶॻ'MVUUFS࣮ફ։ൃ w !ZPIUB@XBUBOBWF ΑʔͨΜ

Slide 3

Slide 3 text

w גࣜձࣾΏΊΈɹσβΠϯςοΫϦʔυ w 6*σβΠφʔྺ೥ɹ'JHNBྺ೥ w ௕ظϓϩδΣΫτͰ͸'JHNBͷ৽ػೳʹΑΓഁյతͳΠϊ ϕʔγϣϯΛ΋ͨΒ͞Ε͕ͪ ಸྑྠເඒʢͳΒΘɹΏΊΈʣ O@ @ ZVNFNJ

Slide 4

Slide 4 text

w ੇܶʮגࣜձࣾͶΉΈͷ೔ৗʯ w ੇܶৼΓฦΓɻͦͯ͠'JHNBͱ͸ʜ w 'JHNBʹͰ͖ͳ͍͜ͱɺͦΕΛ৐Γӽ͑Δώϯτ w 'JHNB͔Βιʔείʔυੜ੒ Contents

Slide 5

Slide 5 text

ੇܶ גࣜձࣾͶΉΈͷ೔ৗ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

w %FW.PEFͱ͸ͳʹ͔ w 'JHNBͱ͸ͳʹ͔ w ͜ΕΒΛ׆༻͢Δ͜ͱͱ͸ w͜ͷυϥϚ͸ϑΟΫγϣϯͰɺגࣜձࣾͶΉΈ͸Սۭͷا ۀͰ͢ɻ ੇܶΛৼΓฦΓɻͦͯ͠'JHNBͱ͸

Slide 9

Slide 9 text

w ΤϯδχΞ޲͚ͷ৘ใ͕ڧௐ͞Εͨ6* w ίʔσΟϯάʹ໾ཱͭػೳ w ϓϥάΠϯιʔείʔυੜ੒ w 3FBEZGPSEFW'PDVTWJFX w $PNQBSFDIBOHFT DevModeͱ͸Կ͔

Slide 10

Slide 10 text

DevModeͱ͸Կ͔

Slide 11

Slide 11 text

DevModeͱ͸Կ͔

Slide 12

Slide 12 text

DevModeͱ͸Կ͔

Slide 13

Slide 13 text

w 7BSJBCMFTͱ7BSJBOUʢΧϥʔͷ໾ׂɺऔΓ͏Δঢ়ଶʣ w 3FBEZGPSEFWʢσβΠϯͷεςʔλεʣ w $PNQPOFOUʢڞ௨8JEHFUͷઃܭʣ w 'SBNFͷ໊લʢઃܭҙਤʣ ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ

Slide 14

Slide 14 text

ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ

Slide 15

Slide 15 text

ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ

Slide 16

Slide 16 text

w 7BSJBCMFTͱ7BSJBOU w 3FBEZGPSEFWʢσβΠϯͷεςʔλεʣ w $PNQPOFOUʢڞ௨8JEHFUͷઃܭʣ w ֤'SBNFͷ໾ׂ ੇܶͷதͰ'JHNB͔Β఻Θͬͨ৘ใ σβΠφ͞Μ͕఻͍͑ͨ͜ͱʂ

Slide 17

Slide 17 text

w σβΠφ͕σβΠϯ͢ΔɺઃܭΛՄࢹԽɾߏ଄Խ͢Δπʔ ϧ w σβΠφͷҙਤΛΤϯδχΞ໨ઢʹม׵ʢ%FW.PEFʣ͠ ͯ఻͑Δ w ͭ·ΓɺίϥϘϨʔγϣϯπʔϧ Figmaͱ͸

Slide 18

Slide 18 text

w σβΠφ͸ҙࢥΛ࣋ͬͨσβΠϯɺઃܭΛ͢Δ w 'SBNFͷ໋໊ɺ$PNQPOFOUɺ7BSJBOUͳͲ w ΤϯδχΞ͸σβΠφͷҙਤΛίʔυʹ൓өͤ͞Δ w σβΠφɾΤϯδχΞ͕ҙࢥૄ௨Λ͸͔Δ FigmaΛ׆༻͢Δ͜ͱͱ͸

Slide 19

Slide 19 text

w 'JHNBΛ׆༻ͨ͜͠ͱʹΑͬͯ w νʔϜͷҙࢥૄ௨͕͏·͍͘͘ w ϓϩμΫτͷ੒ޭʹ޲͔ͬͯίϥϘϨʔγϣϯͰ͖Δঢ় ଶʹͳΔ w ΤϯδχΞ͸8JEHFUઃܭΛσβΠφͱڞಉͰߦ͏͜ͱ ੇܶͰ఻͔͑ͨͬͨ͜ͱ

Slide 20

Slide 20 text

FigmaʹͰ͖ͳ͍͜ͱ ͦΕΛ৐Γӽ͑Δώϯτ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

w ΤϯδχΞͷ੒Ռ෺ΛσβΠφ͕ϨϏϡʔ͢Δػձ͕গͳ͍ w ·ͨ͸λΠϛϯά͕஗͍ʢϓϧϦΫͷϚʔδޙʣ w ΤϯδχΞʢͷ੒Ռ෺ʣˠσβΠφ΁৘ใ఻ୡ͕ߴίετ w ϕʔλϦϦʔε w ϨϏϡʔର৅ͷػೳ͕ਂ͍ͱ͜Ζʹ͋Δ w ঢ়ଶΛ࡞ΓͮΒ͍ ࣄ৅ͷݪҼ

Slide 23

Slide 23 text

ίϥϘϨʔγϣϯ్͕੾ΕΔ σβΠϯͱઃܭ 🤨 ࣮૷݁Ռ

Slide 24

Slide 24 text

՝୊ͷղܾͷҰྫ σβΠϯͱઃܭ 🤝 WidgetBook

Slide 25

Slide 25 text

w 8JEHFU#PPL w 8JEHFUͷΧλϩάΛ࡞੒͢Δύοέʔδ w ༷ʑͳ৚݅Ͱ8JEHFUͷݟͨ໨΍ΠϯλϥΫγϣϯΛ֬ೝ w 8JEHFU#PPL$MPVE w 'MVUUFSϓϩδΣΫτ޲͚ͷίϥϘϨʔγϣϯπʔϧ w ඇΤϯδχΞͱͷϨϏϡʔϓϩηεΛศརʹ͢ΔαʔϏε WidgetBookͱ͸

Slide 26

Slide 26 text

՝୊ͷղܾͷ΋͏Ұͭͷྫ σβΠϯͱઃܭ 🤝 Figma Rest API

Slide 27

Slide 27 text

Figma REST API w 'JHNB͸"1*Λఏڙ͍ͯ͠Δʂ w ୅දతͳ΋ͷ͸ͭ w 1MVHJO"1* w 8JEHFU"1* w 3&45"1*

Slide 28

Slide 28 text

%&.0

Slide 29

Slide 29 text

FigmaΛӽ͑ͨίϥϘϨʔγϣϯ w 'JHNBΛӡ༻͢Δ্Ͱى͜Γ͕ͪͳ՝୊ͱͦͷղܾ๏ͷྫΛ ঺հ wίϥϘϨʔγϣϯΛ్੾Εͤ͞ͳ͍ w ֎෦࿈ܞػೳΛར༻ͯ͠ίϥϘϨʔγϣϯͷύεΛิ͏ w 'JHNBϓϥάΠϯͰղܾ͢Δέʔε΋͋Δ w σβΠϯ޻ఔʹϑΥʔΧεͤͣɺશମΛଊ͑ͯӡ༻ઃܭ

Slide 30

Slide 30 text

࠷ྑͳӡ༻͸Ұͭ͡Όͳ͍ w ࠷ྑͳӡ༻͸νʔϜ΍ϓϩμΫτɺ·ͨͦͷϑΣʔζʹΑͬ ͯมԽ͢Δ w ελʔτΞοϓͰ͸σβΠϯϑΝΠϧΛ౎౓ࣺͯͳ͕Β΋࠷ ଎Ͱ։ൃ͢Δ͜ͱ͕ඞཁͳ৔߹΋ w 'JHNBͰѻ͏σβΠϯɾઃܭͷϥΠϑαΠΫϧ͕௕͘ͳͬͯ ͖ͨΒɺ࣋ଓՄೳͳӡ༻ͷػӡ͔΋஌Εͳ͍

Slide 31

Slide 31 text

Figma͔Β ιʔείʔυੜ੒

Slide 32

Slide 32 text

DevModeͰͷίʔυੜ੒ w J04΍"OESPJEͷ6*ίʔυɺ$44ͷੜ੒͸'JHNB͕αϙʔτ w 'MVUUFSͷίʔυੜ੒͸αʔυύʔςΟͷϓϥάΠϯ͕ଟ਺ w ϘΠϥʔϓϨʔτίʔυΛੜ੒ͯ͘͠ΕΔϓϥάΠϯ͸👍 w 8JEHFUΛੜ੒͢Δ৔߹ɺϓϥάΠϯͰ͸ෆे෼ʁ

Slide 33

Slide 33 text

Figmaͱੜ੒AIΛ૊Έ߹Θͤͯίʔυੜ੒ ը૾ͱ+TPO Dartίʔυ

Slide 34

Slide 34 text

CursorΤσΟλΛར༻ w $VSTPSͱ͍͏ੜ੒"*࿈ܞʹಛԽͨ͠ΤσΟλ w 74$PEF͕ϕʔεʹͳ͍ͬͯΔͷͰ'MVUUFS։ൃʹ΋⭕ w ϓϩδΣΫτͷίʔυɺίʔσΟϯάϧʔϧͳͲ"*ʹ఻͑Β ΕΔίϯςΩετ͕ଟ͍ʢଟ͘ͷίϯςΩετΛ౉͢ମݧʹ ༏Ε͍ͯΔʣ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

ը૾͚ͩͰ΋·ͣ·ͣͷ݁Ռ

Slide 39

Slide 39 text

Cursor rules w ҎԼΛϧʔϧʹࢦఆ w ΞϓϦͷσβΠϯ͸ը૾ϑΝΠϧʹै͏ w σβΠϯ͸ը૾ϑΝΠϧΛ஧࣮ʹ࠶ݱ͢Δ͜ͱɻͦͷͨΊʹɺ ϑΥϯταΠζ΍༨നͳͲͷύϥϝʔλ͸KTPOϑΝΠϧΛಡΈ औΔɻ

Slide 40

Slide 40 text

ը૾͚ͩͰ΋·ͣ·ͣͷ݁Ռ

Slide 41

Slide 41 text

࣮૷ํ๏͕෼͔͍ͬͯΔͳΒࢦࣔͰमਖ਼Մೳ

Slide 42

Slide 42 text

ͨ͘͞Μͷ৘ใΛ༩͑ΔͱΑΓਖ਼֬ʹͳΔ

Slide 43

Slide 43 text

Figmaͱੜ੒AIͰWidgetͷίʔυੜ੒ w $POUFYUͷ෇༩Λ޻෉͢Ε͹ɺ֓ͶσβΠϯʹ͍ۙ΋ͷΛੜ ੒͢Δ͜ͱ͸Մೳ w શͯΛσβΠϯ௨ΓʹҰܸͰੜ੒͢Δͷ͸ɺ·ͩ೉͍͠ w ඍௐ੔͢Δ৔߹ɺ࣮૷ํ๏Λ஌Βͳ͍ͱࢦࣔͰ͖ͳ͍৔߹ ΋

Slide 44

Slide 44 text

Figmaͱੜ੒AIͰWidgetͷίʔυੜ੒ w 'JHNBΛ׆༻͢Δͱ͍͏ҙຯͰ͸ɺσβΠφͷҙਤΛੜ੒"* ʹ఻͍͑ͯ͘ w $PNQPOFOUຖʹίʔυΛੜ੒ w 7BSJBCMFTΛҰׅੜ੒͠ɺ$POUFYUͱͯ͠෇༩ w ͕࣌ؒղܾ͢Δ෼໺Ͱ΋͋Δɻࠓޙͷల։ʹظ଴ʂ

Slide 45

Slide 45 text

w %SFBN$BDIFSʢ(JU)VCʣ w %SFBN$BDIFS 'JHNB QBTTXPSESJWFSQBTUFUBXOZHMPX w 8JEHFU#PPL$MPVE ͜ͷηογϣϯͰར༻ͨ͠ϓϩδΣΫτ౳