Figmaの思想と新機能

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

Twitter
https://twitter.com/__sakito__

Transcript

1. Figmaͷࢥ૝ͱ৽ػೳ
   $PO
   fi
   H3FDBQJO(PPEQBUDI
   

   DPO
   fi
   HHQ
   TBLJUP
   

   αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU
   

   View Slide

2. TBLJUP!@@TBLJUP@@
   αΠϘ΢ζגࣜձࣾc%FTJHO5FDIOPMPHJTU
   w೥
   wαΠϘ΢ζʹத్ೖࣾ͠ ϑϩϯτΤϯυΤΩεύʔτνʔϜʹॴଐ΁
   w೥
   wϑϩϯτΤϯυΤΩεύʔτνʔϜ͔ΒσβΠϯγεςϜνʔϜΛ্ཱͪ͛΁
   w೥
   wLJOUPOFͷσβΠϯ੹೚ऀ
   wσβΠϯࣨͷϦʔμʔ
   w%FTJHO5FDIOPMPHJTUϚωʔδϟʔ
   wݘ͕޷͖ɻ
   

   

   'JHNB$POGJH͕ॳւ֎ʂʂʂ
   

   View Slide

3. wݱ஍Ͱͷ͸ͳ͠
   w৽ػೳͷ͸ͳ͠
   w'JHNBͷࢥ૝ʹ͋Δ'SFFGPSN%FTJHOͱ4USVDUVSFE%FTJHOͷ͸ͳ͠
   w'SFFGPSN%FTJHOͱ4USVDUVSFE%FTJHOͱ৽ػೳͷ͸ͳ͠
   w·ͱΊ
   ΞδΣϯμ
   

   View Slide

4. ݱ஍Ͱͷ͸ͳ͠
   

   View Slide

5. ඈߦػ͕ඈͼ·ͤΜͰͨ͠
   UNITEDߤۭ͔Βͷ͝࿈བྷ
   

   View Slide

6. ཌ೔ɺແࣄʹαϯϑϥϯγεί΁౸ணʂ
   

   View Slide

7. 'JHNBΦϑΟεͷݟֶ΁
   

   View Slide

8. ೔ຊ͔ΒͷࢀՃऀୡͱͷަྲྀ
   w'JHNB+BQBOͷํୡ͕೔ຊ͔ΒͷࢀՃऀ༻ʹ
   4MBDLνϟϯωϧΛ༻ҙͯ͘͠Ε͍ͯͨ
   w͞·͟·ͳاըɺϔϧϓɺҊ಺Λ͘͠Ε͍ͯͨ
   wظؒதͣͬͱ೔ຊ͔ΒࢀՃͨ͠ਓͨͪͰ͍Ζ
   ΜͳަྲྀΛ͢Δ͜ͱ͕Ͱ͖ͨ
   wαΠϘ΢ζ͔Β͸໊ࢀՃ
   

   View Slide

9. 'JHNB$POGJHͷݱ஍ͷΑ͏͢
   ձ৔ͷϝΠϯϗʔϧ
   ձ৔ͷٳܜϗʔϧ
   

   View Slide

10. ͞Βʹৄ͘͠͸OPUFͰʜ
    https://note.com/sakit0/n/n97427d94f612
    

    View Slide

11. ৽ػೳͷ͸ͳ͠
    

    View Slide

12. 'JHNB$POGJH͓͢͢Ίηογϣϯ
    w$POGJH1SPEVDU-BVODI,FZOPUF%ZMBO'JFME ,SJT3BTNVTTFO
    w,FZOPUF
    w"*BOEUIFGVUVSFPG%FTJHO%FTJHOJOHXJUI"*
    w'JHNBͱ"*ͷ׆༻ʹ͍ͭͯɺগ͠ະདྷͷ͸ͳ͠
    w%FFQ%JWF5SBJOJOHVOMPDLEFTJHOTZTUFNTDBMBCJMJUZXJUIWBSJBCMFT
    w%FFQ%JWF5SBJOJOHBEWBODFEQSPUPUZQJOHXJUIMFTTDPNQMFYJUZXJUIWBSJBCMFT
    w%FTJHOFSBOEEFWFMPQFSXPSLGMPXTVOMPDLFEVTJOH%FW.PEF
    w֤৽ػೳͷৄࡉ
    

    View Slide

13. ൃද͞Εͨ৽ػೳͨͪ
    IUUQTUXJUUFSDPN
    fi
    HNBTUBUVT
    
    DevMode
    
    
    https://www.
    f
    igma.com/dev-mode/
    
    
    

    View Slide

14. ൃද͞Εͨ৽ػೳͨͪ
    7BSJBCMFT
    IUUQTIFMQ
    fi
    HNBDPNIDFOVTBSUJDMFT
    1SPUPUZQJOH
    IUUQTXXX
    fi
    HNBDPNQSPUPUZQJOH
    

    View Slide

15. ൃද͞Εͨ৽ػೳͨͪ
    Figma for VS CodeͰมΘΔσβΠϯͱ։ൃͷίϛϡχέʔγϣϯͱޮ཰
    
    
    https://zenn.dev/sakito/articles/388ca64d3c7a36
    

    View Slide

16. ৽ػೳͨͪΛσβΠφʔ͕શ෦׬ᘳʹ͜ͳ͢ඞཁ͕͋Δʁେม͡Όͳ͍ʁ
    ࠜຊ͔Β੔ཧ͢ΔͨΊʹɺ'*HNBͷࢥ૝͔Βʜ
    

    View Slide

17. Figmaͷࢥ૝ʹ͋Δ
    

    Freeform DesignͱStructured Designͷ͸ͳ͠
    

    View Slide

18. ࠓճͷ৽ػೳͷલఏ
    Ҿ༻ݩɿCon
    f
    ig 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen 8෼57ඵ͋ͨΓ
    w,FZOPUFͰ͸ɺʮσβΠϯޙظ͔Β࣮૷ϑΣʔζʹϑΥʔΧεͨ͠ʯͱ࿩Λ͍ͯ͠Δ
    

    View Slide

19. σβΠϯޙظ͔Β࣮૷ͷϑΣʔζͱ͸
    

    View Slide

20. σβΠϯͱ։ൃͷϓϩηε
    

    View Slide

21. ։ൃͷ࢓ࣄ͸෼ׂͰ͖Δ
    

    View Slide

22. ࣮͸σβΠϯ΋ࡉ෼ԽͰ͖Δ
    

    View Slide

23. ͦΕ͕'SFFGPSN%FTJHOͱ4USVDUVSFE%FTJHO
    

    View Slide

24. ݩʑ͸'JHNB͕ఏএ͍ͯ͠Δ΋ͷࢥ૝తͳ΋ͷʹ͋Δ
    0QFOJOH,FZOPUF$POGFSFODF,JDLP
    ff
    4IP,VXBNPUP 4DIFNB
    
    IUUQTXXXZPVUVCFDPNXBUDI W#IPDP1256%&
    

    View Slide

25. 'JHNB͕Ͱ͖Δલ
    Ҿ༻ݩɿOpening Keynote - Conference Kicko
    ff
    - Sho Kuwamoto (Schema 2021)
    

    View Slide

26. 'JHNB͕Մೳʹ͢Δ͜ͱ
    Ҿ༻ݩɿOpening Keynote - Conference Kicko
    ff
    - Sho Kuwamoto (Schema 2021)
    

    View Slide

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)
    

    View Slide

