Design & Automate Icon Library with Figma

Slide deck presented for Friends of Figma Jakarta online talk event on 22 November 2020.

Transcript

1. @afnizarnur
   Afnizar Nur Ghifari
   Design & Automate
   Icon Library with Figma
   A story and takeaways building icon library
   Friends of Figma Jakarta Sunday, 22nd Nov 2020
   

   View Slide

2. View Slide

3. Apa kabar?
   

   View Slide

4. Apa kabar?
   Sehat?
   

   View Slide

5. Apa kabar?
   Sehat?
   Yuk kenalan
   

   View Slide

6. Hi there, I’m Afnizar
   Currently, UX Designer at Bukalapak
   

   View Slide

7. Outline
   Let’s talk about icon
   
   Let’s talk about design system
   
   Designing icons
   
   Automate icon library
   
   Research about automate
   icon library
   1
   
   2
   
   3
   
   4
   
   5
   6
   
   7
   
   8
   Publishing to NPM
   
   Using the icon on project
   
   Takeaways
   

   View Slide

8. If you have any question
   You can send it to sli.do by entering event code
   fofjakarta-02
   

   View Slide

9. Let’s talk
   about icon
   

   View Slide

10. for you
    What is icon
    ?
    

    View Slide

11. for you
    What is icon
    ?
    Type only 1 keyword
    about icon
    

    View Slide

12. A graphic symbol on a computer display screen
    that represents an app, an object (such as a file),
    or a function (such as the command to save).
    merriam-webster.com/dictionary/icon
    

    View Slide

13. When we think graphic it’s like
    

    View Slide

14. When we think graphic that
    represent functionality
    
    

    View Slide

15. For me, the icon
    definition is
    
    

    View Slide

16. Icon is a medium for conveying an idea and intent
    in the form of a symbol that can enhance
    aesthetics in other media (for example: physical
    product or digital product).
    

    View Slide

17. What and why
    use icons?
    

    View Slide

18. Warn
    Inform Translate
    

    View Slide

19. Warn
    Inform Translate
    

    View Slide

20. Warn
    Inform Translate
    

    View Slide

21. Warn
    Inform Translate
    

    View Slide

22. They tell us which route to take, which buttons to
    press and what danger is ahead;
    

    View Slide

23. Let’s talk
    about design
    system
    

    View Slide

24. What is design
    system in short
    

    View Slide

25. A design system offers a library of visual style,
    components, and other concerns documented
    and released by an individual, team or community
    as code and design tools so that adopting
    products can be more efficient and cohesive.
    

    View Slide

26. Icon is part of the
    system in design
    system
    

    View Slide

27. Icon is part of the
    system in design
    system.
    Take example of button, this is
    foundational component in design
    system,
    
    Button has variant: button with icon.
    Icon is taking part of design system
    too.
    I’m a button
    I’m a button
    

    View Slide

28. They're real tiny, so they
    don't take up very much
    real estate.
    

    View Slide

29. Icons are a fundamental
    part of a good design
    system.
    

    View Slide

30. Icon in design system,
    things to consider
    

    View Slide

31. Make sure the icons you design and include into
    your design system are fit for purpose. Icons that
    occupy a small space need less detail than those
    used at larger scales.
    

    View Slide

32. Consider the thickness or weightiness of your
    icons; should they be solid or outlined? Are they for
    iOS or Android, or should they have their own
    unique style.
    

    View Slide

33. Don’t fool yourself into thinking that icons will
    improve the usability of your product. Icons need to
    be recognisable first, to influence any positive
    usability.
    

    View Slide

34. Let me tell
    you my story
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. We built everything
    from scratch
    

    View Slide

39. Except, the icon. We use
    Feather Icon.
    

    View Slide

40. View Slide

41. Your icons are a reflection of your brand. It is
    important to understand the core values of your
    brand and how they manifest visually.
    
    
    Some adjectives to think about are hard/soft,
    casual/formal, luxurious/economical, and
    literal/abstract.
    

    View Slide

42. Taking inspiration
    Here is a selection of both product and marketing
    icons that reflect the voice and tone of the
    company's visual brand.
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. How might we create
    some unique and
    fun-themed icon?
    

    View Slide

47. Current problem
    and needs
    

    View Slide

48. Feather icon only on 24x24. If we want to have
    20x20? We must scale the icon. Sometime looks
    good, but sometime looks bad.
    

    View Slide

49. We want our icon easily added and improved
    without back and forth in our tools.
    
    
    We can use Feather, by making it library, but when
    making customization?
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. Then, it begin,
    I asked myself
    

    View Slide

56. Now, in production code are using Feather, how do
    you make it easy for developers to use it and make
    it happen, so that it can be maintained on the
    code side as well?
    

    View Slide

57. How about
    automate icon
    library for
    developer?
    

    View Slide

58. Research about
    automate icon
    library
    

    View Slide

59. Get the assets
    Compress the assets
    Build the svg sprites
    and Vue component
    

    View Slide

60. Use Figma Assets
    Package to get the icon
    This package using Figma’s API to programmatically
    export.
    

    View Slide

61. View Slide

