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

Apple dostarcza ponad 6000 symboli SF Symbols, a aplikacja SF Symbols jest darmowa, jednak większość aplikacji prędzej czy później potrzebuje ikony, której Apple nie udostępnia: znaku marki, glifu specyficznego dla danej dziedziny lub niestandardowego działania, które nie pasuje do systemowego słownika. Właściwą drogą jest stworzenie niestandardowego SF Symbol zamiast wstawienia statycznego SVG, ponieważ niestandardowe SF Symbols dziedziczą mechanizmy systemu za darmo: skalują się wraz z Dynamic Type, uczestniczą w animacjach Symbol Effects, renderują się w czterech trybach renderowania, zachowują zgodność z typografią SF Pro i respektują ustawienia dostępności bez kodu specyficznego dla aplikacji. Statyczne pliki SVG nie uczestniczą w żadnym z tych mechanizmów.

Niniejszy wpis opisuje proces pracy z szablonem zmiennym aplikacji SF Symbols, wprowadzonym w SF Symbols 3 podczas WWDC 2021¹. Ramą jest pytanie „czym są trzy wymagane projekty źródłowe i dlaczego”, ponieważ format szablonu stanowi nośny element procesu, który większość projektantów i inżynierów pomija za pierwszym razem. Kolejne wydania SF Symbols (4, 5, 6, 7) rozszerzyły format szablonu o zmienny kolor, przejścia magic replace, obsługę gradientów oraz efekty animacji, ale podstawowa trójźródłowa struktura szablonu zmiennego pozostaje stabilna od czasów SF Symbols 3.

TL;DR

• Niestandardowe SF Symbols rozpoczyna się od szablonu wyeksportowanego z aplikacji SF Symbols (File > Export Template lub ⌘E)². Szablon to plik SVG z prowadnicami zdefiniowanymi przez system, służącymi do określenia rozmiaru, oraz z zastępczym projektem symbolu, który należy zastąpić.
• Szablon zmienny wymaga jedynie 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 to nośne wymaganie: każda ścieżka musi mieć tę samą liczbę punktów kotwiczących, ten sam punkt początkowy oraz ten sam kierunek we wszystkich trzech źródłach. Bez tego interpolacja generuje zniekształcone glify.
• Niestandardowe symbole obsługują wszystkie cztery tryby renderowania (monochromatyczny, hierarchiczny, paletowy, wielobarwny) oraz strukturę warstw (podstawowa, drugorzędna, trzeciorzędna). Panel inspektora renderowania w Symbol Editor przypisuje podścieżki do warstw.
• Dostarczenie końcowe: należy dodać plik symbolu do Xcode jako Symbol Image Set w katalogu zasobów. SwiftUI odwołuje się do niego poprzez Image(_:) z nazwą symbolu; resztę obsługuje system.

Szablon zmienny

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

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

Aplikacja używa tych trzech źródeł 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 przebiega 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 zredukował ten wysiłek do 3 + interpolacji, co stanowi różnicę między rozsądnym wysiłkiem projektowym a takim, który zabija 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 kotwiczących. Kwadrat o grubości Regular z 4 kotwicami musi mieć 4 kotwice w wariantach Ultralight i Black, nawet jeśli widoczna krzywizna się różni.
• Ten sam punkt początkowy. Pierwsza kotwica ścieżki musi znajdować się w tej samej pozycji koncepcyjnej (np. zawsze w lewym górnym rogu) we wszystkich trzech grubościach.
• Ten sam kierunek. Wszystkie trzy ścieżki obrysowują kształt w tej samej kolejności (zgodnie z ruchem wskazówek zegara lub przeciwnie).

Niespełnienie któregokolwiek z tych warunków powoduje artefakty interpolacji: załamania, błędne nakładanie, brakujące obrysy. Aplikacja SF Symbols ujawnia niektóre z nich (podgląd wariantu pokazuje wynik interpolacji), ale subtelne problemy ujawniają się dopiero w finalnym wyeksportowanym zasobie.

