SF Symbolsの楽しみ方

6.5K Views

January 15, 22

スライド概要

SF Symbolsの説明と、見つけてしまったSF Symbolsの楽しみ方をお伝えします

profile-image

I am a break dancer (b-boy)

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

SF Symbolsの楽しみ方 2022/1/15 リルオッサ

2.

自己紹介 Name: リルオッサ note: littleossa Github: littleossa Twitter: @littleossa 2

3.

SF Symbolsを楽しんでいますか?

4.

SF Symbolsとは

5.

SF Symbolsとは • Appleが提供しているシンボルフォント • SF Symbols3.2時点では、3309個のシンボルを提供しています • これらをエクスポート後、ベクターグラフィック編集ツールで編集し てカスタムシンボルを作成できる • SFとは、Appleの提供しているSan Franciscoというフォントのことを 指している

6.

メモApp SF Symbolsの恩恵 • Appleが公式で使用している高品質のアイコ ンを同じように使用できる • 個人開発者がアイコン作成にリソースを割か なくて良い • 様々な用途向けのシンボルが用意されてお り、かゆいところに手が届く

7.

どのようなシンボルがあるのか

8.

どのようなシンボルがあるのか 実際にアプリのアイコンとして使えそうなものから 「こんなものまであるんだ!」 「これ一体いつ使うんだ?」 というものまで 本当にバラエティ豊富で SF Symbolsのカタログを見るだけでも楽しいです

9.

こんなものまであるんだ!

10.

これ一体いつ使うんだランキング第3位 ※100%個人的な主観です 遺影

11.

これ一体いつ使うんだランキング第2位 ※100%個人的な主観です 折り畳み携帯

12.

これ一体いつ使うんだランキング第1位 ※100%個人的な主観です 脳みそ

13.

SF Symbolsが気になった方は 今すぐインストール!

14.

SF Symbolsの インストール方法 https://developer.apple.com/sf-symbols/ 1. このサイトにアクセス 2. 下部のダウンロードからダウン ロードしてインストールするだけ

15.

実際に使う

16.

Imageとしてシンボルを使う 1. StoryboardにImageViewを追加 2. Imageのフォームに何か文字を入 力 3. SystemのImageとしてシンボルが 表示される ※ OSに依存するものも多く、使用出来ない場合は警告が出る

17.

Imageとしてシンボルを使う コードから使用することもできます。 let image = UIImage(systemName:"person.crop.artframe") systemNameはSF Symbolsのシンボルの名前で、右クリックで名前の コピーを選択することが出来ます。 ※ コードから使用する場合は、OS依存により使用出来ない場合の警告は出ないので注意が必要です

18.

scaleとweightも設定できる Storyboard コード let configuration = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .medium, scale: .large) let image = UIImage(systemName: "square.and.arrow.up", withConfiguration: configuration)

19.

iOS15から使えるSF Symbolsに 複数のカラーを設定する方法

20.

iOS15未満でのカラー設定方法 let image = UIImage(systemName: "face.smiling.fill") imageView.image = image systemeのImageを代入するだけでは、 デフォルトカラーの1色だけで装飾されています あるいは、 imageView.tintColor = .tintColor

21.

パレットカラーを設定する let image = UIImage(systemName: "face.smiling.fill") let configuration = UIImage.SymbolConfiguration(paletteColors: [.black, .systemYellow]) imageView.image = image imageView.preferredSymbolConfiguration = configuration iOS15から使用できる UIImage.SymbolCon guration.init(paletteColors:)で SymbolCon gurationを生成して設定することでシンボルのイメージ fi fi に複数のカラーを割り当てることが出来ます

22.

階層カラーを設定する let image = UIImage(systemName: "trash.slash") let configuration = UIImage.SymbolConfiguration(hierarchicalColor: .systemMint) imageView.preferredSymbolConfiguration = configuration imageView.image = image iOS15から使用できる UIImage.SymbolCon guration.init(hierarchicalColor:) でSymbolCon gurationを生成して設定することで指定した基本色の fi fi 強度を下げた色の値を他の階層のレイヤーの割り当てます。

23.

マルチカラーを設定する let image = UIImage(systemName: "ladybug.fill") imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration.preferringMulticolor() imageView.tintColor = .brown imageView.image = image iOS15から使用できる UIImage.SymbolCon guration.preferringMulticolorメソッドを使用 すると、シンボルがマルチカラーバリアントを持っている場合は fi そのカラーが割り当てられます

24.

SF Symbolsの真の楽しみ方

25.

Title: DJ 全てSF Symbolsのみで作成しまし た。

26.

推しのSF Symbolsを見つけて、 楽しんでください