SF Symbols 2 – WWDC2020

Session概要

SF Symbolsの概要

• システムフォントのSan Franciscoとシームレスに統合できるように設計された、一貫性のある柔軟な図像のライブラリである、SF Symbolsを設計
• SF Symbolsの種類
  • SF Pro
  • SF Pro Rounded
  • SF Compact
  • SF Compact Rounded
• シンボルがテキストの横に表示される場合、シンボルは垂直方向の中央に大文字の高さで配置される
• ベースライン（Baseline）はテキストが置かれる想像上の線であり、すべての書体のエレメントはそれに関連している
• テキストは常にベースライン上にありますが、シンボルについては必ずしもそうではない
  • 意図的にはみ出す場合があり、理由はシンボルの形状とSan Franciscoとの光学的なバランスを取ることを目的としているため
• すべてのシンボルにはsmall, medium, largeの3つのスケールがあり、デフォルトのスケールはmedium
  • シンボルスケールを使用して隣接するテキストと比較し、シンボルの強調を変えることができる
  • その間はテキストとウエイトが一致し、垂直方向の中央に配置されたまま
  • smallのシンボルはmediumのスケールよりも約20%小さくなる
  • largeのシンボルはmediumのスケールよりも約30%大きくなる
  • スケールによりフォントの太さが変わらないようにデザインされており、変わるのはスケールだけ
    
    

SF Symbolsの実装方法

• SF Symbolsでの実装時はシンボル自体ではなく、シンボル名を指定する
• スケールを変更するには、symbol configurationを使用する
  
  

// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "shuffle")
            .font(.headline)
            .imageScale(.small)
    }
}

// New Feature, Sharing location
import SwiftUI

struct ContentView: View {
    var body: some View {
        let glyph = Image(systemName: "location.fill")
        return Text("\(glyph) Sharing location")
    }
}

// Using SF Symbols in AppKit

if let shuffleImage = NSImage(
    systemSymbolName: "shuffle", accessibilityDescription: "shuffle") {
    shuffleImageView.image = shuffleImage
  
    // Configure symbols
    let config = NSImage.SymbolConfiguration(textStyle: .body, scale: .small)
    let shuffleButtonImage = shuffleImage.withSymbolConfiguration(config)
}

SF Symbolsの新機能と改良点

• iOS 13では1500以上のシンボルがあったが、新しく750以上のシンボルを追加（下記の画像は追加の一部）
• シンボルが垂直に配置している場合（特にバッジ付きのバリアントを持つシンボルに当てはまる）に、シンボルがmarginをはみ出す大きさであればmarginを調整され他のシンボルとサイズを統一して配置される
  
  

ローカライズについて

• 英語、日本語は左から右への書記体系であるラテン文字を使用しますが、他のロケールではアラビア語やヘブライ語のように右から左へ書いていきます
  • シンボルでは自動でローカライズされたシンボルを利用することができるため、ローカライズされたバリアントを呼び出す必要がない
• カスタムシンボルに実装する方法
  • アセットカタログをローカライズし、各SVGテンプレートにロケールの割り当てを行う
  • シンボルの方向設定は、mirrors設定をオンにすることで設定可能
    
    

複数のversionに対応する方法

• iOS 13とiOS 14でシンボルの命名が変更している場合があるため、Deployment Targetによって実装するシンボル名を変更する必要がある
  • 注意して実装しないと、クラッシュするかもしくは表示されないため必ずXcodeでのwarning等を確認する
    
    

色について

• シンボルに色を設定することができ、tint colorに色を設定することで実現可能
• 今年でマルチカラーシンボル対応した
  • 1つのシンボルで、複数の色を設定することが可能
• SF Symbolアプリのカラーモードプレビューで「Toolbar」ボタン、またはマルチカラーカテゴリを使用して見ることができる
  • シンボルの白黒バージョンの「monochrome」
  • カラーバージョンの「multicolor」から選択することもできる
    
    

SF Symbolsを使用する場合のレイアウト

• レイアウトでシンボルを使用する利点
  • シンボルは特定のサイズのフレームに制約されるように設計されていないため、実装時にフレーム設定をしない
• シンボルには独自のサイズがある
  • 画面上の異なる量の表面を占有するが、相互に関連して一貫しているため、フレーム内に入れないようにする
  • sizeThatFitsとシンボルを使用するものには注意する
• シンボルのテキストサイズとポイントサイズが同じであれば問題ない
• aspectFitまたはスケールに合わせず中央揃えを使用する
• CALayerを使用している場合は、コンテンツの重力が中央に設定されていることを確認する
• シンボルをテキストの隣に配置するときは、シンボルを中央に揃えるのではなく、ベースラインに揃えるようにする
• 垂直方向にalignment guideを使用して、テキストのサイズが変更されたときシンボルとテキストが調和するようにする