Pragmatyczny przepływ pracy polega na zaprojektowaniu najpierw wariantu Regular-Small, a następnie wyprowadzeniu Ultralight przez zmniejszenie szerokości obrysu oraz Black przez zwiększenie szerokości obrysu na tym samym szkielecie ścieżki. Każde wyprowadzenie zachowuje liczbę kotwic, punkt początkowy i kierunek z konstrukcji. Projektowanie każdej grubości niezależnie generuje problemy ze zgodnością, których debugowanie zajmuje więcej czasu niż przebudowanie konstrukcji od nowa.

Przepływ pracy

Pięć kroków od koncepcji do działającego zasobu:

1. Znaleźć podobny istniejący symbol

Biblioteka aplikacji SF Symbols zawiera ponad 6000 symboli. Warto znaleźć symbol strukturalnie podobny do koncepcji (okrąg z zawartością, kwadrat z nakładką, linia z dekoracją). Ścieżka eksportu szablonu wykorzystuje geometrię istniejącego symbolu jako punkt wyjścia.

2. Wyeksportować szablon

File > Export Template… lub ⌘E. Należy wybrać „Variable” jako typ szablonu. Wynikiem jest plik SVG z trzema źródłowymi grubościami symbolu, plus geometria odniesienia pokazująca cap height, baseline oraz wizualne marginesy używane przez SF Symbols do wyrównania z tekstem SF Pro.

3. Zastąpić ścieżki szablonu

Należy otworzyć plik SVG w edytorze wektorowym (Sketch, Figma, Illustrator, Affinity Designer, Inkscape). Nazwane warstwy szablonu zawierają trzy projekty źródłowe. Każdą z nich należy zastąpić własnym projektem, zachowując nazwy warstw oraz wyrównanie do cap height i baseline.

Kluczowe znaczenie ma tu wymóg zgodności ścieżek: warto projektować każdą grubość na tym samym szkielecie ścieżki, zmieniając szerokość obrysu lub grubość wypełnienia, zamiast rysować od nowa. Workflow „zduplikuj i zmodyfikuj” w narzędziach wektorowych to ścieżka najmniejszego oporu.

4. Ponownie zaimportować i zweryfikować

Należy przeciągnąć zmodyfikowany SVG z powrotem do aplikacji SF Symbols. Aplikacja generuje 27 wariantów i wyświetla je w siatce wariantów. Każdą kombinację grubości i skali warto sprawdzić przy różnych poziomach zoomu; artefakty interpolacji często pojawiają się przy pośrednich grubościach, które nie są od razu oczywiste.

W przypadku symboli z wieloma elementami wizualnymi (korpus z odznaką, okrąg z kształtem wewnętrznym) należy otworzyć panel inspektora renderowania i przypisać podścieżki do warstw (podstawowa, drugorzędna, trzeciorzędna). Przypisania warstw określają sposób renderowania symbolu w trybach hierarchicznym, paletowym i wielobarwnym.

5. Dodać do Xcode

Należy przeciągnąć plik symbolu (.svg wyeksportowany z SF Symbols) do katalogu zasobów Xcode. Xcode traktuje go jako Symbol Image Set. Odwołanie z kodu:

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

Image(_:) (bez parametru systemName:) ładuje obraz z katalogu zasobów. Te same zachowania .symbolRenderingMode, .foregroundStyle, .symbolEffect oraz Dynamic Type, które działają na symbolach systemowych, działają również na symbolach niestandardowych — pod warunkiem, że symbol został poprawnie utworzony.

Tryby renderowania i struktura warstw

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

• Monochromatyczny. Pojedynczy kolor (foregroundStyle). Najprostszy i najczęściej używany tryb.
• Hierarchiczny. Pojedynczy kolor o zmiennej krycie w zależności od warstwy. Warstwy zdefiniowane w panelu inspektora renderowania otrzymują wstępnie ustawione wartości krycia; deweloper stosuje jeden odcień i automatycznie uzyskuje wizualną hierarchię.
• Paletowy. Jawny kolor dla każdej warstwy. Deweloper przekazuje wiele argumentów foregroundStyle; każda warstwa otrzymuje swój własny.
• Wielobarwny. Kolory zdefiniowane przez Apple, stałe dla każdej warstwy. W przypadku symboli niestandardowych są to kolory przypisane przez projektanta w konfiguracji Multicolor w Symbol Editor.

To właśnie struktura warstw sprawia, że tryby hierarchiczny, paletowy i wielobarwny działają. Niestandardowy symbol bez przypisań warstw zwija wszystkie ścieżki do warstwy podstawowej; symbol nadal renderuje się w trybie monochromatycznym, ale w pozostałych trybach nie generuje wizualnej hierarchii. Warto poświęcić czas na przypisanie warstw w panelu inspektora renderowania dla każdego symbolu, który zyskuje na głębi.

Typowe niepowodzenia

Trzy wzorce z dzienników niepowodzeń niestandardowych symboli:

Naruszenia zgodności ścieżek. Najczęstszy problem. Symbol, który „wygląda dobrze w grubości Regular”, ale generuje wadliwe pośrednie grubości, niemal zawsze ma problem ze zgodnością ścieżek. Diagnoza: należy otworzyć siatkę wariantów aplikacji SF Symbols i przyjrzeć się wariantom o średniej grubości; jeśli wykazują załamania lub obrysy, które nie odpowiadają oczekiwanej interpolacji, jedna z trzech ścieżek źródłowych narusza zgodność.

Niedopasowana baseline lub cap height. Symbole zaprojektowane bez uwzględnienia prowadnicy baseline szablonu będą leżeć niezgrabnie obok tekstu. Objaw wizualny: symbol wydaje się zbyt wysoki lub zbyt niski, gdy zostanie umieszczony w linii z Text w stylu .body. Rozwiązanie: warto użyć geometrii odniesienia szablonu i umieścić optyczny środek symbolu w punkcie środkowym cap height.

Brak przypisań warstw. Symbol z bogatą strukturą wewnętrzną (wiele elementów wizualnych), ale bez przypisań warstw, renderuje się poprawnie wyłącznie w trybie monochromatycznym. Aplikacje wybierające tryb hierarchiczny lub paletowy zobaczą płaski wynik. Rozwiązanie: należy otworzyć panel inspektora renderowania i przypisać każdą podścieżkę do warstwy (podstawowa dla głównego kształtu, drugorzędna dla akcentów, trzeciorzędna dla detali trzeciorzędnych).

Co ten wzorzec oznacza dla aplikacji iOS 26+

Trzy wnioski.

1. Należy używać niestandardowych SF Symbols, a nie surowych plików SVG, dla ikon wewnątrz aplikacji. Workflow tworzenia niestandardowych symboli to realna praca inżynierska, ale integracja z systemem (Dynamic Type, Symbol Effects, tryby renderowania, dostępność) sprawia, że koszt jest opłacalny dla każdej ikony, która zostaje w UI na dłużej. Statyczne pliki SVG sprawdzają się przy jednorazowych zasobach marketingowych, a nie w głównym UI.

2. Należy projektować z jednego szkieletu; zmieniać grubość obrysu, a nie strukturę ścieżki. Naruszenia zgodności ścieżek to nośny tryb awarii. Defensywny proces projektowania zaczyna się od jednej grubości (Regular-Small), wyprowadza Ultralight przez zmniejszenie obrysu oraz Black przez zwiększenie obrysu z tej samej geometrii ścieżki. Zgodność wynika z konstrukcji.

3. Należy jawnie przypisywać warstwy każdemu symbolowi, który zyskuje na trybach renderowania. Symbol renderujący się wyłącznie w trybie monochromatycznym to symbol, który rezygnuje z połowy systemu SF Symbols. Panel inspektora renderowania wymaga niewiele czasu; rezultatem są symbole uczestniczące w trybach hierarchicznym, paletowym i wielobarwnym obok symboli systemowych.

