SF Symbols - Speaker Deck

SF Symbols

by Yuka Ezura

Slide 1

Slide 1 text

4'4ZNCPMT F[VSB

Slide 2

Slide 2 text

ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT

Slide 3

Slide 3 text

w 4'4ZNCPMTͷ֓ཁɾίϯηϓτ w 4'4ZNCPMTΛ༻͍࣮ͨ૷ w ࢖͍ํͱ஫ҙࣄ߲ w ͜Ε͔ΒͷσβΠϯࢦఆ w ΧελϜTZNCPM ͕࣌ؒ͋Ε͹ 4'4ZNCPMT

Slide 4

Slide 4 text

w 4ZNCPMͷηοτ w ݸҎ্"QQMF͕ఏڙ͍ͯ͠Δ w ϑΥʔϚοτ47( w ࣗ࡞΋Մೳ w ରԠ04 w J04BOEMBUFS w XBUDI04BOEMBUFS w UW04BOEMBUFS ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT QFSTPOpMM TDJTTPST

Slide 5

Slide 5 text

4ZNCPMͷҰཡ IUUQTEFWFMPQFSBQQMFDPNEFTJHO ͔͜͜Βμ΢ϯϩʔυ

Slide 6

Slide 6 text

4'4ZNCPMTBQQ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

)PXUPVTF let image = UIImage(systemName: "person.fill") 4ZNCPMͷ໊લ imageView.image = image

Slide 9

Slide 9 text

)PXUPVTF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED *#͔Β΋ઃఆͰ͖Δ

Slide 10

Slide 10 text

ඪ४Ͱఏڙ͞Ε͍ͯΔը૾ͷηοτ͕௥Ճ͞Ε͚ͨͩʁ

Slide 11

Slide 11 text

w 4''POUͱ਌࿨ੑͷߴ͍ઃܭ w 47( ϕΫλܗࣜ w දࣔʹؔ܎͢Δύϥϝʔλ w QPJOUT w XFJHIU w TDBMF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT UIImageView  (Symbol) UILabel Baseline

Slide 12

Slide 12 text

w 4'4ZNCPMT͸CBTFMJOFP⒎TFUΛ࣋ͭ  5FYUͱฒ΂ͯ΋όϥϯεͷྑ͍Ґஔʹදࣔ͞ΕΔ w औಘ  JNBHFCBTFMJOF0⒎TFU'SPN#PUUPN w ઃఆ  JNBHFXJUI#BTFMJOF0⒎TFU'SPN#PUUPN w ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED baselineOffsetFromBottom

Slide 13

Slide 13 text

Slide 14

Slide 14 text

w 4''POUͱ਌࿨ੑͷߴ͍ઃܭ w 47( ϕΫλܗࣜ w දࣔʹؔ܎͢Δύϥϝʔλ w QPJOUT w XFJHIU w TDBMF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT 17 points 17 points Baseline

Slide 15

Slide 15 text

w 4''POUͱ਌࿨ੑͷߴ͍ઃܭ w 47( ϕΫλܗࣜ w දࣔʹؔ܎͢Δύϥϝʔλ w QPJOUT w XFJHIU w TDBMF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT

Slide 16

Slide 16 text

ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 17

Slide 17 text

w 4''POUͱ਌࿨ੑͷߴ͍ઃܭ w 47( ϕΫλܗࣜ w දࣔʹؔ܎͢Δύϥϝʔλ w QPJOUT w XFJHIU w TDBMF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4'4ZNCPMT 4DBMF 4NBMM .FEJVN -BSHF

Slide 18

Slide 18 text

ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 19

Slide 19 text

Slide 20

Slide 20 text

DBMFOEBSTWH

Slide 21

Slide 21 text

3FDBQ w 4''POUͱ਌࿨ੑͷߴ͍ઃܭ w ࣗ࡞΋Մೳ UFNQMBUFΛฤूͯ͠BTTFUDBUBMPHʹೖΕΔ w CBTFMJOF0⒎TFU'SPN#PUUPNʹΑΔҐஔௐ੔  w දࣔΛܾఆ͢Δύϥϝʔλ w QPJOUT w େ͖͞ ฒ΂Δ5FYUͷGPOUTJ[Fͱಉ͡஋ʹ͢Δͱͪΐ͏Ͳྑ͍αΠζʹͳΔ w 5FYUͷGPOUTJ[FʹରԠ w 㱠XJEUI IFJHIU w XFJHIU w ଠ͞ w 4''POUͷXFJHIUʹରԠ w TDBMF w େ͖͞ w දࣔྖҬͷେ͖͞΍4ZNCPMΛͲͷ͘Β͍ڧௐ͍͔ͨ͠Ͱܾఆ

Slide 22

Slide 22 text

4'4ZNCPMTΛ༻͍࣮ͨ૷

Slide 23

Slide 23 text

)PXUPVTF "QQMFͷఏڙ͢Δ4ZNCPMͷ໊લ let image = UIImage(systemName: "person.fill") imageView.image = image

Slide 24

Slide 24 text

)PXUPVTF $VTUPNTZNCPMͷ໊લ let image = UIImage(named: "person.fill") imageView.image = image

Slide 25

Slide 25 text

)PXUPVTF let image = UIImage(systemName: "person.fill") 4ZNCPMͷ໊લ imageView.image = image let headlineConfig = UIImage.SymbolConfiguration(pointSize: 23.0, weight: .medium) imageView.preferredSymbolConfiguration = headlineConfig

Slide 26

Slide 26 text

)PXUPVTF let image = UIImage(systemName: "person.fill") 4ZNCPMͷ໊લ imageView.image = image let headlineConfig = UIImage.SymbolConfiguration(textStyle: .headline)   imageView.preferredSymbolConfiguration = headlineConfig