28. 'JHNB͕ग़ͯ͘Δલͷ͸ͳ͠
    

    View Slide

29. 'JHNB͕࣮ݱ͢Δ͜ͱ ৽ػೳࠐΈ
    
    w'JHNBͱ͍͏πʔϧ্ͷػೳΛ࢖ͬͯίϛϡχέʔγϣϯΛղܾ͢Δ
    wσβΠϯޙظ͔Β࣮૷ͷϑΣʔζ΋Έ͑ͯ͘Δ
    

    View Slide

30. 'SFFGPSN%FTJHO 4USVDUVSFE%FTJHO #VJMEͰ෼͚ͯΈΔ
    w'SFFGPSN%FTJHO 4USVDUVSFE%FTJHOͷϑΣʔζͰ׆༻Ͱ͖Δػೳ͕͕ͪ͏
    wσβΠϯޙظ͔Β࣮૷ͷϑΣʔζ͸ɺ4USVDUVSFE%FTJHOͷ෦෼ʹ஋͢Δ
    w'SFFGPSN%FTJHO 4USVDUVSFE%FTJHO͸ԟ෮͢Δ
    

    View Slide

31. ֤ػೳͷϑΣʔζΛ৬ೳʹஔ͖׵͑ͯΈΔ
    wશ෦ͷػೳΛ׬ᘳʹ࢖༻͢Δඞཁ͸͸ͳ͍ɺ૊৫ʹΑͬͯ͞·͟·ͳ΍Γํ͕ݟ͑ͯ͘Δ
    wྫʣ
    wσβΠφʔ͕'SFFGPSN%FTJHO·ͰΛकඋൣғʹ͠ɺ4USVDUVSFE%FTJHOΛΤϯδχΞϦϯάಘҙͳσ
    βΠφʔ͕୲౰
    w4USVDUVSFE%FTJHOΛσβΠφʔͱΤϯδχΞͰڠۀ͍ͯ͘͠
    wฐࣾͷ৔߹͸ɺσβΠϯͱ։ൃΛލ͙%FTJHO5FDIOPMPHJTU͕͍ΔͷͰɺ໾ׂతʹ౰ͯ͸ΊΔ͜ͱ΋Ͱ͖Δ
    wݸਓͰ͸ؤுΔͷͰ͸ͳ͘ɺ૊৫ͱϓϩηεͷվળ΋ݟਾ͍͑ͯ͘΂͖Ͱ͸ʁ
    

    View Slide

32. Figmaτοϓϖʔδ
    

    https://www.
    f
    igma.com/
    
    
    Figma͸ίϥϘϨʔγϣϯΛՄೳͱ͢Δ΋ͷ
    

    View Slide

33. ৽ػೳͨͪΛσβΠφʔ͕શ෦׬ᘳʹ͜ͳ͢ඞཁ͕͋Δʁେม͡Όͳ͍ʁ
    

    ΈΜͳͰίϥϘϨʔγϣϯͯ͠෢ثͱͯ͠࢖͍ͬͯ͜͏ʂ
    

    View Slide

34. ·ͱΊ
    w 'JHNB$POGJHʹݱ஍ࢀՃͯ͠Α͔ͬͨʂʂ
    w 'JHNB+BQBOͷଘࡏ͕͋Δ͜ͱͰɺָ͠Ίͨ
    w σβΠϯͷϑΣʔζΛ෼ׂͰ͖Δ
    w 'SFFGPSN%FTJHOͱ4USVDUVSFE%FTJHO
    w ৽ػೳ͕ڧΈͱͳΔ෦෼Λ׆͔ͯ͠ɺ૊৫ͱϓϩηεʹ΋վળΛೖΕͯ՝୊ղ
    ܾ͍ͯ͜͠͏ʂ
    

    View Slide