Budowanie biblioteki komponentów za pomocą Figma

Pracuję nad stworzeniem i utrzymaniem głównej biblioteki naszego systemu projektowania, Lexicon. Używaliśmy aplikacji Sketch przez pierwszy rok, a potem przenieśliśmy się do Figma, gdzie zarządzanie biblioteką różniło się w niektórych aspektach, co sprawiało, że zmiana była dla nas dość trudna.

Szczerze mówiąc, jak każda budowa biblioteki, wymaga czasu, wysiłku i planowania, ale jest tego warta, ponieważ pomoże w dostarczeniu szczegółowych komponentów dla Twojego zespołu. Pomoże to również zwiększyć ogólną spójność projektu i na dłuższą metę ułatwi konserwację. Mam nadzieję, że wskazówki, które przedstawię w tym artykule, ułatwią Ci cały proces.

W tym artykule przedstawimy kroki potrzebne do zbudowania biblioteki komponentów za pomocą Figma przy użyciu stylów i głównego komponentu. (Komponent główny pozwoli ci zastosować wiele zmian jednocześnie.) Omówię również szczegółowo organizację komponentów i podam możliwe rozwiązanie, jeśli masz w bibliotece dużą liczbę ikon.

Uwaga: Aby ułatwić korzystanie, aktualizowanie i konserwację, stwierdziliśmy, że najlepiej jest użyć oddzielnego pliku Figma dla biblioteki, a następnie opublikować go jako „bibliotekę” zespołu, zamiast publikować poszczególne komponenty.

Pierwsze kroki

Ten przewodnik został stworzony z perspektywy projektanta i jeśli masz przynajmniej podstawową wiedzę na temat Figma (lub Sketch), powinien pomóc Ci rozpocząć tworzenie, organizowanie i utrzymywanie biblioteki komponentów dla Twojego zespołu projektowego.

Jeśli jesteś nowy w Figma, zapoznaj się z poniższymi samouczkami przed kontynuowaniem artykułu:

• Najlepsze praktyki: komponenty, style i biblioteki współdzielone
• Wprowadzenie do Figma: Przewodnik dla początkujących do Figma Basics (wideo)
• Figma dla początkujących
• Figma 101

Wymagania

Zanim zaczniemy, musimy spełnić pewne wymagania, aby zdefiniować style dla biblioteki.

Skala typografii

Pierwszym krokiem do zrobienia jest zdefiniowanie skali typografii; pomaga skoncentrować się na tym, jak rozmiar tekstu i wysokość linii rosną w systemie, umożliwiając zdefiniowanie wizualnej hierarchii tekstów.

Rodzaj wagi zależy od tego, co projektujesz. Powszechnie stosuje się większe proporcje przy projektach stron internetowych, a mniejsze przy projektowaniu produktów cyfrowych.

Powodem tego jest cel projektu — strona internetowa jest zwykle zaprojektowana do komunikacji i konwersji, więc daje jedno lub dwa bezpośrednie działania. W tym kontekście łatwiej jest mieć 36 pikseli dla tytułu głównego, 24 pikseli dla tytułu dodatkowego i 16 pikseli dla tekstu opisu.

Powiązane zasoby: „8-punktowa siatka: typografia w sieci” autorstwa Elliota Dahla.

Z drugiej strony produkty lub usługi cyfrowe mają na celu zapewnienie rozwiązania konkretnego problemu, zwykle z wieloma działaniami i możliwymi przepływami. Oznacza to więcej informacji, więcej treści i więcej komponentów w tej samej przestrzeni.

W tym przypadku osobiście uważam, że rzadko używam więcej niż 24 piksele dla tekstów. Częściej używa się małych rozmiarów komponentów — zwykle od 12 do 18 pikseli, w zależności od wagi tekstu.

Jeśli projektujesz produkt cyfrowy, warto najpierw porozmawiać z programistami. Łatwiej jest utrzymać skalę typograficzną opartą na EM/REM bardziej niż na rzeczywistych pikselach. Zawsze zalecane jest utworzenie reguły konwersji pikseli na wielokrotności EM/REM.

Zasób pokrewny: „Definiowanie modułowej skali typów dla interfejsu internetowego” autorstwa Kelly Dern.

Schemat kolorów

Po drugie, musimy zdefiniować schemat kolorów. Myślę, że najlepiej będzie podzielić to zadanie na dwie części.