Pełny klaster Apple Ecosystem: typowane App Intents; serwery MCP; pytanie o routing; Foundation Models; rozróżnienie runtime vs tooling LLM; trzy powierzchnie; wzorzec single source of truth; Dwa serwery MCP; hooks dla rozwoju Apple; Live Activities; kontrakt runtime watchOS; wewnętrzne mechanizmy SwiftUI; model mentalny przestrzenny RealityKit; dyscyplina schematu SwiftData; wzorce Liquid Glass; wieloplatformowe dostarczanie; macierz platform; framework Vision; Symbol Effects; wnioskowanie Core ML; API Writing Tools; Swift Testing; Privacy Manifest; Dostępność jako platforma; typografia SF Pro; wzorce przestrzenne visionOS; framework Speech; migracje SwiftData; silnik fokusu tvOS; wewnętrzne mechanizmy @Observable; protokół Layout SwiftUI; o czym odmawiam pisać. Centrum znajduje się w Apple Ecosystem Series. Szerszy kontekst dotyczący iOS z agentami AI można znaleźć w przewodniku iOS Agent Development.

FAQ

Czy potrzebna jest aplikacja SF Symbols, czy można tworzyć niestandardowe symbole w inny sposób?

Aplikacja SF Symbols jest oficjalnym narzędziem i jedynym, które wytwarza zwalidowane, kompatybilne z App Store niestandardowe symbole. Istnieją narzędzia firm trzecich i konwertery online, ale generują one pliki SVG, które mogą, lecz nie muszą spełniać wymagań formatu szablonu. W produkcyjnych aplikacjach należy używać aplikacji SF Symbols.

Czy można tworzyć niestandardowe symbole w systemie Windows?

Aplikacja SF Symbols działa wyłącznie na macOS. Wyeksportowany szablon SVG można edytować na dowolnej platformie wyposażonej w edytor wektorowy, ale kroki eksportu i ponownego importu wymagają macOS. Większość zespołów ma przynajmniej jednego projektanta na macOS, który może obsłużyć te kroki; w workflow zespołów rozproszonych plik SVG przechodzi przez kontrolę wersji lub współdzielony magazyn.

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

Większość efektów symboli działa automatycznie, jeśli struktura symbolu jest poprawnie utworzona: bounce, pulse, scale i pozostałe stosują się do symbolu niezależnie od jego źródła. Przejście zawartości .replace wymaga, aby symbol źródłowy i docelowy miały zgodne struktury (podobne liczby warstw, podobny ogólny kształt). Wpis Symbol Effects z tego klastra szczegółowo omawia słownik efektów.

Jaka jest różnica między Symbol Image Set a zwykłym Image Set w Xcode?

Symbol Image Set importuje pełny szablon symbolu (wszystkie 27 wariantów) i udostępnia je przez potok renderowania SF Symbols. Symbol skaluje się wraz z Dynamic Type, uczestniczy w trybach renderowania i działa z .symbolEffect. Zwykły Image Set to statyczny zasób rastrowy lub 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 platformę (małe dla watchOS, duże dla visionOS), uczestniczą w funkcjach dostępności platformy oraz respektują konwencje kolorów i efektów platformy. Tworzenie niestandardowego symbolu wykonuje się jednorazowo; zachowanie wieloplatformowe jest automatyczne. Wpisy Apple Platform Matrix oraz wzorce przestrzenne visionOS z tego klastra omawiają rozważania dotyczące poszczególnych platform.

Jaki jest wpływ na proces przeglądu w App Store?

Żaden. Niestandardowe SF Symbols są przeglądane identycznie jak inne zasoby z Asset Catalog. Wytyczne dotyczące stylu wizualnego (zakaz podszywania się pod wzorce UI Apple, zakaz naruszania znaków towarowych marki) stosują się do niestandardowych symboli tak samo jak do innych niestandardowych grafik; poza tym proces przeglądu traktuje je jak standardowe zasoby graficzne.

Bibliografia