Budowanie i skalowanie systemu projektowania w Figma: studium przypadku

Określenie, jak zbudować system projektowania dla międzynarodowej firmy, oznacza skatalogowanie każdego elementu i wzoru w drobiazgowych szczegółach. To ogromne przedsięwzięcie, które wymaga zarówno spojrzenia całościowego, jak i skupienia się na szczegółach. Oto jak osiągnął to jeden z liderów zespołu projektowego.

Kiedy szwajcarska firma holdingowa ABB postanowiła stworzyć system projektowy, celem było połączenie spójnego wyglądu i stylu dla setek produktów oprogramowania, z których wiele zasila systemy mechaniczne, które sprawiają, że fabryki, kopalnie i inne zakłady przemysłowe pracują . Nie było to łatwe zadanie dla firmy, która ma prawie dwa tuziny jednostek biznesowych i blisko 150 000 pracowników na całym świecie. Dla Abdula Siala, który pełnił funkcję głównego projektanta produktu w 10-osobowym zespole projektowym ABB, skalowanie biblioteki komponentów i wzorców zależało od zachowania otwartości i przejrzystości, z naciskiem na obszerną dokumentację.

Rola projektanta systemu projektowania

Coraz częściej duże firmy, takie jak ABB, mają zespoły zajmujące się wyłącznie tworzeniem i utrzymaniem systemów projektowych. „System projektowania pozwala na spójność, wejście na rynek w odpowiednim czasie i nie pozwala na utknięcie produkcji na dostosowaniach, które nie budują wartości”, mówi projektant z Madrytu Alejandro Velasco. Lub, jak wyjaśnia Alexandre Brito, projektant z Lizbony w Portugalii: „Systemy projektowe zapewniają strukturę, gdy wiele osób korzysta z tego samego zestawu narzędzi. To tak, jakby wszyscy mieli ten sam język”.

Jeśli tradycyjny przewodnik po stylu obejmuje podstawy projektowania — na przykład czcionki i kolory — system projektowania ma znacznie większy zasięg. „System projektowania jest mieszanką przewodnika stylistycznego oraz komponentów projektowych, wzorców projektowych, komponentów kodu, a na dodatek dokumentacji” – mówi Sial. Kiedy pracował nad systemem projektowym ABB, około 120 projektantów korzystało z niego regularnie. Wysiłek reprezentował wersję 4.8 systemu, a zespół nazwał ją „Ewolucją projektu”.

Projektanci systemów projektowania odgrywają inną rolę niż ci, którzy skupiają się wyłącznie na pojedynczych produktach. „Masz widok z lotu ptaka na wszystkie produkty używane przez firmę”, mówi Sial.

Praca w operacjach projektowych wymaga również komunikacji z interesariuszami w całej firmie. „Projektanci systemów projektowania muszą być społeczni”, mówi Velasco. „Projektant systemu projektowania musi naprawdę lubić pracować i rozmawiać z ludźmi, którzy pełnią różne role w organizacji. Muszą być w stanie rozróżnić, jakie informacje zwrotne należy uwzględnić, aby zbudować system projektowania wokół potrzeb firmy”.

Cykl życia komponentu

Pracując nad systemem projektowym ABB, Sial kierował się jedną nadrzędną filozofią: „Dokumentacja, dokumentacja, dokumentacja”. Dla każdego elementu wielokrotnego użytku na stronach internetowych ABB, ekranach mobilnych lub dużych ekranach wolnostojących, Sial chciał pokazać to, co nazywa cyklem życia komponentu. Oznaczało to obszerną rejestrację wszystkich komponentów i wzorców — okruchów, nagłówków, danych wejściowych lub przycisków, żeby wymienić tylko kilka. „Jakie podróże przeszedł? Jakie decyzje w nim zapadły? W ten sposób nie zawsze wszystko odtwarzamy. Zanim coś spróbujesz, możesz przeczytać i zobaczyć, że ktoś już to przetestował” – mówi Sial.