62. "figma-assets-generator"
    "N4TZ7vR8BUDHmlgHMmpp9Q"
    "0:1"
    "svg"
    "icons/24x24"
    "N4TZ7vR8BUDHmlgHMmpp9Q"
    "54:135"
    "svg"
    "icons/20x20"
    personalAccessToken env FIGMA_TOKEN
    fileId
    documentId
    fileExtension
    output
    personalAccessToken env FIGMA_TOKEN
    fileId
    documentId
    fileExtension
    output
    getFigmaAssets
    get24px
    get20px
    main
    { } ( )
    
    ​
    
    {
    
    : . . ,
    
    : ,
    
    : ,
    
    : ,
    
    : ,
    
    }
    
    ​
    
    {
    
    : . . ,
    
    : ,
    
    : ,
    
    : ,
    
    : ,
    
    }
    
    ​
    
    () {
    
    =
    =
    =
    const require
    const
    process
    const
    process
    async function
    

    View Slide

63. "figma-assets-generator"
    "N4TZ7vR8BUDHmlgHMmpp9Q"
    "0:1"
    "svg"
    "icons/24x24"
    "N4TZ7vR8BUDHmlgHMmpp9Q"
    "54:135"
    "svg"
    "icons/20x20"
    personalAccessToken env FIGMA_TOKEN
    fileId
    documentId
    fileExtension
    output
    personalAccessToken env FIGMA_TOKEN
    fileId
    documentId
    fileExtension
    output
    getFigmaAssets
    get24px
    get20px
    main
    { } ( )
    
    ​
    
    {
    
    : . . ,
    
    : ,
    
    : ,
    
    : ,
    
    : ,
    
    }
    
    ​
    
    {
    
    : . . ,
    
    : ,
    
    : ,
    
    : ,
    
    : ,
    
    }
    
    ​
    
    () {
    
    =
    =
    =
    const require
    const
    process
    const
    process
    async function
    

    View Slide

64. "N4TZ7vR8BUDHmlgHMmpp9Q"
    "54:135"
    "svg"
    "icons/20x20"
    "Get icon 24x24..."
    "\nGet icon 20x20..."
    "icons/24x24"
    err
    personalAccessToken env FIGMA_TOKEN
    fileId
    documentId
    fileExtension
    output
    log
    log
    catch
    error
    output
    main
    err
    : . . ,
    
    : ,
    
    : ,
    
    : ,
    
    : ,
    
    }
    
    ​
    
    () {
    
    . ( )
    
    ( )
    
    ​
    
    . ( )
    
    ( )
    
    }
    
    ​
    
    (). (( ) {
    
    . ( )
    
    })
    
    : ,
    =>
    process
    async function
    console
    await getFigmaAssets get24px
    console
    await getFigmaAssets get20px
    main
    console
    

    View Slide

65. Get the svg and
    compress it using
    svgo
    

    View Slide

66. svgo yaml
    . .
    / / -- -- -- =
    svgo icons 24x24 icons 20x20 config pretty indent 2
    

    View Slide

67. Build svg sprites
    

    View Slide

68. .
    - -- - - -- -- - --
    svg sprite svg namespace classnames false symbol symbol dest symbol
    

    View Slide

69. Build the vue
    components
    

    View Slide

70. View Slide

71. s s s s s
    ctx
    ctx ctx
    ctx
    ctx
    attrs attrs size
    
    attrs attrs size
    
    ctx attrs
    
    name
    props
    size
    type
    default
    validator length slice length slice
    functional
    render
    props size slice
    props size slice props size length
    props size
    data attrs
    width width
    height height
    data attrs
    s
    h ctx
    size
    attrs
    svg
    path
    svg
    'Alarm20.js'
    '20'
    'x'
    'x'
    'em'
    
    'px'
    "http://www.w3.org/2000/svg" "20" "20" "none" "0 0 20 20"
    "currentColor" "evenodd" "M1.793.793a1 1 0 011.414 1.414l-1.5 1.5A1 1 0 01.293 2.293l
    {
    
    : ,
    
    ​
    
    : {
    
    : {
    
    : ,
    
    : ,
    
    : ( ) ( ( ) . ( . ( , . )) . ( )
    }
    
    },
    
    : ,
    
    ( , ) {
    
    . . . ( )
    
    . . . ( , . . . )
    : ( . . ) ;
    
    . . {}
    
    . .
    . .
    . .
    ​
    
    < = = = = = {...
    < = = =
    >
    
    ​
    
    }
    
    }
    => ! || >= && ! - && - ===
    = - ===
    ? - +
    +
    = ||
    = ||
    = ||
    =
    export default
    String
    isNaN 2 isNaN 0 1 1
    true
    const 1
    0 1
    parseInt
    const
    return xmlns width height fill viewBox
    fill fill-rule d
    

    View Slide

72. Publishing to
    
    Node Package
    Manager (NPM)
    

    View Slide

73. View Slide

74. Using the icon
    on project
    

    View Slide

75. View Slide

76. Takeaways
    

    View Slide

77. Do research before you
    start designing
    

    View Slide

78. Build the icon library
    from the beginning
    

    View Slide

79. Always collaborate with
    your engineer
    

    View Slide

80. The testimonial by
    using icon library
    that sync with
    design and code
    

    View Slide

81. Centralized, apalagi kita ada beberapa produk
    dan itu beda repository atau app jadi ngga ada
    yg redundant iconsnya.
    Helmi Satria
    Our engineer
    

    View Slide

82. Syncronized, kalo ada update icon
    developer/designer bisa update sendiri svg nya
    di project nataicons dan nanti developer nya
    tinggal update versi then it will be updated
    automatically.
    Helmi Satria
    Our engineer
    

    View Slide

83. Easy to search and use, dev tinggal cari nama
    component di nataicons sesuai nama
    component di Figma dan tinggal pake deh.
    Helmi Satria
    Our engineer
    

    View Slide

84. Matur
    
    Nuwun
    

    View Slide

85. If you have any question
    You can send it to sli.do by entering event code
    fofjakarta-02
    

    View Slide