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

Figmaが支えるVue Fes Japanのデザイン

448jp | OKI Yoshiya
September 13, 2019

Figmaが支えるVue Fes Japanのデザイン

2019年9月13日(金)DIST.28 「モダンWebデザインワークフロー2019」発表資料

448jp | OKI Yoshiya

September 13, 2019
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Design

Transcript

  1. ࿍㞐᩷త⎵ボ⩮త_త)UL
    ',67ర:HE೨೗೅ഔഐഝ೐೶എഝఱ
    ಑೨೗೅ഔ
    )LJPD౯ị౫ಮ

    View Slide

  2. ⎵ ボ⩮
    ౭౰ ಫ౺ ಧ
    ജ೅ഔೠഊ೐೘ഈഔ೨೗೅೫ഝ
    ജᏴ㖊ኽႧྐྵⲁᩏ
    ജហဵథᡘဵ
    #MS

    View Slide

  3. ‱ὅ౭㗋౺౼ಮ౶ಋ
    9XH)HV-DSDQಋ೨೗೅ഔ
    ಍౿)LJPDವ㤩ಶಃ಑౮
    ၀ᬣಎᐢ౴ಉ



    View Slide

  4. '(6,*1
    ⮀ಂ಄೨೗೅೫ഝ౯ὅ఩Ⴇಆಉ౧ಮಥ಑ಒႠಃರ౩䉉

    View Slide

  5. ⮀ಂ಄೨೗೅೫ഝ౯ὅ఩Ⴇಆಉ౧ಮಥ಑ಒႠಃರ౩䉉

    View Slide

  6. ⮀ಂ಄೨೗೅೫ഝ౯ὅ఩Ⴇಆಉ౧ಮಥ಑ಒႠಃರ౩䉉
    ೌഔ೸ಒ࿜㯒᳝₂⛸ద
    ೔ഀആ೬೒ഝ೘ഈഔವሼ┗ಎ
    ౼ಮಂತ಑ᴊ⌮ಊ౥ಮద
    ⢟⧣≉
    䈲ಡಟರ౺థ䈳

    View Slide

  7. &2'(
    ྐྵἧథ೉ഔ೙೬ೃಒ䉉

    View Slide

  8. ‒ⷒ᳝₂⛸
    &2'(

    View Slide

  9. &2'(
    ೔ഝ೪ಎಒథೢഝഁಊႧಭ࿂౵ಮἃ፥౯౥ಮ

    View Slide

  10. ೨೗೅ഔಒథ೨೗೅೫ഝಃ౴಑ಥ಑䉉
    '(6,*1

    View Slide

  11. ೨೗೅ഔ಑ೋഝ೸ഔೞഝ೚፥

    View Slide

  12. ੺೔ഝ೪಑ಫ౩ಎ೨೗೅ഔ
    ੺㗽ಥ౯ೃ೐೜೚థ⹏㲈ᐊ⿫
    ੺ೋഝ೸ഔ಍ኽႧ㤇⮯
    ೨೗೅ഔ೥ഝഌಎ㯉౻ಂ
    ೨೗೅೫ഝᾌၔ಑ⷒಲಭ

    View Slide

  13. 9XH)HV-DSDQ಑
    ೨೗೅ഔವị౫ಂ$GREH;'
    ࿍㞐᩷త⎵ボ⩮త_త:HG
    ⁢ိ$GREH;'PHHWLQJ
    ర೨೗೅ഔ಑ೋഝ೸ഔೞഝ೚፥ఱಒథᩏ‗ಎḄᓑ

    View Slide

  14. 9XH)HV-DSDQ಑
    ೨೗೅ഔವị౫ಂ$GREH;'
    ࿍㞐᩷త⎵ボ⩮త_త:HG
    ⁢ိ$GREH;'PHHWLQJ
    ర೨೗೅ഔ಑ೋഝ೸ഔೞഝ೚፥ఱಒథᩏ‗ಎḄᓑ
    9XH)HV-DSDQ಑
    ೨೗೅ഔವị౫ಂ
    㞐᩷త⎵ボ⩮త_త:HG
    ࿍㞐᩷
    ⁢ိ$GREH;'PHHWLQJ
    ర೨೗೅ഔ಑ೋഝ೸ഔೞഝ೚፥ఱಒథᩏ‗ಎḄᓑ
    "

    View Slide

  15. 9XH)HV-DSDQಋ೨೗೅ഔ
    9XH)HV-DSDQDQG'HVLJQ

    View Slide

  16. 9XH)HV-DSDQಋಒ
    ὅ‱‒᜼಑9XHMVೌഔ೶ೂ഍ഔ೚
    ὶᩏክ㯋ᆗథᩏಒᐞ౯Ꮳጆထᢓ
    Ⴇ⽐(YDQᗢሻᜯ಑೚೵ഝೌഝಎಫಮ೜೤೘ഈഔ
    ೚೾ഔೖഝ೷ഝ೚ಧ೑೤೛㛫᜘಍ಌ಑೅೺ഔ೩

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. ᴬ㑸ೌഔ೶ೂ഍ഔ೚಑
    ೨೗೅ഔ㵨᙮
    ೋഝ೸೬ഔ೑ഁഝ೴ഝ
    ᬝ≡ഁഝ೴ഝ
    ၻᚡ%*0
    ೧ೄ೗ഝೖ೅೩
    ‱⣎ೖ೅೩
    IDYLFRQ6162*3㶘
    Ὦᆱ
    :HE
    ೩ഝ೩ೱ೤೑
    ೮೤೐೚೩ഊ೤೸
    Ꮳጆೲ೚
    ೚೧೤ೌഝ
    Ꮳጆ⽐7೘ഄ೥
    ೚ೠ೤೶7೘ഄ೥
    എഝഌೱ೫ഝ
    ೾೚ೠഝ
    ၻᚡ್೅೪
    ೌೇഔೠഝ೽ഝ೪
    '73

    View Slide

  23. ೋഝ೸೬ഔ೑ഁഝ೴ഝ

    View Slide

  24. ᬝ≡ഁഝ೴ഝ

    View Slide

  25. ೧ೄ೗ഝೖ೅೩

    View Slide

  26. ‱⣎ೖ೅೩

    View Slide

  27. IDYLFRQ2*3616㶘

    View Slide

  28. ೩ഝ೩ೱ೤೑

    View Slide

  29. ೮೤೐೚೩ഊ೤೸

    View Slide

  30. Ꮳጆೲ೚

    View Slide

  31. ೚೧೤ೌഝ

    View Slide

  32. Ꮳጆ⽐7೘ഄ೥

    View Slide

  33. ೚ೠ೤೶7೘ഄ೥

    View Slide

  34. എഝഌೱ೫ഝ

    View Slide

  35. ೾೚ೠഝ

    View Slide

  36. ၻᚡ್೅೪

    View Slide

  37. ೪ഋഔ೐ೌೇഔೠഝ೽ഝ೪

    View Slide

  38. 9XH೴ഝഌ

    View Slide

  39. View Slide

  40. ᄘಃ䊈䈫

    View Slide

  41. ܸ೨೗೅ഔၖᜯ಑ᴑ಄ᐙಲ౾಍ಌಥᐲಣద
    ⮀ᄦဵ౯9XH)HV-DSDQಎ㛻ಧ౺ಂᾌ㯒
    䈲‗ᓠഗ‗ኟ䈳

    View Slide

  42. ੺ᢗ㱨ಎ೶ഋഝഊഔ೚ಋ౺ಉ಑ᩏ಑᜘࿂ಒㇳ಄ಂ
    ੺ಌ౶ಡಊೌഔ೶ೂ഍ഔ೚಑㜠ವ⎀ತಮ಑౮
    ੺266ಛ಑㛧❡ಋೌഔ೶ೂ഍ഔ೚ಛ಑㛧❡ಒ⋌ለ౯㤎౩
    ܸೌഔ೶ೂ഍ഔ೚౯೚ೕ೅ಋ㕷౧ಂ౧ಲ౴ಊಒ಍౲థ㛧❡಑ⵗᩮಧᭊ㔵಍೚೎ഌ౯㤎౩

    View Slide

  43. ೨೗೅ഔೢഝഁ಑᫟፥

    View Slide

  44. ಍౿)LJPDವ㤩ಶಃ಑౮
    :K\ZHFKRVH䇡JPD"

    View Slide

  45. ᢗಒ၀ᩏಥ‒ክಒ
    $GREH;'ಊ೨೗೅ഔ౺ಉ౧ಂ

    View Slide

  46. $GREH;'ಊ⧣㳬౺ಂ㗾㶉
    ೶ೂ೅ഌಎᣠ౺ಉᐝᾌಎ೨೗೅ഔಊ౰಍౧
    ೶ೂ೅ഌ೺ഝ೚ሬ‘಑㰱⢶
    㓧Ỷဵ಑$GREH,'ⲻ⟨౯᜼ᜤ
    $GREH&&ವ᝚ⶡ౺ಉ౧಍౧೉ഔ೙೬ೃಋ಑㣧Ḿ
    ೔ഔ೾ഝ೮ഔ೩಑ᵮ᜼ജ⹺ᣰ౯ಊ౰಍౧䈲᫳ᾌ䈳

    View Slide

  47. )LJPDಊಌ౩ᜤಲಆಂ౮
    ೶ೂ೅ഌಎᣠ౺ಉᐝᾌಎ೨೗೅ഔಊ౰಍౧
    ೶ೂ೅ഌ೺ഝ೚ሬ‘಑㰱⢶
    㓧Ỷဵ಑$GREH,'ⲻ⟨౯᜼ᜤ
    $GREH&&ವ᝚ⶡ౺ಉ౧಍౧೉ഔ೙೬ೃಋ಑㣧Ḿ
    ೔ഔ೾ഝ೮ഔ೩಑ᵮ᜼ജ⹺ᣰ౯ಊ౰಍౧䈲᫳ᾌ䈳
    ߞ༫ሬᐝ⹏㲈
    ߞ༫3DJH)UDPH
    ߞਛംഝഌ೺ഝ೚
    ߞ༫࿅㔵
    ߞ༫ಊ౰ಮ

    View Slide

  48. ᢗ㱨಑೶ೂ೅ഌ

    View Slide

  49. ೥ഝഌವᜤ౫ಉಥᜤಲಬ಍౧౶ಋ
    ೨೗೅ഔ౼ಮ࿂ಊ಑ഌഝഌವႧಮ
    ೌഔ೸౮ಬ಑⯸⍩㗺ಢವ᫟㔵౺಍౧
    ೌഔ೸ಎᐢ౮಍౧೔ഀആ೬೒ഝ೘ഈഔವ⟨㕨౼ಮ

    View Slide

  50. ೨೗೅೫ഝಫథ
    ೨೗೅ഔ೥ഝഌ಑ᜯಎኖಫ䈫

    View Slide

  51. ၀ᬣಎᐢ౴ಉ
    )RUWKH)XWXUH

    View Slide

  52. ၀ᩏ಑⧟∱ಒ౭౭ಣಐ㤍᳝⸮
    ੺೨೗೅ഔ಑ೋഝ೸ഔೞഝ೚፥
    ੺9XHMVಬ౺౧ೃ೬ംഝ೘ഈഔ
    ੺9XH)HV6WRUH䈲೑೤೛㛫᜘ಎಫಮ㨅㪞⦕㛧❡䈳

    View Slide

  53. ೔ഀആ೬೧ೄಎ౭౴ಮ೨೗೅ഔ
    ੺ἃ፥ಧⷚ㹮౯㤎౩ဵಂ಄ಎಫಮ೨೗೅ഔ಑എഝഌഃ೨ഌ
    ੺೔ഀആ೬೧ೄಛ಑㛧❡ವಌ౩㖶პ౼ಮ౮䉉

    View Slide

  54. ⎵ボ⩮త#MS
    ŀ ĺ

    View Slide