Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SFSymbolsの楽しみ方
Search
Lil Ossa リルオッサ
January 15, 2022
Programming
0
120
SFSymbolsの楽しみ方
SFSymbolsの説明と、見つけてしまったSFSymbolsの楽しみ方をお伝えします。
Lil Ossa リルオッサ
January 15, 2022
Tweet
Share
More Decks by Lil Ossa リルオッサ
See All by Lil Ossa リルオッサ
The Widget Revolution
littleossa
1
65
Other Decks in Programming
See All in Programming
ワープロって実は計算機で
pepepper
2
1.4k
実践!App Intents対応
yuukiw00w
1
340
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
170
実践 Dev Containers × Claude Code
touyu
1
240
TDD 実践ミニトーク
contour_gara
0
140
State of CSS 2025
benjaminkott
1
120
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
300
バイブコーディング × 設計思考
nogu66
0
130
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
160
Laravel Boost 超入門
fire_arlo
1
100
Featured
See All Featured
Navigating Team Friction
lara
189
15k
Speed Design
sergeychernyshev
32
1.1k
GitHub's CSS Performance
jonrohan
1031
460k
A designer walks into a library…
pauljervisheath
207
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Automating Front-end Workflow
addyosmani
1370
200k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Invisible Side of Design
smashingmag
301
51k
Code Review Best Practice
trishagee
70
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
SFSymbolsͷָ͠Έํ 2022/1/15 ϦϧΦοα
ࣗݾհ Name: ϦϧΦοα note: littleossa Github: littleossa Twitter: @littleossa 2
SFSymbolsΛָ͠ΜͰ͍·͔͢ʁ
SFSymbolsͱ
SFSymbolsͱ • Apple͕ఏڙ͍ͯ͠ΔγϯϘϧϑΥϯτ • SFSymbols3.2࣌Ͱɺ3309ݸͷγϯϘϧΛఏڙ͍ͯ͠·͢ • ͜ΕΒΛΤΫεϙʔτޙɺϕΫλʔάϥϑΟοΫฤूπʔϧͰฤू͠ ͯΧελϜγϯϘϧΛ࡞Ͱ͖Δ • SFͱɺAppleͷఏڙ͍ͯ͠ΔSan
Franciscoͱ͍͏ϑΥϯτͷ͜ͱΛ ࢦ͍ͯ͠Δ
SFSymbolsͷԸܙ • Apple͕ެࣜͰ༻͍ͯ͠Δߴ࣭ͷΞΠί ϯΛಉ͡Α͏ʹ༻Ͱ͖Δ • ݸਓ։ൃऀ͕ΞΠίϯ࡞ʹϦιʔεΛׂ͔ ͳͯ͘ྑ͍ • ༷ʑͳ༻్͚ͷγϯϘϧ͕༻ҙ͞Ε͓ͯ Γɺ͔Ώ͍ͱ͜Ζʹख͕ಧ͘
ϝϞApp
ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔
ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔ ࣮ࡍʹΞϓϦͷΞΠίϯͱͯ͑ͦ͠͏ͳͷ͔Β ʮ͜Μͳͷ·Ͱ͋ΔΜͩʂʯ ʮ͜ΕҰମ͍ͭ͏Μͩʁʯ ͱ͍͏ͷ·Ͱ ຊʹόϥΤςΟ๛Ͱ SFSymbolsͷΧλϩάΛݟΔ͚ͩͰָ͍͠Ͱ͢
͜Μͳͷ·Ͱ͋ΔΜͩʂ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ3Ґ ※100%ݸਓతͳओ؍Ͱ͢ ҨӨ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ2Ґ ※100%ݸਓతͳओ؍Ͱ͢ ંΓΈܞଳ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ1Ґ ※100%ݸਓతͳओ؍Ͱ͢ Έͦ
SFSymbols͕ؾʹͳͬͨํ ࠓ͙͢Πϯετʔϧʂ
SFSymbolsͷΠϯετʔϧ ํ๏ https://developer.apple.com/sf-symbols/ 1. ͜ͷαΠτʹΞΫηε 2. Լ෦ͷμϯϩʔυ͔Βμϯ ϩʔυͯ͠Πϯετʔϧ͢Δ͚ͩ
࣮ࡍʹ͏
Imageͱͯ͠γϯϘϧΛ͏ 1. StoryboardʹImageViewΛՃ 2. ImageͷϑΥʔϜʹԿ͔จࣈΛೖ ྗ 3. SystemͷImageͱͯ͠γϯϘϧ͕ දࣔ͞ΕΔ ※
OSʹґଘ͢Δͷଟ͘ɺ༻ग़དྷͳ͍߹ܯࠂ͕ग़Δ
Imageͱͯ͠γϯϘϧΛ͏ ίʔυ͔Β༻͢Δ͜ͱͰ͖·͢ɻ let image = UIImage(systemName:"person.crop.artframe") systemNameSFSymbolsͷγϯϘϧͷ໊લͰɺӈΫϦοΫͰ໊લͷ ίϐʔΛબ͢Δ͜ͱ͕ग़དྷ·͢ɻ ※ ίʔυ͔Β༻͢Δ߹ɺOSґଘʹΑΓ༻ग़དྷͳ͍߹ͷܯࠂग़ͳ͍ͷͰҙ͕ඞཁͰ͢
scaleͱweightઃఆͰ͖Δ let configuration = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .medium, scale: .large)
let image = UIImage(systemName: "square.and.arrow.up", withConfiguration: configuration) Storyboard ίʔυ
iOS15͔Β͑ΔSFSymbolsʹ ෳͷΧϥʔΛઃఆ͢Δํ๏
iOS15ະຬͰͷΧϥʔઃఆํ๏ let image = UIImage(systemName: "face.smiling.fill") imageView.image = image systemeͷImageΛೖ͢Δ͚ͩͰɺ
σϑΥϧτΧϥʔͷ1৭͚ͩͰ০͞Ε͍ͯ·͢ ͋Δ͍ɺ imageView.tintColor = .tintColor
ύϨοτΧϥʔΛઃఆ͢Δ let image = UIImage(systemName: "face.smiling.fill") let configuration = UIImage.SymbolConfiguration(paletteColors:
[.black, .systemYellow]) imageView.image = image imageView.preferredSymbolConfiguration = configuration iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(paletteColors:)Ͱ SymbolCon fi gurationΛੜͯ͠ઃఆ͢Δ͜ͱͰγϯϘϧͷΠϝʔδ ʹෳͷΧϥʔΛׂΓͯΔ͜ͱ͕ग़དྷ·͢
֊ΧϥʔΛઃఆ͢Δ iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(hierarchicalColor:) ͰSymbolCon fi gurationΛੜͯ͠ઃఆ͢Δ͜ͱͰࢦఆͨ͠جຊ৭ͷ ڧΛԼ͛ͨ৭ͷΛଞͷ֊ͷϨΠϠʔͷׂΓͯ·͢ɻ let
image = UIImage(systemName: "trash.slash") let configuration = UIImage.SymbolConfiguration(hierarchicalColor: .systemMint) imageView.preferredSymbolConfiguration = configuration imageView.image = image
ϚϧνΧϥʔΛઃఆ͢Δ iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.preferringMulticolorϝιουΛ༻ ͢ΔͱɺγϯϘϧ͕ϚϧνΧϥʔόϦΞϯτΛ͍࣋ͬͯΔ߹ ͦͷΧϥʔׂ͕ΓͯΒΕ·͢ let image =
UIImage(systemName: "ladybug.fill") imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration.preferringMulticolor() imageView.tintColor = .brown imageView.image = image
SFSymbolsͷਅͷָ͠Έํ
Title: DJ શͯSFSymbolsͷΈͰ࡞͠·ͨ͠ɻ
ਪ͠ͷSFSymbolsΛݟ͚ͭͯɺ ָ͠ΜͰ͍ͩ͘͞
None