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.

0c6fd6a08d0f898159cda7cafcacf07f?s=128

Afnizar Nur Ghifari

November 22, 2020
Tweet

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
  2. None
  3. Apa kabar?

  4. Apa kabar? Sehat?

  5. Apa kabar? Sehat? Yuk kenalan

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

  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
  8. If you have any question You can send it to

    sli.do by entering event code fofjakarta-02
  9. Let’s talk about icon

  10. for you What is icon ?

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

    about icon
  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
  13. When we think graphic it’s like

  14. When we think graphic that represent functionality

  15. For me, the icon definition is

  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).
  17. What and why use icons?

  18. Warn Inform Translate

  19. Warn Inform Translate

  20. Warn Inform Translate

  21. Warn Inform Translate

  22. They tell us which route to take, which buttons to

    press and what danger is ahead;
  23. Let’s talk about design system

  24. What is design system in short

  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.
  26. Icon is part of the system in design system

  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
  28. They're real tiny, so they don't take up very much

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

  30. Icon in design system, things to consider

  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.
  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.
  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.
  34. Let me tell you my story

  35. None
  36. None
  37. None
  38. We built everything from scratch

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

  40. None
  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.
  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.
  43. None
  44. None
  45. None
  46. How might we create some unique and fun-themed icon?

  47. Current problem and needs

  48. Feather icon only on 24x24. If we want to have

    20x20? We must scale the icon. Sometime looks good, but sometime looks bad.
  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?
  50. None
  51. None
  52. None
  53. None
  54. None
  55. Then, it begin, I asked myself

  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?
  57. How about automate icon library for developer?

  58. Research about automate icon library

  59. Get the assets Compress the assets Build the svg sprites

    and Vue component
  60. Use Figma Assets Package to get the icon This package

    using Figma’s API to programmatically export.
  61. None
  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
  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
  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
  65. Get the svg and compress it using svgo

  66. svgo yaml . . / / -- -- -- =

    svgo icons 24x24 icons 20x20 config pretty indent 2
  67. Build svg sprites

  68. . - -- - - -- -- - -- svg

    sprite svg namespace classnames false symbol symbol dest symbol
  69. Build the vue components

  70. None
  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
  72. Publishing to Node Package Manager (NPM)

  73. None
  74. Using the icon on project

  75. None
  76. Takeaways

  77. Do research before you start designing

  78. Build the icon library from the beginning

  79. Always collaborate with your engineer

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

    and code
  81. Centralized, apalagi kita ada beberapa produk dan itu beda repository

    atau app jadi ngga ada yg redundant iconsnya. Helmi Satria Our engineer
  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
  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
  84. Matur Nuwun

  85. If you have any question You can send it to

    sli.do by entering event code fofjakarta-02