Spójność jest kluczem – jak zbudować system projektowania Figma

Wśród projektantów nie od dziś wiadomo, że dobry system projektowania może mieć ogromny wpływ na jakość wysyłanych przez nas produktów i tempo, w jakim możemy je rozwijać. Ponieważ kwestia tworzenia kompleksowego systemu projektowania była wielokrotnie wyjaśniana, a firmy takie jak Google, GitHub, IBM i inne używają ich do tworzenia lepszych produktów w szybszym tempie, pytanie przesunęło się z „Dlaczego powinniśmy mieć projekt system?" do „Jak możemy stworzyć świetny system projektowania?”

Czym właściwie jest system projektowania? Will Fanguy definiuje to jako „zbiór komponentów wielokrotnego użytku, kierujących się jasnymi standardami, które można złożyć w celu zbudowania dowolnej liczby aplikacji”. System projektowania może zawierać nie tylko bibliotekę komponentów interfejsu użytkownika i bibliotekę wzorców, ale także przewodnik po stylu, najlepsze praktyki, kod i nie tylko. Podobnie jak projekt architektoniczny budynku, system projektowania służy również jako „pojedyncze źródło prawdy” dla zespołu produktowego podczas tworzenia produktów, a także pomaga zachować spójność.

GitHub posunął się nawet do udostępnienia swojej biblioteki komponentów Figma — świetnego przykładu systemu projektowania opartego na Figma. Bardziej rozbudowane narzędzia, takie jak Storybook i Component-Driven Development, są również niezwykle przydatnymi zasobami do wdrażania i dokumentowania systemu projektowania.

System projektowania zachowuje spójność projektu i powinien być przydatny dla wszystkich zaangażowanych w tworzenie produktu. Jest to zestaw narzędzi, który pomaga projektantom szybciej tworzyć nowe ekrany, przepływy i prototypy. Dobry system projektowania pomaga programistom zrozumieć logikę decyzji projektowych i pomaga stworzyć bardziej spójny produkt. Przyspiesza proces projektowania i daje projektantom więcej czasu na eksperymenty.

Dla projektantów pracujących z Figma przyjrzyjmy się, jak tworzenie biblioteki komponentów w Figma może być kluczową częścią kompleksowego systemu projektowania.

Potęga biblioteki komponentów

Czasami zbyt szybkie inwestowanie w tworzenie systemu projektowania może przynieść efekt przeciwny do zamierzonego. Na wczesnych etapach projektowania produktu proces jest nadal płynny. Na przykład, jeśli eksperymentuje się z dwoma podstawowymi paskami nawigacyjnymi, dodanie ich do biblioteki komponentów nie ma sensu, ponieważ zmyli wszystkich członków zespołu. Lepiej poczekać, aż projekt produktu się ułoży – najlepiej przetestowany i nieco sfinalizowany.

Jeśli produkt jest dojrzały i nie ma istniejącej biblioteki komponentów, system projektowania powinien już być określony przez bieżącą implementację. Ale to nie jest jeszcze skodyfikowane. W tym momencie korzystne byłoby zdefiniowanie wspólnych wzorców UX i destylacja produktu w zestaw komponentów, które są regularnie używane w całym produkcie. Dodatkowo idealnie jest, jeśli biblioteka komponentów jest przechowywana w centralnym miejscu, które jest łatwo dostępne dla wszystkich.

System projektowania to przede wszystkim zestaw narzędzi

Próba użycia systemu projektowania, takiego jak zestaw narzędzi, jest świetnym papierkiem lakmusowym pod kątem jego skuteczności. Jeśli wielu projektantów używa go regularnie, aby przyspieszyć swój proces, wykonuje dobrą robotę. Jeśli programiści mogą odwoływać się do niego w przypadku kolorów, krojów pisma lub wykonywania pracy przy mniejszym udziale projektantów, to również jest to dobry znak.

Na ogół nie jest przydatne umieszczanie w produkcie bardzo złożonych składników lub takich, których można użyć tylko raz lub dwa razy. Im bardziej coś jest wielokrotnego użytku, tym bardziej należy do systemu projektowania.

Figma niedawno udostępniła analitykę systemu projektowania dla organizacji, w ramach której zespoły mogą zobaczyć, jak efektywne są różne części systemu projektowego i pomóc go zoptymalizować.

Dlaczego Figma jest świetna do tworzenia biblioteki komponentów

