Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figmaの思想と新機能

sakito
July 06, 2023

 Figmaの思想と新機能

sakito

July 06, 2023
Tweet

More Decks by sakito

Other Decks in Design

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