Slide 27

Slide 27 text

1SFTFUDPOpH 4DBMF.FEJVN 4DBMF-BSHF

Slide 28

Slide 28 text

)PXUPVTF ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 29

Slide 29 text

)PXUPVTF  /4"UUSJCVUFE4USJOH ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 30

Slide 30 text

)PXUPVTF  /4"UUSJCVUFE4USJOH let image = UIImage(systemName: "person.fill") let attachment = NSTextAttachment(image: image) let imageString = NSAttributedString(attachment: attachment) text.insert(imageString, at: 2) let headlineConfig = UIImage.SymbolConfiguration(pointSize: 23.0, weight: .medium) imageView.preferredSymbolConfiguration = headlineConfig

Slide 31

Slide 31 text

Slide 32

Slide 32 text

)PXUPVTF  /4"UUSJCVUFE4USJOH ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED

Slide 33

Slide 33 text

)PXUPVTF  /4"UUSJCVUFE4USJOH ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED image.withTintColor(.redColor)

Slide 34

Slide 34 text

͜Ε͔ΒͷσβΠϯࢦఆ

Slide 35

Slide 35 text

w XJEUI w IFJHIU w MFBEJOH USBJMJOH w WFSUJDBMDFOUFS ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED ैདྷͷσβΠϯΨΠυ

Slide 36

Slide 36 text

w TZNCPMOBNF w TDBMF XFJHIU w QPJOU w XJEUI w IFJHIU w MFBEJOH USBJMJOHPS  NBSHJOGSPNDFOUFS w CBTFMJOF PSWFSUJDBMDFOUFS ը૾Ҿ༻*OUSPEVDJOH4'4ZNCPMT  IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED ͜Ε͔ΒͷσβΠϯΨΠυ  GPS4'4ZNCPMT XJEUI IFJHIUͷࢦఆΛ΍ΊΔ TDBMF QPJOUʹΑͬͯ  େ͖͞Λܾఆ͢Δ

Slide 37

Slide 37 text

3FDBQ • UIImage(systemName: String), UIImage(named: String) Ͱ SF Symbols ͔Β Image Λ࡞੒ • UIImage.SymbolConfiguration Ͱ scale ౳ͷઃఆΛ࡞੒ w ৔ॴʹΑͬͯɺQSFTFUͷDPOpHVSBUJPO͕ଘࡏ w σβΠϯΨΠυͰ͸TDBMF QPJOUTͰαΠζΛࢦఆ͢Δ w XJEUI IFJHIUͰࢦఆ͠ͳ͍