Figma to potężne narzędzie do projektowania z wieloma wspaniałymi funkcjami, ale istnieje podzbiór elementów, które stają się szczególnie przydatne podczas projektowania złożonych produktów: Style , Components i Library Files . Funkcje te pomagają aktualizować systemy projektowe, pomagają zachować spójność między projektami i zapewniają skrót do aktualizacji wielu projektów z centralnej lokalizacji.

• Style to kolory i style kroju pisma (czcionka, rozmiar, grubość itp.), które są zdefiniowane w jednym miejscu i można je zastosować do wielu obiektów.
• Komponenty to takie elementy, jak przyciski lub dymki czatu, które mogą być budowane ze stylów, obiektów takich jak kształty i tekst oraz innych komponentów.
• Pliki bibliotek umożliwiają współużytkowanie stylów i komponentów między wieloma plikami oraz zespołowi lub organizacji.

Figma opiera się na współpracy i dzieleniu się. Pliki projektowe mogą być edytowane przez każdego w przeglądarce, udostępniane swobodnie i aktualizowane w czasie rzeczywistym, ponieważ wielu użytkowników może je edytować jednocześnie. Otwiera to system projektowania na bardziej efektywną współpracę nie tylko między projektantami, ale także z programistami i innymi interesariuszami.

Tworzenie pliku biblioteki

W Figma można stworzyć plik biblioteki, który będzie mniej więcej służyć jako początek systemu projektowania. Tutaj możemy zdefiniować style i komponenty, które są następnie udostępniane w całym zespole lub organizacji i wykorzystywane w wielu projektach. Style i komponenty mogą być aktualizowane w jednym miejscu, a te zmiany mogą być następnie automatycznie wprowadzane do wszystkich indywidualnych plików projektowych.

Ma to kilka kluczowych zalet:

1. Prędkość . Oszczędza czas, eliminując potrzebę ręcznego aktualizowania przez projektanta potencjalnie setek projektów. Dzięki zarządzaniu komponentami w jednym pliku biblioteki, aktualizacja koloru w jednym miejscu może być propagowana w każdym projekcie utworzonym przy użyciu biblioteki komponentów za pomocą zaledwie kilku kliknięć.
2. Spójność . Zmniejsza prawdopodobieństwo błędu poprzez automatyzację zadania.

Organizacja

Podczas konstruowania systemu projektowego w Figma warto narysować paralele między narzędziami a teorią. Na przykład Style w Figma można uznać za najbardziej podstawowy poziom, nawet bardziej podstawowy niż Atomy w modelu Atomic Design Brada Frosta. Są to takie rzeczy, jak kolor i czcionka, które pomagają nadrobić estetykę produktu.

Prosty składnik Figma byłby uważany za atom w modelu Atomic Design, np. przycisk. Bardziej złożony Komponent Figma byłby uważany za cząsteczkę lub organizm , który jest następnie używany do konstruowania szablonów i stron .

Niektóre z najbardziej przydatnych rzeczy w bibliotece komponentów to:

• Zabarwienie
• Czcionki
• Zasoby marki, logo itp.
• Nawigacja
• guziki
• Powiadomienia
• Modals
• Elementy formularza i walidacja

Budowanie systemu projektowania w Figma – Pierwsze kroki

W tym przykładzie utworzymy prosty formularz logowania i wyjaśnimy składniki i style, które można wywnioskować i użyć.

Najpierw pomyślmy o komponentach i stylach, których prawdopodobnie będzie można ponownie użyć z tego formularza. Jest karta zawierająca logo, pola formularza i przycisk. Istnieją również trzy style czcionek oraz kilka różnych kolorów i efektów, które mogą być przydatne.

Gdy style i komponenty, które mają zostać uwzględnione, zostaną zidentyfikowane w bibliotece, jak powyżej, nadszedł czas, aby utworzyć plik biblioteki i rozpocząć jego wypełnianie.

Utwórz plik biblioteki Figma

Utwórz nowy plik i opublikuj go jako bibliotekę. Po utworzeniu nowego pliku kliknij kartę Zasoby , kliknij ikonę Biblioteka , a następnie kliknij Opublikuj . Spowoduje to opublikowanie stylów i komponentów w pliku biblioteki, dzięki czemu można ich używać w innych plikach.

Style i komponenty można teraz tworzyć w pliku biblioteki i można ich używać w innych plikach oraz aktualizować z pliku biblioteki centralnej.

Jak stworzyć styl Figma

