Niestandardowe SF Symbols: szablon zmienny i trzy wymagane projekty źródłowe

Apple udostępnia ponad 6 900 SF Symbols, a aplikacja SF Symbols jest bezpłatna. Mimo to większość aplikacji prędzej czy później potrzebuje ikony, której Apple nie ma: znaku marki, glifu specyficznego dla danej dziedziny albo niestandardowej akcji, która nie mieści się w systemowym słowniku. Właściwym rozwiązaniem jest wtedy utworzenie niestandardowego SF Symbol, a nie wstawienie statycznego SVG, ponieważ niestandardowe SF Symbols od razu korzystają z mechanizmów systemowych: skalują się z Dynamic Type, działają z animacjami Symbol Effects, renderują się w czterech trybach renderowania, wyrównują się do typografii SF Pro i respektują ustawienia dostępności bez kodu pisanego osobno dla każdej aplikacji. Statyczne SVG nie uczestniczą w żadnym z tych mechanizmów.

Ten wpis prowadzi przez przepływ pracy oparty na szablonie zmiennym aplikacji SF Symbols, wprowadzonym w SF Symbols 3 podczas WWDC 2021¹. Punktem ciężkości jest pytanie „czym są trzy wymagane projekty źródłowe i dlaczego są potrzebne”, ponieważ format szablonu to kluczowy element całego procesu, który projektanci i inżynierowie najczęściej pomijają przy pierwszym podejściu. Kolejne wydania SF Symbols (4, 5, 6, 7) rozszerzały format szablonu o zmienny kolor, przejścia magic replace, obsługę gradientów i efekty animacji, ale podstawowa struktura szablonu zmiennego, oparta na trzech źródłach, pozostaje stabilna od SF Symbols 3.

TL;DR

• Niestandardowe SF Symbols zaczynają się od szablonu wyeksportowanego z aplikacji SF Symbols (File > Export Template albo ⌘E)². Szablon jest plikiem SVG z systemowo zdefiniowanymi prowadnicami rozmiaru oraz zastępczym projektem symbolu do podmiany.
• Szablon zmienny wymaga tylko trzech projektów źródłowych: Ultralight-Small, Regular-Small i Black-Small. Aplikacja SF Symbols automatycznie interpoluje pozostałe 24 warianty (3 skale × 9 grubości)³.
• Zgodność ścieżek jest warunkiem krytycznym: każda ścieżka musi mieć taką samą liczbę punktów kotwiczenia, ten sam punkt początkowy i ten sam kierunek we wszystkich trzech źródłach. Bez tego interpolacja tworzy zniekształcone glify.
• Niestandardowe symbole obsługują wszystkie cztery tryby renderowania (monochrome, hierarchical, palette, multicolor) oraz strukturę warstw (primary, secondary, tertiary). Panel inspektora renderowania w edytorze symboli przypisuje podścieżki do warstw.
• Końcowe przekazanie: należy dodać plik symbolu do Xcode jako Symbol Image Set w katalogu zasobów. SwiftUI odwołuje się do niego przez Image(_:) z nazwą symbolu; resztą zajmuje się system.

Szablon zmienny

SF Symbols 3 (WWDC 2021) wprowadził szablon zmienny³, czyli pojedynczy plik SVG obejmujący trzy projekty źródłowe, z którego aplikacja SF Symbols generuje pełną siatkę 27 wariantów. Te trzy źródła to:

• Ultralight-Small. Najlżejsza grubość, najmniejsza skala.
• Regular-Small. Środkowa grubość, najmniejsza skala.
• Black-Small. Najcięższa grubość, najmniejsza skala.

Aplikacja wykorzystuje je do interpolacji pozostałych 24 komórek (Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large oraz pośrednich grubości w każdej skali). Interpolacja odbywa się automatycznie, pod warunkiem że ścieżki źródłowe mają zgodną strukturę.

Zanim SF Symbols 3 wprowadził szablon zmienny, niestandardowe symbole wymagały ręcznego narysowania wszystkich 27 wariantów. Szablon zmienny sprowadził ten wysiłek do 3 projektów + interpolacji, czyli do różnicy między pracą projektową możliwą do opanowania a zadaniem, które potrafi zatrzymać cały projekt.

Wymóg zgodności danych

Interpolacja ścieżek wymaga, aby trzy ścieżki źródłowe opisywały ten sam kształt w tej samej kolejności²:

• Ta sama liczba punktów kotwiczenia. Kwadrat w grubości Regular z 4 punktami kotwiczenia musi mieć 4 punkty także w Ultralight i Black, nawet jeśli widoczna krzywizna się różni.
• Ten sam punkt początkowy. Pierwszy punkt kotwiczenia ścieżki musi znajdować się w tym samym logicznym miejscu (np. zawsze w lewym górnym rogu) we wszystkich trzech grubościach.
• Ten sam kierunek. Wszystkie trzy ścieżki przechodzą przez kształt w tej samej kolejności (zgodnie z ruchem wskazówek zegara albo przeciwnie).

Naruszenie któregokolwiek z tych warunków powoduje artefakty interpolacji: załamania, błędne nakładanie się kształtów, brakujące kreski. Aplikacja SF Symbols pokazuje część takich problemów (podgląd wariantu prezentuje wynik interpolacji), ale subtelniejsze błędy ujawniają się dopiero w finalnie wyeksportowanym zasobie.

Pragmatyczny przepływ pracy polega na zaprojektowaniu najpierw Regular-Small, a następnie wyprowadzeniu Ultralight przez zmniejszenie grubości kreski i Black przez jej zwiększenie na tym samym szkielecie ścieżki. Każde takie wyprowadzenie z definicji zachowuje liczbę punktów kotwiczenia, punkt początkowy i kierunek. Projektowanie każdej grubości niezależnie tworzy problemy ze zgodnością, których diagnoza trwa dłużej niż ponowne zbudowanie konstrukcji.

Przepływ pracy

Od koncepcji do działającego zasobu prowadzi 5 kroków:

1. Znaleźć podobny istniejący symbol

Biblioteka aplikacji SF Symbols zawiera ponad 6 900 symboli. Warto znaleźć taki, który strukturalnie przypomina koncepcję: koło z zawartością, kwadrat z nakładką, linia z ozdobnym elementem. Ścieżka eksportu szablonu używa geometrii istniejącego symbolu jako punktu wyjścia.

2. Wyeksportować szablon

File > Export Template… albo ⌘E. Jako typ szablonu należy wybrać „Variable”. Wynikiem jest plik SVG z trzema źródłowymi grubościami symbolu oraz geometrią referencyjną pokazującą wysokość wersalików, linię bazową i marginesy optyczne, których SF Symbols używa do wyrównania z tekstem SF Pro.

3. Zastąpić ścieżki szablonu

Plik SVG należy otworzyć w edytorze wektorowym (Sketch, Figma, Illustrator, Affinity Designer, Inkscape). Nazwane warstwy szablonu zawierają trzy projekty źródłowe. Każdy z nich należy zastąpić własnym projektem, zachowując nazwy warstw oraz wyrównanie do wysokości wersalików i linii bazowej.

W tym miejscu kluczowy jest wymóg zgodności ścieżek: każdą grubość należy projektować z tego samego szkieletu ścieżki, zmieniając grubość kreski albo ciężar wypełnienia, a nie rysując kształt od nowa. W narzędziach wektorowych najmniej oporu stawia przepływ pracy typu „duplikuj i zmodyfikuj”.

4. Zaimportować ponownie i zweryfikować

Zmodyfikowany SVG należy przeciągnąć z powrotem do aplikacji SF Symbols. Aplikacja wygeneruje 27 wariantów i pokaże je w siatce wariantów. Każdą kombinację grubości i skali warto sprawdzić przy kilku poziomach powiększenia; artefakty interpolacji często pojawiają się w grubościach pośrednich, gdzie nie są od razu oczywiste.

W przypadku symboli z wieloma elementami wizualnymi (np. korpus i odznaka, koło i kształt wewnętrzny) należy otworzyć panel inspektora renderowania i przypisać podścieżki do warstw (primary, secondary, tertiary). Te przypisania decydują o tym, jak symbol renderuje się w trybach hierarchical, palette i multicolor.

5. Dodać do Xcode

Plik symbolu (.svg wyeksportowany z SF Symbols) należy przeciągnąć do katalogu zasobów w Xcode. Xcode traktuje go jako Symbol Image Set. W kodzie odwołanie wygląda tak:

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:) (bez parametru systemName:) ładuje zasób z katalogu. Te same zachowania .symbolRenderingMode, .foregroundStyle, .symbolEffect i Dynamic Type, które działają na symbolach systemowych, działają także na symbolach niestandardowych, o ile symbol został poprawnie przygotowany.

