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
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
38. We built everything from scratch
39. Except, the icon. We use Feather Icon.
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.
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?
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.
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
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)
74. Using the icon on project
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