Tworzenie stylów jest takie samo w plikach biblioteki, jak w każdym innym pliku, opisane w poniższych krokach.

• Wybierz obiekt, z którego chcesz utworzyć styl. Stylami mogą być kolory, właściwości tekstu, efekty i siatki układu.
• Kliknij w przycisk Style (cztery kropki w kwadracie) obok właściwości, która ma być użyta w nowym stylu, a następnie kliknij w przycisk plusa w wyskakującym okienku, aby utworzyć nowy styl.

• Spowoduje to wyświetlenie modalnego nazwy stylu. Często przydaje się użycie nazwy semantycznej zamiast nazwy prezentacyjnej, np. „Kolor podstawowy” zamiast „Zielony”, aby było jaśniejsze, do czego styl ma być używany.
• Opublikuj styl w Bibliotece zespołu, korzystając z wyskakującego okienka, które pojawia się w prawym dolnym rogu ekranu lub powtórz kroki podjęte w celu opublikowania biblioteki w pierwszej kolejności.

Oto samouczek Figmy dotyczący tworzenia stylu .

Jak stworzyć komponent Figma

Tworzenie komponentu jest również bardzo łatwe. Po prostu wybierz obiekt, z którego chcesz utworzyć komponent, a następnie kliknij prawym przyciskiem myszy i wybierz „Utwórz komponent”.

Komponenty są publikowane w Bibliotece zespołu w taki sam sposób jak Style.

Oto samouczek Figmy dotyczący tworzenia komponentu .

Po utworzeniu kilku stylów i komponentów plik biblioteki można udostępnić zespołowi, a style i komponenty mogą być używane w dowolnej liczbie plików.

Korzystanie z Biblioteki Figma

Aby użyć tych stylów i komponentów w innym pliku, plik biblioteki musi być połączony z istniejącym plikiem projektu, w którym chcemy użyć nowych stylów i komponentów. Po prostu ponownie otwórz modalny Biblioteki (Zasoby, ikona Biblioteki) i włącz przełącznik dla pliku Biblioteki, który ma być używany.

Biblioteka komponentów jest teraz gotowa do użycia. Komponenty można umieszczać, przeciągając je do pliku projektu z karty Zasoby po lewej stronie ekranu. Podczas zmiany stylów tekstu, kolorów wypełnienia, obrysów, efektów i siatek układu można używać stylów bibliotecznych w taki sam sposób, jak stylów lokalnych.

Po zaktualizowaniu komponentów i stylów w Bibliotece pliki używające ich muszą zaakceptować zmiany. Figma wyświetli powiadomienie, gdy w pliku Biblioteki zostaną wprowadzone aktualizacje, dając możliwość ich opublikowania. Po opublikowaniu wszystkie pliki używające komponentów i stylów będą musiały zaakceptować zmianę za pośrednictwem podobnego powiadomienia lub karty zasobów, aby zaktualizować swoje komponenty i style. Zapobiega to nieoczekiwanemu publikowaniu i aktualizowaniu zmian.

Poza budowaniem biblioteki komponentów w Figma

Figma obejmuje tylko część biblioteki komponentów w pełni rozwiniętego systemu projektowania. Aby uzyskać w pełni dopracowany system projektowania, warto rozważyć inne elementy, które można włączyć, takie jak wytyczne dotyczące marki, przewodniki po stylu treści i dokumentacja dla programistów.

Przewodnik po stylu treści Mailchimp jest doskonałym przykładem, szczegółowo opisującym ton głosu i branding poprzez treść. GitHub ma świetną dokumentację dotyczącą tego, jak ich biblioteka komponentów działa w kodzie, a system projektowania materiałów Google ma również doskonałe przykłady dokumentowania logiki stojącej za systemem projektowania.

Jako narzędzie do projektowania Figma bardzo dojrzała i stale dodawane są nowe funkcje. Dodanie systemu projektowego Figma z wbudowaną analityką, która jest dostępna dla całej organizacji, to ogromny krok naprzód. Dodanie tych funkcji wskazuje, że Figma ma być w pełni rozwiniętym, wszechstronnym narzędziem do projektowania i jest na dobrej drodze, aby to osiągnąć.

• • •

Dalsza lektura na blogu Toptal Design:

• Potęga Figmy jako narzędzia projektowego
• Usprawnij wspólne projektowanie dzięki Figma
• Mini samouczek — wykorzystanie funkcji Figma w całym procesie projektowania
• Mini samouczek – praca z komponentami przycisków Figma
• Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX