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

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

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