SF Pro Text nie jest dostępny w Figmie domyślnie. Pobierz go z oficjalnej strony Apple Developer, zainstaluj w systemie, a następnie uruchom Figmę. W aplikacji desktopowej font powinien pojawić się automatycznie. W wersji przeglądarkowej potrzebujesz dodatkowo Figma Font Helper.
Jak zainstalować SF Pro w systemie?
Na macOS SF Pro może być już obecny w systemie. Dotyczy to także niektórych instalacji związanych z narzędziami Apple, na przykład Xcode. Jeśli fontu nie ma na komputerze albo korzystasz z Windowsa, pobierz aktualny pakiet z sekcji Fonts na stronie Apple Developer.
Instalacja wygląda następująco:
- Otwórz stronę Apple Developer poświęconą fontom i pobierz pakiet SF Pro.
- Rozpakuj pobrany plik, jeśli ma format ZIP, albo otwórz obraz DMG.
- Na macOS uruchom pliki fontów i wybierz instalację w aplikacji Font Book.
- W systemie Windows kliknij pliki fontów prawym przyciskiem myszy i wybierz instalację albo przeciągnij je do ustawień fontów systemowych.
- Zamknij i ponownie uruchom Figmę, jeśli była otwarta podczas instalacji.
Jak sprawić, żeby Figma widziała font?
W aplikacji desktopowej Figma korzysta z fontów zainstalowanych w systemie. Po instalacji otwórz plik, zaznacz warstwę tekstową i wybierz SF Pro Text z listy krojów. Jeśli font nie pojawi się od razu, uruchom ponownie aplikację albo sprawdź, czy zainstalowane są właściwe pliki fontu.
Wersja uruchomiona w przeglądarce wymaga dodatkowego składnika. Zainstaluj Figma Font Helper, a następnie odśwież kartę z Figmą. Bez tego narzędzia przeglądarka może nie przekazywać Figmie dostępu do lokalnych fontów, więc SF Pro nie będzie widoczny na liście.
Jeśli projektujesz głównie w przeglądarce, Font Helper musi działać lokalnie na komputerze. Samo zainstalowanie fontu w systemie nie zawsze wystarczy.
Uwaga na licencję: fonty Apple SF Pro są udostępniane na warunkach określonych przez Apple. Nie traktuj ich jak dowolnych fontów open source. Wykorzystuj je zgodnie z licencją Apple, w szczególności do projektowania interfejsów przeznaczonych dla platform Apple.
Jak używać SF Pro Text w projekcie UI?
Pakiet SF Pro obejmuje między innymi warianty Text i Display. Dobór zależy przede wszystkim od rozmiaru tekstu oraz jego funkcji:
- SF Pro Text sprawdza się przy małych rozmiarach, na przykład w opisach, etykietach i treści interfejsu.
- SF Pro Display jest przeznaczony głównie do większych nagłówków i krótkich elementów ekspozycyjnych.
- Przy skalowaniu tekstu sprawdź odstępy między znakami, wysokość linii i zawijanie dłuższych etykiet.
- Dla interfejsów Apple porównaj typografię z zaleceniami Apple Human Interface Guidelines.
Po wykonaniu tych kroków SF Pro Text powinien być dostępny zarówno w aplikacji Figma, jak i w jej wersji webowej z aktywnym Figma Font Helper.