1. Najpierw musisz zdefiniować główne kolory systemu . Zalecam zachowanie prostoty i używanie maksymalnie czterech lub pięciu kolorów (w tym kolorów walidacyjnych), ponieważ im więcej kolorów tutaj uwzględnisz, tym więcej rzeczy będziesz musiał zachować w przyszłości.
2. Następnie wygeneruj więcej wartości kolorów za pomocą funkcji Sass, takich jak „Jaśniejsze” i „Ciemniejsze” — działa to naprawdę dobrze w przypadku interfejsów użytkownika. Główną zaletą tej techniki jest użycie tego samego odcienia dla różnych wariantów i uzyskanie reguły matematycznej, którą można zautomatyzować w kodzie. Nie możesz tego zrobić bezpośrednio z Figma, ale każdy generator kolorów Sass będzie działał dobrze — na przykład SassMe autorstwa Jima Nielsena. Lubię zwiększać funkcje o 1%, aby mieć większy wybór kolorów.

Wskazówka : aby móc zastosować przyszłe zmiany bez konieczności zmiany nazw zmiennych, unikaj używania koloru jako części nazwy koloru. Np. zamiast $blue użyj $primary .

Zalecana literatura : „Jak nazywasz zmienne kolorów?” autor: Chris Coyier

Style Figma

Gdy mamy już ustawioną skalę typografii i schemat kolorów, możemy ich użyć do zdefiniowania stylów Biblioteki.

To pierwszy rzeczywisty krok do stworzenia biblioteki. Ta funkcja umożliwia użycie jednego zestawu właściwości w wielu elementach .

Konkretny przykład

Załóżmy, że definiujesz kolor swojej marki jako styl, jest to delikatny niebieski i pierwotnie stosujesz go do 500 różnych elementów. Jeśli później zdecydujesz, że musisz zmienić go na ciemniejszy niebieski z większym kontrastem, dzięki stylom możesz zaktualizować wszystkie 500 stylizowanych elementów naraz, więc nie będziesz musiał tego robić ręcznie, element po elemencie.

Możemy zdefiniować style dla:

• Tekst
• Zabarwienie
• Efekty
• Siatki

Jeśli masz wariacje tego samego stylu, aby ułatwić ich późniejsze odnalezienie, możesz nazwać pojedyncze style i rozmieścić je w panelu jako grupy. Aby to zrobić, użyj tej formuły:

Nazwa grupy/nazwa stylu

Poniżej zamieściłem sugestię, jak nazwać teksty i style kolorów.

Style tekstu

Właściwości, które można zdefiniować w stylu tekstu:

• Rozmiar czcionki
• Grubość czcionki
• Wysokość linii
• Odstępy między literami

Wskazówka : Figma drastycznie zmniejsza liczbę stylów, które musimy zdefiniować w bibliotece, ponieważ wyrównania i kolory są niezależne od stylu. Możesz połączyć styl tekstu ze stylem koloru w tym samym elemencie tekstu.

Nazywanie stylów tekstu

Zalecam stosowanie reguły nazewnictwa, takiej jak „Rozmiar/Waga”
(np.: 16/zwykły, 16/pół pogrubiony, 16/ pogrubiony).

Figma dopuszcza tylko jeden poziom wcięć, jeśli chcesz dołączyć czcionkę, zawsze możesz dodać przedrostek przed rozmiarem:
Rozmiar/waga FontFamily lub rozmiar/waga FF
*(np. SourceSansPro 16/Regular lub SSP 16/Regular ).*

Style kolorów

