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
͜ͷηογϣϯͰར༻ͨ͠ϓϩδΣΫτ