Design & Automate Icon Library with Figma

Slide 1

Slide 1 text

@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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Apa kabar?

Slide 4

Slide 4 text

Apa kabar? Sehat?

Slide 5

Slide 5 text

Apa kabar? Sehat? Yuk kenalan

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Let’s talk about icon

Slide 10

Slide 10 text

for you What is icon ?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

When we think graphic it’s like

Slide 14

Slide 14 text

When we think graphic that represent functionality

Slide 15

Slide 15 text

For me, the icon definition is

Slide 16

Slide 16 text

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).

Slide 17

Slide 17 text

What and why use icons?

Slide 18

Slide 18 text

Warn Inform Translate

Slide 19

Slide 19 text

Warn Inform Translate

Slide 20

Slide 20 text

Warn Inform Translate

Slide 21

Slide 21 text

Warn Inform Translate

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Let’s talk about design system

Slide 24

Slide 24 text

What is design system in short

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

Icon is part of the system in design system

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Icons are a fundamental part of a good design system.

Slide 30

Slide 30 text

Icon in design system, things to consider

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Let me tell you my story

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

We built everything from scratch

Slide 39

Slide 39 text

Except, the icon. We use Feather Icon.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Current problem and needs

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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?

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Then, it begin, I asked myself

Slide 56

Slide 56 text

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?

Slide 57

Slide 57 text

How about automate icon library for developer?

Slide 58

Slide 58 text

Research about automate icon library

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

"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

Slide 63

Slide 63 text

Slide 64

Slide 64 text

"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

Slide 65

Slide 65 text

Get the svg and compress it using svgo

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Build svg sprites

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Build the vue components

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Publishing to Node Package Manager (NPM)

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Using the icon on project

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Takeaways

Slide 77

Slide 77 text

Do research before you start designing

Slide 78

Slide 78 text

Build the icon library from the beginning

Slide 79

Slide 79 text

Always collaborate with your engineer

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Matur Nuwun

Slide 85

Slide 85 text

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