Styl koloru używa jego wartości szesnastkowej ( #FFF ) i krycia jako właściwości.

Wskazówka : Figma umożliwia ustawienie stylu koloru dla wypełnienia i innego dla obramowania w tym samym elemencie, czyniąc je niezależnymi od siebie.

Nazywanie stylów kolorów

Dla lepszej organizacji polecam zastosować zasadę „Kolor/Wariant”. Nazwaliśmy nasze style kolorów za pomocą „Podstawowy/Domyślny” dla koloru początkowego, „Główny/L1”, „Główny/L2” dla jaśniejszych wariantów i „Główny/D1”, „Główny/D2” dla ciemniejszych wariantów.

Efekty

Podczas projektowania interfejsu może być również konieczne stworzenie elementów, które wykorzystują pewne efekty, takie jak cienie (przeciągnij i upuść może być przykładem wzoru wykorzystującego efekty cieni). Aby mieć kontrolę nad tymi szczegółami graficznymi, można uwzględnić w bibliotece style efektów, takie jak cienie lub rozmycia warstw, a także w razie potrzeby podzielić je na grupy.

Siatki

Aby zapewnić coś bardzo przydatnego dla swojego zespołu, uwzględnij style siatki. Możesz zdefiniować siatkę 8px, siatkę 12 kolumn, siatki elastyczne, aby Twój zespół nie musiał ich odtwarzać.

Wskazówka : korzystając z tej funkcji, możesz podać wszystkie różne punkty przerwania jako „style siatki”.

Komponent główny

Figma pozwala generować wiele wystąpień tego samego komponentu i aktualizować je za pomocą jednego głównego komponentu. To prostsze niż myślisz, możesz zacząć od kilku małych elementów, a następnie użyć ich do rozwinięcia swojej biblioteki.

Aby lepiej wyjaśnić ten przepływ pracy, użyję jednego z podstawowych elementów, które mają wszystkie biblioteki: przycisków.

Guziki!

Każdy system ma różne typy przycisków, które reprezentują ważność działań. Możesz zacząć mieć przyciski podstawowe i dodatkowe z tylko tekstem i jednym rozmiarem, ale rzeczywistość jest taka, że ​​prawdopodobnie będziesz musiał utrzymywać coś takiego:

• 2 typy kolorów ( Podstawowy | Dodatkowy )
• 2 rozmiary guzików ( Zwykły | Mały )
• 4 typy treści ( Tylko tekst | Tylko ikona | Tekst + ikona po prawej | Ikona po lewej + tekst )
• 5 stanów ( Domyślnie | Hover | Aktywny | Wyłączone | Fokus )

To dałoby nam do 88 różnych komponentów do utrzymania tylko za pomocą zestawu przycisków wymienionych powyżej!

Zacznijmy krok po kroku

Pierwszym krokiem jest umieszczenie wszystkich odmian razem w tym samym miejscu. Dla przycisków, których będziemy używać:

• Pojedynczy kształt tła przycisku, dzięki któremu możemy następnie umieścić style kolorów wypełnienia i obramowania;
• Pojedynczy tekst, który będzie miał zarówno styl tekstu, jak i kolor;
• Trzy elementy ikon (umieszczone po prawej, środkowej i lewej stronie) wypełnione stylem koloru (będziesz mógł łatwo zamienić ikony).

Drugim krokiem jest utworzenie komponentu głównego (użyj skrótu Cmd + Alt + K na Macu lub Ctrl + Alt + K na Windows) ze wszystkimi odmianami jako instancjami. Proponuję użyć innego i neutralnego stylu dla elementów wewnątrz głównego komponentu i użyć prawdziwych stylów na podkomponentach, ta sztuczka pomoże zespołowi używać tylko podkomponentów.

Możesz zobaczyć wizualną różnicę między komponentem głównym a komponentem podrzędnym w następnym kroku:

W trzecim kroku musisz zduplikować główny komponent, aby wygenerować instancję, teraz możesz użyć tej instancji do stworzenia podkomponentu, a od teraz każda zmiana dokonana w komponencie głównym spowoduje również zmianę podkomponentu, który stworzyłem.

Możesz teraz zacząć stosować różne style, które widzieliśmy wcześniej, do elementów wewnątrz komponentu podrzędnego i oczywiście możesz ukryć elementy, których nie potrzebujesz w tym komponencie podrzędnym.

Wyrównanie tekstu

Jak pokazałem w stylach, wyrównania są niezależne od stylu. Więc jeśli chcesz zmienić wyrównanie tekstu, po prostu wybierz go, naciskając Cmd / Ctrl i zmieniając go. Lewy, środkowy lub prawy: wszystko będzie działać i możesz zdefiniować różne podkomponenty, tak jak ja za pomocą przycisków.

Wskazówka : aby przyspieszyć pracę bez konieczności wyszukiwania dokładnej warstwy elementu, usunięcie elementu wewnątrz instancji spowoduje jego ukrycie, a nie faktyczne usunięcie.

Organizacja komponentów

Jeśli pochodzisz ze Sketcha, możesz mieć problemy z organizacją komponentów w Figma, ponieważ istnieje kilka kluczowych różnic między tymi dwoma narzędziami. To jest krótki przewodnik, który pomoże ci dobrze zorganizować komponenty, tak aby menu instancji nie wpływało negatywnie na efektywność twojego zespołu.

Wszyscy tam byliśmy, rozwiązanie jest prostsze niż myślisz!

Oto czego się dowiedziałem o tym, jak organizować komponenty.

Nazywanie Figmy

Podczas gdy w Sketch cała organizacja zależy tylko od nazwy pojedynczego komponentu, w Figma zależy to od nazwy strony , nazwy ramki i nazwy pojedynczego komponentu — dokładnie w tej kolejności.

Aby zapewnić dobrze zorganizowaną bibliotekę, musisz myśleć o niej jako o organizacji wizualnej. Dopóki przestrzegasz kolejności, możesz dostosować nazewnictwo do swoich potrzeb.

Oto jak to podzieliłem:

• Nazwa pliku = Nazwa biblioteki (np. Leksykon);
• Nazwa strony = Grupa komponentów (np. karty);
• Nazwa ramki = Typ komponentu (np. karta obrazu, karta użytkownika, karta folderu itp.);
• Nazwa komponentu = Stan komponentu (np. Domyślny, Najechanie, Aktywny, Wybrany itp.).

Dodawanie poziomów wcięć

Podczas tworzenia biblioteki Lexicon stwierdziłem, że w rzeczywistości potrzebowałem więcej niż trzech poziomów wcięć dla niektórych komponentów, takich jak przyciski, które widzieliśmy wcześniej.

W takich przypadkach można rozszerzyć nazewnictwo tą samą metodą co Szkic dla symboli zagnieżdżonych (używając ukośnika w nazwie komponentu, np. „Komponent/Podkomponent”), pod warunkiem, że zrobisz to dopiero po trzecim poziomie wcięcie, z poszanowaniem porządku strukturalnego pierwszych trzech poziomów, jak wyjaśniono w poprzednim punkcie.

Oto jak uporządkowałem nasze przyciski:

• Nazwa strony = Grupa Komponentów (np. Przyciski);
• Nazwa ramki = Rozmiar komponentu (np. Regularny lub Mały);
• Nazwa komponentu = Styl/Typ/Stan (np. Podstawowy/Tekst/Najechanie).

Wskazówka : możesz dołączyć nazwę komponentu (lub prefiks nazwy) na ostatnim poziomie, pomoże to Twojemu zespołowi w lepszej identyfikacji warstw podczas importowania komponentów z biblioteki.

Organizacja ikon

Porządkowanie ikon w Figma może być trudne, gdy zawiera dużą liczbę ikon.

W przeciwieństwie do Sketch, który wykorzystuje funkcję przewijania, Figma używa podmenu do dzielenia komponentów. Problem polega na tym, że jeśli masz dużą liczbę ikon zgrupowanych w podmenu, w pewnym momencie mogą one zniknąć z ekranu (moje doświadczenie z Figma na MacBooku Pro).

Oto dwa możliwe rozwiązania:

• Rozwiązanie 1
  Utwórz stronę o nazwie „Ikony”, a następnie ramkę dla każdej litery alfabetu, a następnie umieść każdą ikonę w ramce w oparciu o nazwę ikony. Na przykład, jeśli masz ikonę o nazwie „Plus”, zostanie ona umieszczona w ramce „P”.
• Rozwiązanie 2
  Utwórz stronę o nazwie „Ikony”, a następnie podziel ją według ramek na podstawie kategorii ikon. Na przykład, jeśli masz ikony przedstawiające łódź, samochód i motocykl, możesz umieścić je w ramce o nazwie „pojazdy”.

Wniosek

Teraz, gdy już wiesz, co dokładnie kryje się za budową biblioteki zespołu w Figma, możesz sam zacząć ją budować! Figma ma bezpłatny abonament, który pomoże Ci rozpocząć i eksperymentować z tą metodologią w jednym pliku (jednak jeśli chcesz udostępnić bibliotekę zespołu, będziesz musiał wykupić opcję „Professional”).

Wypróbuj, stwórz i zorganizuj kilka zaawansowanych komponentów, a następnie zaprezentuj bibliotekę członkom zespołu, aby ich zadziwić — lub być może przekonać ich do dodania Figma do swojego zestawu narzędzi.

Na koniec chciałbym wspomnieć, że tutaj, w Liferay, uwielbiamy projekty open-source, dlatego udostępniamy kopię naszej biblioteki Lexicon wraz z kilkoma innymi zasobami. Możesz korzystać z komponentów biblioteki Lexicon i innych zasobów za darmo, a Twoja opinia jest zawsze mile widziana (włączając w to komentarze Figma, jeśli wolisz).

• Pobierz bibliotekę „Leksykon”

Jeśli masz pytania lub potrzebujesz pomocy z pierwszą biblioteką komponentów w Figma, zapytaj mnie w komentarzach poniżej lub napisz do mnie na Twitterze.

Dalsze zasoby

• „8-punktowa siatka: typografia w sieci”, Elliot Dahl, freeCodeCamp
• Definiowanie modułowej skali typów dla internetowego interfejsu użytkownika”, Kelly Dern, Medium
• „Względne palety kolorów z sassem”, Ethan Muller, Sparkbox
• SassMe (narzędzie stworzone przez Jima Nielsena, które pozwala wizualizować funkcje kolorów Sass HSL w czasie rzeczywistym)
• „Jak nazywasz zmienne kolorów?”, Chris Coyier, CSS-Tricks
• „Najlepsze praktyki: komponenty, style i biblioteki współdzielone”, Thomas Lowry, Figma
• Kanał YouTube Figma
• Artykuły pomocy Figma