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

Documentation of Design System.

Mariya
November 02, 2019

Documentation of Design System.

Mariya

November 02, 2019
Tweet

More Decks by Mariya

Other Decks in Technology

Transcript

  1. 1 Lezhnyuk Artyom Docum ent at ion of Desig n

    Syst em U X P E R I E N C E D E SI G N E R
  2. 2

  3. 4

  4. 5 W hat w e g et f rom Invision

    ? 1. 2. 3. 4. Inspect Mode Com m enting Workflow Dynam ic Prototyping
  5. 6 Inspect Mode 1. 2. Dow nload Icons, Pictures, etc

    Basic CSS: color, font-size, padding, etc 3. 4. Sizes Grid dim ensions
  6. 10 W hat w e g et f rom Zeplin?

    1. 2. 3. 4. Inspect Mode Com m enting Tagging Style Guide
  7. 11 Inspect Mode 1. 2. Dow nloading assets Basic CSS:

    color, font-size, padding, etc 3. 4. Sizes Grid dim ensions
  8. 12

  9. 13 W hy w e n eed UI Library ?

    1. 2. 3. 4. Several projects; Design team (3+ m em bers); To have consistent UI; To have only one source of truth;
  10. 15

  11. 16

  12. 17 Ben ef it s of Version Cont rol 1.

    2. 3. 4. Versions Difference Tool Conflict resolution Branches
  13. 20

  14. 21

  15. 22

  16. 23 Alig nm ent w it h Devs 1. 2.

    Create ow n com ponent library Find external solutions https://w w w.gitbook.com / https://w w w.catalog.style/ https://storybook.js.org/
  17. 24

  18. 25

  19. 26 Lezhnyuk Artyom Thank s! U X P E R

    I E N C E D E SI G N E R