Tryby renderowania i struktura warstw

Cztery tryby renderowania udostępniane przez SF Symbols działają na symbolach niestandardowych tak samo jak na systemowych⁴:

• Monochrome. Jeden kolor (foregroundStyle). Najprostszy i najczęściej używany tryb.
• Hierarchical. Jeden kolor, różna przezroczystość zależnie od warstwy. Warstwy zdefiniowane w panelu inspektora renderowania otrzymują wstępnie ustawione poziomy przezroczystości; deweloper stosuje jeden tint i automatycznie dostaje hierarchię wizualną.
• Palette. Jawny kolor dla każdej warstwy. Deweloper przekazuje wiele argumentów foregroundStyle; każda warstwa otrzymuje własny kolor.
• Multicolor. Stałe kolory przypisane do warstw. W przypadku symboli niestandardowych są to kolory przypisane przez projektanta w konfiguracji Multicolor edytora symboli.

To struktura warstw sprawia, że tryby hierarchical, palette i multicolor działają. Niestandardowy symbol bez przypisań warstw składa wszystkie ścieżki do warstwy primary; nadal renderuje się poprawnie w monochrome, ale w pozostałych trybach nie tworzy hierarchii wizualnej. Warto poświęcić kilka minut na przypisanie warstw w panelu inspektora renderowania dla każdego symbolu, któremu służy głębia.

Typowe błędy

W logach nieudanych niestandardowych symboli powtarzają się trzy wzorce:

Naruszenia zgodności ścieżek. To najczęstszy problem. Symbol, który „wygląda dobrze w grubości Regular”, ale tworzy wadliwe grubości pośrednie, niemal zawsze ma problem ze zgodnością ścieżek. Diagnoza: należy otworzyć siatkę wariantów w aplikacji SF Symbols i sprawdzić warianty o średniej grubości; jeśli widać załamania albo kreski niezgodne z oczekiwaną interpolacją, jedna z trzech ścieżek źródłowych narusza wymagania zgodności.

Źle wyrównana linia bazowa albo wysokość wersalików. Symbole projektowane bez poszanowania prowadnicy linii bazowej z szablonu będą wyglądały niezgrabnie obok tekstu. Objaw wizualny: symbol wydaje się zbyt wysoki albo zbyt niski, gdy zostanie umieszczony w jednej linii z Text stylizowanym jak tekst .body. Naprawa: użyć geometrii referencyjnej z szablonu i ustawić optyczny środek symbolu w połowie wysokości wersalików.

Brak przypisań warstw. Symbol z bogatą strukturą wewnętrzną (wiele elementów wizualnych), ale bez przypisań warstw, renderuje się poprawnie tylko w monochrome. Aplikacje wybierające tryb hierarchical albo palette dostają płaski wynik. Naprawa: otworzyć panel inspektora renderowania i przypisać każdą podścieżkę do warstwy (primary dla głównego kształtu, secondary dla akcentów, tertiary dla detalu trzeciego poziomu).

Co ten wzorzec oznacza dla aplikacji iOS 26+

Trzy wnioski.

1. Do ikon w aplikacji należy używać niestandardowych SF Symbols, a nie surowych SVG. Przepływ pracy dla niestandardowych symboli to realna praca inżynierska, ale integracja z systemem (Dynamic Type, Symbol Effects, tryby renderowania, dostępność) sprawia, że koszt jest uzasadniony dla każdej ikony, która ma długo żyć w UI. Statyczne SVG nadają się do jednorazowych materiałów marketingowych, nie do rdzenia UI.

2. Projekt należy budować z jednego szkieletu; zmieniać grubość kreski, nie strukturę ścieżki. Naruszenia zgodności ścieżek są najważniejszym trybem awarii. Obronny proces projektowy zaczyna się od jednej grubości (Regular-Small), potem wyprowadza Ultralight przez zmniejszenie kreski i Black przez jej zwiększenie z tej samej geometrii ścieżki. Zgodność wynika wtedy z samej konstrukcji.

3. Warstwy należy przypisywać jawnie dla każdego symbolu, który korzysta z trybów renderowania. Symbol renderujący się tylko w monochrome rezygnuje z połowy systemu SF Symbols. Panel inspektora renderowania zajmuje kilka minut; wynikiem są symbole działające w trybach hierarchical, palette i multicolor obok symboli systemowych.