Z jego doświadczenia wynika, że ​​filozofia ta jest odejściem od typowego podejścia do dokumentacji. Na przykład w szybkim świecie rozwoju produktu dokumentacja jest często pisana pod koniec projektu lub całkowicie porzucana. Ale w przypadku systemów projektowych, mówi Sial, dokumentacja powinna być czymś więcej niż tylko refleksją. „System projektowania nigdy się nie kończy; wymaga ciągłego doskonalenia” – mówi. „Twórcy systemów projektowania i konsumenci chcą zrozumieć procesy myślowe i decyzje, aby móc je ulepszać”.

Dokumentacja jest szczególnie ważna w przypadku tak dużego systemu projektowego jak ABB. „Przy tak dużym zespole trzeba umieć skalować” – mówi. „Jak możemy upewnić się, że każdy, kto dołączy do zespołu, może szybko przejść do dowolnego komponentu i zrozumieć, jak to się zaczęło, jak był edytowany i jakiej wersji używa?”

Znalezienie odpowiedniego narzędzia

Istnieje wiele narzędzi do systemów projektowania budynków, w tym Figma, Sketch i Adobe XD. Sial eksperymentował z kilkoma, wypróbowując połączenie narzędzi do projektowania i zarządzania projektami, zanim zdecydował się na Figma, która oferuje dużo miejsca na dokumentację.

Sial i jego zespół ustalili, że każdy komponent powinien znajdować się w osobnych aktach. „Przez większość czasu pracujesz nad jednym komponentem na raz. Jeśli umieścisz wszystkie komponenty w jednym pliku, spowalnia to Figma. Dzięki nadaniu każdemu komponentowi własnego pliku, otwieranie jest szybsze, a cała historia i dokumentacja znajdują się w jednym miejscu” — mówi.

Ustawianie hierarchii

Sial skonfigurował system projektowania ABB tak, aby plik dla każdego komponentu i wzoru miał te same strony. Poniższe obrazy szczegółowo opisują, co znajduje się na każdej stronie.

Pokrywa

Sial zaleca utworzenie prostej strony tytułowej dla każdego elementu. W Figma umożliwia to podgląd miniatur wszystkich komponentów i pomaga w przeglądaniu plików. W konfiguracji ABB strona tytułowa zawiera nazwę komponentu i fazę, na której się on znajduje: projekt, rozwój lub wydanie. Status można łatwo aktualizować, gdy komponent postępuje.

Zapasy, przypadki użycia i wnioski

Ta strona zawiera przykłady wielu sposobów, w jakie komponent pojawia się w cyfrowym produkcie firmy. Na przykład w przypadku komponentu pola tekstowego strona ekwipunku pokazuje, jak wygląda pole tekstowe w witrynie abb.com w porównaniu z tym, jak wygląda na iPhonie, w porównaniu z tym, jak wygląda na urządzeniu z systemem Android. „Inwentarz pozwala nam jasno zrozumieć, co już tam jest”, mówi Sial.

Ta strona powinna również pokazać, w jaki sposób składnik jest używany niepoprawnie. „Pozwala to przyjrzeć się swoim produktom i zobaczyć, gdzie występują wyrównania i niewspółosiowości”, mówi Sial. Doradza zespołom rozpoczynającym projekt systemu projektowego rozpoczęcie od skatalogowania tego, co już istnieje. „Zacznij od inwentaryzacji, która poprowadzi cię podczas tworzenia projektu” — mówi.

Referencje, najlepsze praktyki i analiza konkurencji

Sial zaleca utworzenie sekcji każdego pliku komponentu podobnej do tablicy wizyjnej, pokazując, jak inne firmy projektują porównywalne elementy. „Jak w przypadku wszystkiego innego, najlepszą praktyką jest przeprowadzanie analizy konkurencji i sprawdzanie, jak robią to inni ludzie” – mówi. „Obserwuj inne produkty i zobacz ich wnioski”.

Testy i dane

Strona danych wyników testów agreguje wszystkie dane związane z testowaniem komponentu, w tym wyniki testów A/B oraz informacje zwrotne od użytkowników i interesariuszy. Krótko mówiąc, Sial mówi: „To cała historia komponentu”. Być może zespół projektowy dwa lata temu wypróbował nową odmianę i stwierdził, że nie działa? „Może pracowaliśmy nad tą odmianą i z jakiegoś powodu ją odrzuciliśmy” – mówi. Jeśli tak, tego rodzaju historia może zaoszczędzić sporo czasu, upewniając się, że projektanci nie próbują jej ponownie.

Zakres

Na następnej stronie przedstawiono zakres komponentu, aby projektanci mogli zrealizować projekt. Zanim dotrą do strony z zakresem, Sial mówi: „Masz historię. Rozumiesz spis wszystkich produktów. Wiesz, co musisz zbudować i znasz wymagania. Teraz nadszedł czas, aby to zapisać i zrobić z tego krótki opis”. Dodaje, że tworzenie zakresu powinno być procesem współpracy z właścicielami produktów, programistami i projektantami.

Wersje

Obrazy ostatecznych wersji komponentu znajdują się tutaj, z najnowszą iteracją przypiętą na górze. Inni projektanci powinni mieć możliwość jej recenzowania i komentowania.

Piaskownica

Piaskownica umożliwia projektantom eksperymentowanie z różnymi iteracjami komponentu lub wzorca bezpośrednio w Figma. „To może być bałaganiarskie i nie ma standaryzacji” – mówi Sial. „To tylko plac zabaw, na którym projektant ma swobodę robienia wszystkiego”.

Komponent Figma

Plik zawiera również stronę dla samego komponentu Figma, element interfejsu użytkownika, który jest łatwo powtarzalny w całym systemie projektowania. Projektant może wprowadzać zmiany w składniku, a ta zmiana zostanie wprowadzona we wszystkich wystąpieniach tego składnika w firmie, zachowując spójność. Ta strona zostanie wyeksportowana do biblioteki systemu projektowania Figma, a każdy indywidualny projektant może przeciągnąć i upuścić komponent Figma do swojego projektu. Jeśli zespół projektowy musi dokonać zmiany w komponencie, może to zrobić raz i wdrożyć w całej firmie.

Zasady stylu

Następnie projektanci i programiści systemu projektowania tworzą stronę z zasadami stylu, rodzaj ogólnego zbioru elementów, które, jak mówi Sial, „nie są widoczne w projekcie”. Na przykład, jak będzie renderowany komponent podczas przewijania strony w dół? Jest to również miejsce, w którym zespół ds. systemu projektowego śledzi nierozwiązane pytania lub problemy. Mówi, że był zaskoczony, jak integralna okazała się ta strona: „Na początku myśleliśmy, że ta strona nie jest tak ważna, ale teraz zdajemy sobie sprawę, że spędzamy tutaj większość czasu”.

Przekazać

Notatki przekazania to instrukcje dla programistów dotyczące pisania kodu komponentu. Dokument przekazania zaczyna się od anatomii elementu, a następnie obejmuje jego odmiany.

Dokumenty przekazania systemu ABB zawierają również tokeny projektowe. Stając się coraz bardziej popularne w systemach projektowych na dużą skalę, takich jak ABB, tokeny projektowe to fragmenty informacji o stylu niezależnym od platformy, dotyczących elementów interfejsu użytkownika, takich jak kolor, krój pisma lub rozmiar czcionki. Dzięki tokenom projektowym projektant może zmienić wartość — na przykład wskazać, że przycisk wezwania do działania powinien mieć kolor pomarańczowy, a nie niebieski — i ta zmiana pojawi się wszędzie tam, gdzie używany jest token, niezależnie od tego, czy jest to witryna internetowa, iOS, lub platforma Android.

