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

Design & Automate Icon Library with Figma

Design & Automate Icon Library with Figma

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

Afnizar Nur Ghifari

November 22, 2020
Tweet

More Decks by Afnizar Nur Ghifari

Other Decks in Design

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