Pełny klaster Apple Ecosystem: typowane App Intents; serwery MCP; kwestia routingu; Foundation Models; różnica między środowiskiem wykonawczym a narzędziami LLM; trzy powierzchnie; wzorzec jednego źródła prawdy; dwa serwery MCP; punkty zaczepienia dla tworzenia na platformy Apple; Live Activities; środowisko wykonawcze watchOS; wewnętrzna budowa SwiftUI; przestrzenny model mentalny RealityKit; dyscyplina schematu SwiftData; wzorce Liquid Glass; wydawanie na wiele platform; macierz platform; Vision framework; Symbol Effects; wnioskowanie Core ML; API Writing Tools; Swift Testing; Privacy Manifest; dostępność jako platforma; typografia SF Pro; wzorce przestrzenne visionOS; Speech framework; migracje SwiftData; silnik fokusu tvOS; wewnętrzna budowa @Observable; protokół SwiftUI Layout; o czym odmawiam pisania. Centrum serii znajduje się pod adresem Apple Ecosystem Series. Szerszy kontekst iOS z agentami AI omawia przewodnik iOS Agent Development.

FAQ

Czy potrzebna jest aplikacja SF Symbols, czy można tworzyć niestandardowe symbole inaczej?

Aplikacja SF Symbols jest oficjalnym narzędziem i jedynym, które tworzy zweryfikowane niestandardowe symbole zgodne z App Store. Istnieją narzędzia firm trzecich i konwertery online, ale generowane przez nie SVG mogą spełniać wymagania formatu szablonu albo ich nie spełniać. W aplikacjach produkcyjnych należy używać aplikacji SF Symbols.

Czy można tworzyć niestandardowe symbole w Windows?

Aplikacja SF Symbols działa tylko w macOS. Wyeksportowany szablon SVG można edytować na dowolnej platformie w edytorze wektorowym, ale kroki eksportu i ponownego importu wymagają macOS. Większość zespołów ma co najmniej jednego projektanta pracującego na macOS, który może obsłużyć te etapy; w zespołach zdalnych plik SVG przechodzi przez kontrolę wersji albo współdzielony magazyn plików.

Jak obsłużyć .symbolEffect w niestandardowym symbolu?

Większość efektów symboli działa automatycznie, jeśli struktura symbolu jest poprawnie uformowana: bounce, pulse, scale i pozostałe efekty stosują się do symbolu niezależnie od jego źródła. Przejście treści .replace wymaga, aby symbol początkowy i końcowy miały zgodne struktury (podobną liczbę warstw, podobny ogólny kształt). Wpis klastra o Symbol Effects szczegółowo omawia słownik efektów.

Czym różni się Symbol Image Set od zwykłego Image Set w Xcode?

Symbol Image Set importuje pełny szablon symbolu (wszystkie 27 wariantów) i udostępnia go przez potok renderowania SF Symbols. Symbol skaluje się z Dynamic Type, uczestniczy w trybach renderowania i działa z .symbolEffect. Zwykły Image Set jest statycznym zasobem rastrowym albo SVG, który nie uczestniczy w żadnym z tych mechanizmów. Dla niestandardowych SF Symbols należy używać Symbol Image Set.

Jak niestandardowe symbole zachowują się w visionOS i watchOS?

Tak samo jak symbole systemowe: renderują się w rozmiarach oczekiwanych przez daną platformę (małe w watchOS, duże w visionOS), uczestniczą w funkcjach dostępności platformy oraz respektują jej konwencje koloru i efektów. Przygotowanie niestandardowego symbolu wykonuje się raz; zachowanie międzyplatformowe jest automatyczne. Wpisy klastra o macierzy platform Apple i wzorcach przestrzennych visionOS omawiają kwestie specyficzne dla poszczególnych platform.

Jaki jest wpływ na weryfikację w App Store?

Żaden. Niestandardowe SF Symbols są weryfikowane tak samo jak inne zasoby Asset Catalog. Wytyczne stylu wizualnego (nie podszywać się pod wzorce UI Apple, nie naruszać znaków towarowych marek) dotyczą niestandardowych symboli tak samo jak innych niestandardowych grafik; poza tym proces weryfikacji traktuje je jak standardowe zasoby graficzne.

Źródła