Figmaの思想と新機能

Config2023 Recap in Goodpatch
https://goodpatch.connpass.com/event/287493/

Twitter
https://twitter.com/__sakito__

Transcript

1. Figmaͷࢥ૝ͱ৽ػೳ $PO fi H
   3FDBQ
   JO
   (PPEQBUDI 
 DPO fi HHQ TBLJUP 
 αΠϘ΢ζגࣜձࣾ
   %FTJHO
   5FDIOPMPHJTU
2. TBLJUP
   
   !@@TBLJUP@@
   αΠϘ΢ζגࣜձࣾ
   c
   %FTJHO
   5FDIOPMPHJTU
   w೥
   wαΠϘ΢ζʹத్ೖࣾ͠
   ϑϩϯτΤϯυΤΩεύʔτνʔϜʹॴଐ΁
   w೥
   wϑϩϯτΤϯυΤΩεύʔτνʔϜ͔ΒσβΠϯγεςϜνʔϜΛ্ཱͪ͛΁
   w೥
   wLJOUPOFͷσβΠϯ੹೚ऀ
   wσβΠϯࣨͷϦʔμʔ
   w%FTJHO
   5FDIOPMPHJTUϚωʔδϟʔ
   wݘ͕޷͖ɻ 
 
 'JHNB$POGJH
   ͕ॳւ֎ʂʂʂ
   
3. wݱ஍Ͱͷ͸ͳ͠
   w৽ػೳͷ͸ͳ͠
   w'JHNBͷࢥ૝ʹ͋Δ'SFFGPSN
   %FTJHOͱ4USVDUVSFE
   
   %FTJHOͷ͸ͳ͠
   w'SFFGPSN
   %FTJHOͱ4USVDUVSFE
   
   %FTJHOͱ৽ػೳͷ͸ͳ͠
   w·ͱΊ ΞδΣϯμ
4. ݱ஍Ͱͷ͸ͳ͠
5. ඈߦػ͕ඈͼ·ͤΜͰͨ͠ UNITEDߤۭ͔Βͷ͝࿈བྷ
6. ཌ೔ɺແࣄʹαϯϑϥϯγεί΁౸ணʂ
7. 'JHNBΦϑΟεͷݟֶ΁
8. ೔ຊ͔ΒͷࢀՃऀୡͱͷަྲྀ w'JHNB
   +BQBOͷํୡ͕೔ຊ͔ΒͷࢀՃऀ༻ʹ 4MBDLνϟϯωϧΛ༻ҙͯ͘͠Ε͍ͯͨ
   w͞·͟·ͳاըɺϔϧϓɺҊ಺Λ͘͠Ε͍ͯͨ
   wظؒதͣͬͱ೔ຊ͔ΒࢀՃͨ͠ਓͨͪͰ͍Ζ ΜͳަྲྀΛ͢Δ͜ͱ͕Ͱ͖ͨ
   wαΠϘ΢ζ͔Β͸໊ࢀՃ
9. 'JHNB
   $POGJH
   ͷݱ஍ͷΑ͏͢ ձ৔ͷϝΠϯϗʔϧ ձ৔ͷٳܜϗʔϧ
10. ͞Βʹৄ͘͠͸OPUFͰʜ https://note.com/sakit0/n/n97427d94f612
11. ৽ػೳͷ͸ͳ͠
12. 'JHNB
    $POGJH
    
    ͓͢͢Ίηογϣϯ w$POGJH
    
    1SPEVDU
    -BVODI
    ,FZOPUF
    
    %ZMBO
    'JFME
    ,SJT
    3BTNVTTFO
    w,FZOPUF
    w"*
    BOE
    UIF
    GVUVSF
    PG
    %FTJHO
    %FTJHOJOH
    XJUI
    "*
    w'JHNBͱ"*ͷ׆༻ʹ͍ͭͯɺগ͠ະདྷͷ͸ͳ͠
    w%FFQ
    %JWF
    5SBJOJOH
    VOMPDL
    EFTJHO
    TZTUFN
    TDBMBCJMJUZ
    XJUI
    WBSJBCMFT
    w%FFQ
    %JWF
    5SBJOJOH
    BEWBODFE
    QSPUPUZQJOH
    XJUI
    MFTT
    DPNQMFYJUZ
    XJUI
    WBSJBCMFT
    w%FTJHOFS
    BOE
    EFWFMPQFS
    XPSLGMPXT
    VOMPDLFE
    VTJOH
    %FW
    .PEF
    w֤৽ػೳͷৄࡉ
13. ൃද͞Εͨ৽ػೳͨͪ IUUQTUXJUUFSDPN fi HNBTUBUVT 
    DevMode https://www. f igma.com/dev-mode/
14. ൃද͞Εͨ৽ػೳͨͪ 7BSJBCMFT
    IUUQTIFMQ fi HNBDPNIDFOVTBSUJDMFT 1SPUPUZQJOH
    IUUQTXXX fi HNBDPNQSPUPUZQJOH
    
15. ൃද͞Εͨ৽ػೳͨͪ Figma for VS CodeͰมΘΔσβΠϯͱ։ൃͷίϛϡχέʔγϣϯͱޮ཰ https://zenn.dev/sakito/articles/388ca64d3c7a36
16. ৽ػೳͨͪΛσβΠφʔ͕શ෦׬ᘳʹ͜ͳ͢ඞཁ͕͋Δʁେม͡Όͳ͍ʁ
    ࠜຊ͔Β੔ཧ͢ΔͨΊʹɺ'*HNBͷࢥ૝͔Βʜ
17. Figmaͷࢥ૝ʹ͋Δ 
 Freeform DesignͱStructured Designͷ͸ͳ͠
18. ࠓճͷ৽ػೳͷલఏ Ҿ༻ݩɿCon f ig 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen 8෼57ඵ͋ͨΓ w,FZOPUFͰ͸ɺʮσβΠϯޙظ͔Β࣮૷ϑΣʔζʹϑΥʔΧεͨ͠ʯͱ࿩Λ͍ͯ͠Δ
19. σβΠϯޙظ͔Β࣮૷ͷϑΣʔζͱ͸
20. σβΠϯͱ։ൃͷϓϩηε
21. ։ൃͷ࢓ࣄ͸෼ׂͰ͖Δ
22. ࣮͸σβΠϯ΋ࡉ෼ԽͰ͖Δ
23. ͦΕ͕'SFFGPSN
    %FTJHOͱ4USVDUVSFE
    
    %FTJHO
24. ݩʑ͸'JHNB͕ఏএ͍ͯ͠Δ΋ͷࢥ૝తͳ΋ͷʹ͋Δ 0QFOJOH
    ,FZOPUF
    
    $POGFSFODF
    ,JDLP ff
    
    4IP
    ,VXBNPUP
    4DIFNB
    
    
    IUUQTXXXZPVUVCFDPNXBUDI W#IPDP1256%&
25. 'JHNB͕Ͱ͖Δલ Ҿ༻ݩɿOpening Keynote - Conference Kicko ff - Sho Kuwamoto (Schema 2021)
26. 'JHNB͕Մೳʹ͢Δ͜ͱ Ҿ༻ݩɿOpening Keynote - Conference Kicko ff - Sho Kuwamoto (Schema 2021)
27. 'SFFGPSN
    %FTJHOͱ4USVDUVSFE
    %FTJHO Ҿ༻ݩɿOpening Keynote - Conference Kicko ff - Sho Kuwamoto (Schema 2021) w'SFFGPSN
    %FTJHO
    wΞΠσΟΞΛग़͠ɺσβΠϯΛ࡞ͬͯ͸յ͠ɺͲΜͳσβΠϯ͕ϕετͳͷ͔࡞ΔϑΣʔζ
    w4USVDUVSFE
    %FTJHO
    w'SFFGPSN
    %FTJHOͰߟ͑ΒΕͨσβΠϯΛ੔ཧ͠ɺΑΓ࣮૷ʹམͱ͠ࠐΈ΍͍͢Α͏ʹ͢ΔϑΣʔζ Ҿ༻ݩɿOpening Keynote - Conference Kicko ff - Sho Kuwamoto (Schema 2021)
28. 'JHNB͕ग़ͯ͘Δલͷ͸ͳ͠
29. 'JHNB͕࣮ݱ͢Δ͜ͱ ৽ػೳࠐΈ w'JHNBͱ͍͏πʔϧ্ͷػೳΛ࢖ͬͯίϛϡχέʔγϣϯΛղܾ͢Δ
    wσβΠϯޙظ͔Β࣮૷ͷϑΣʔζ΋Έ͑ͯ͘Δ
30. 'SFFGPSN
    %FTJHO 4USVDUVSFE
    %FTJHO #VJMEͰ෼͚ͯΈΔ w'SFFGPSN
    %FTJHO 4USVDUVSFE
    %FTJHOͷϑΣʔζͰ׆༻Ͱ͖Δػೳ͕͕ͪ͏
    wσβΠϯޙظ͔Β࣮૷ͷϑΣʔζ͸ɺ4USVDUVSFE
    %FTJHOͷ෦෼ʹ஋͢Δ
    w'SFFGPSN
    %FTJHO 4USVDUVSFE
    %FTJHO͸ԟ෮͢Δ
31. ֤ػೳͷϑΣʔζΛ৬ೳʹஔ͖׵͑ͯΈΔ wશ෦ͷػೳΛ׬ᘳʹ࢖༻͢Δඞཁ͸͸ͳ͍ɺ૊৫ʹΑͬͯ͞·͟·ͳ΍Γํ͕ݟ͑ͯ͘Δ
    wྫʣ
    wσβΠφʔ͕'SFFGPSN
    %FTJHO·ͰΛकඋൣғʹ͠ɺ4USVDUVSFE
    %FTJHOΛΤϯδχΞϦϯάಘҙͳσ βΠφʔ͕୲౰
    w4USVDUVSFE
    %FTJHOΛσβΠφʔͱΤϯδχΞͰڠۀ͍ͯ͘͠
    wฐࣾͷ৔߹͸ɺσβΠϯͱ։ൃΛލ͙%FTJHO
    5FDIOPMPHJTU͕͍ΔͷͰɺ໾ׂతʹ౰ͯ͸ΊΔ͜ͱ΋Ͱ͖Δ
    wݸਓͰ͸ؤுΔͷͰ͸ͳ͘ɺ૊৫ͱϓϩηεͷվળ΋ݟਾ͍͑ͯ͘΂͖Ͱ͸ʁ
32. Figmaτοϓϖʔδ 
 https://www. f igma.com/ Figma͸ίϥϘϨʔγϣϯΛՄೳͱ͢Δ΋ͷ
33. ৽ػೳͨͪΛσβΠφʔ͕શ෦׬ᘳʹ͜ͳ͢ඞཁ͕͋Δʁେม͡Όͳ͍ʁ 
 
    ΈΜͳͰίϥϘϨʔγϣϯͯ͠෢ثͱͯ͠࢖͍ͬͯ͜͏ʂ
34. ·ͱΊ w 'JHNB
    $POGJH
    ʹݱ஍ࢀՃͯ͠Α͔ͬͨʂʂ
    w 'JHNB
    +BQBOͷଘࡏ͕͋Δ͜ͱͰɺָ͠Ίͨ
    w σβΠϯͷϑΣʔζΛ෼ׂͰ͖Δ
    w 'SFFGPSN
    %FTJHOͱ4USVDUVSFE
    %FTJHO
    w ৽ػೳ͕ڧΈͱͳΔ෦෼Λ׆͔ͯ͠ɺ૊৫ͱϓϩηεʹ΋վળΛೖΕͯ՝୊ղ ܾ͍ͯ͜͠͏ʂ