Sial stworzył również wtyczkę tokenu Figma, aby rozszerzyć zakres tokenów, które projektanci mogą tworzyć w Figma. „Figma obsługuje kolory, typografię, cienie i style siatki” – mówi. Wtyczka wygeneruje tokeny dla większej liczby zmiennych, takich jak krycie i szerokość obramowania. Tworzy również ustandaryzowaną konwencję nazewnictwa, dzięki czemu projektanci nie muszą ręcznie śledzić nazw tokenów. „Wtyczka wypełnia lukę między programistami a projektantami. Pozwala zarówno pracować nad jednym źródłem prawdy dla projektu; jeśli wprowadzimy zmianę w jednym miejscu, ta zmiana będzie obowiązywać wszędzie w projekcie i kodzie” – mówi.

Sial podkreśla, że ​​w jego systemie programiści biorą aktywny udział w tworzeniu komponentu. „Na początku angażowaliśmy naszych programistów, gdy mieliśmy coś gotowego do ich pokazania”, mówi. „Wtedy zdaliśmy sobie sprawę, że to nie działa, a teraz dosłownie zaczynamy z nimi sesje inauguracyjne”.

Strona internetowa dokumentacji

Na ostatniej stronie każdego pliku znajduje się strona internetowa z ostatecznym projektem, pokazująca, jak komponent wygląda jako gotowy produkt. „Tworzymy stronę, która pokazuje, jak będzie wyglądał przykład na żywo, aby użytkownicy, w tym przypadku nasi projektanci, mogli zobaczyć, jak będzie wyglądać pod koniec dnia na prawdziwej stronie internetowej” – mówi Sial.

Współpraca jest kluczowa

Rola projektanta systemu projektowania jest wieloaspektowa. Jak mówi Alejandro Velasco: „Projektowanie systemu projektowania obejmuje tak wiele ról, a jeśli to ja prowadzę, jestem spoiwem dla projektu”.

To ogromne przedsięwzięcie i niekoniecznie właściwe dla wszystkich firm. Na przykład startupy mogą lepiej zacząć od gotowego systemu, takiego jak Google Material Design lub IBM Carbon Design System, niż poświęcać rozległe zasoby na jego tworzenie. Mimo to może nadejść czas, kiedy to nie wystarczy, mówi Alexandre Brito: „Gdy tylko masz wielu projektantów współpracujących ze sobą, zaczynasz zdawać sobie sprawę, że potrzebny jest ktoś, kto tworzy zasady, które są bardziej zgodne z produktem lub markę, którą budujesz”.

Budowanie systemu projektowania wymaga pracy i poświęcenia; wymaga również współpracy. Sial podkreśla, że ​​zaangażowanie wszystkich interesariuszy w rozwój systemu ABB podczas całego procesu było priorytetem. „To była naprawdę iteracyjna praca z całym moim zespołem. Chodziło o to, aby ich wysłuchać, a my poświęciliśmy czas na dokładne poznanie, przetestowanie i rozwinięcie tej struktury” – mówi.

Posiadanie struktury, która obejmuje obszerną dokumentację, w tym historię i najlepsze praktyki, jest podstawą systemu projektowania Figma. „To sukces, ponieważ ludzie mogą czytać całą dokumentację w jednym miejscu”, mówi Sial. „Widzą wszystko, począwszy od przypadku użycia, poprzez projekt, aż po przekazanie i ostateczną stronę komponentów. Ludzie mogą zobaczyć cały cykl życia komponentu”.

Możesz przeglądać w całości plik Figma Abdula Siala tutaj: Szablon komponentu .

Dalsza lektura na blogu Toptal Design:

• Spójność jest kluczem – jak zbudować system projektowania Figma
• Potęga struktury — przewodnik po projektowaniu modeli systemów
• Zrozumienie systemów i wzorców projektowych
• Potęga Figmy jako narzędzia projektowego
• Mini samouczek — wykorzystanie funkcji Figma w całym procesie projektowania