Figmaの思想と新機能

by sakito

Slide 1

Slide 1 text

Figmaͷࢥ૝ͱ৽ػೳ $PO fi H3FDBQJO(PPEQBUDI   DPO fi HHQ TBLJUP   αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ݱ஍Ͱͷ͸ͳ͠

Slide 5

Slide 5 text

ඈߦػ͕ඈͼ·ͤΜͰͨ͠ UNITEDߤۭ͔Βͷ͝࿈བྷ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

'JHNBΦϑΟεͷݟֶ΁

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

৽ػೳͷ͸ͳ͠

Slide 12

Slide 12 text

'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֤৽ػೳͷৄࡉ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Figmaͷࢥ૝ʹ͋Δ   Freeform DesignͱStructured Designͷ͸ͳ͠

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

։ൃͷ࢓ࣄ͸෼ׂͰ͖Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

'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)

Slide 28

Slide 28 text

'JHNB͕ग़ͯ͘Δલͷ͸ͳ͠

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

৽ػೳͨͪΛσβΠφʔ͕શ෦׬ᘳʹ͜ͳ͢ඞཁ͕͋Δʁେม͡Όͳ͍ʁ   ΈΜͳͰίϥϘϨʔγϣϯͯ͠෢ثͱͯ͠࢖͍ͬͯ͜͏ʂ

Slide 34

Slide 34 text

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