Mini samouczek — wykorzystanie funkcji Figma w całym procesie projektowania

Świat nowych narzędzi do projektowania jest niesamowicie ekscytujący. Obiecujące nowe programy są uruchamiane szybko po sobie, ale jest jeden w szczególności, który powoli stał się najlepszym wyborem dla większych i w większości rozproszonych zespołów projektowych.

Figma ma potencjał, aby wspierać cały proces projektowania od początku do końca. Pierwsze szkice, zbieranie informacji zwrotnych, współpraca, gotowe do przetestowania prototypy i przekazanie przez programistów są w zasięgu jego możliwości. Figma upraszcza również pracę menedżerów produktu i kierowników projektów, a także wszystkich innych interesariuszy.

Co zatem odróżnia Figmę od konkurencji? Istnieje kilka kluczowych aspektów, ale wszystkie z nich można wywieść z faktu, że Figma jest oparta na Internecie. To wzbudziło wiele brwi, gdy narzędzie zostało wydane po raz pierwszy, ale ostatecznie utorowało drogę elastyczności i unikalnym funkcjom Figma.

Co jest podstawą sprawnego procesu projektowania produktu?

Chociaż prawdą jest, że każdy zespół i każdy projekt może mieć inny przepływ pracy, istnieją funkcje i fazy, które są niezbędnymi elementami projektowania i zarządzania produktem. Figma obejmuje każdą z nich.

1. Dostępność i współpraca . Bez względu na narzędzia, z których korzysta zespół, musi istnieć sposób na współpracę, prezentowanie projektów, zbieranie informacji zwrotnych i utrzymywanie interesariuszy na bieżąco. Wszystkie te funkcje są dostępne w Figma.
2. Elastyczność w iteracji i tworzeniu wyników . Figma jest elastyczna i może być używana jako wspólna tablica do szkicowania początkowych pomysłów i iterowania wszystkiego, od modeli szkieletowych po makiety o wysokiej wierności.
3. Umiejętność budowania prototypów i testowania . Projektujesz aplikację mobilną? Twórz i publikuj interaktywne prototypy oraz testuj je bezpośrednio na smartfonach — wszystko od Figma.
4. Ustanowienie jednego źródła prawdy . Figma to doskonały sposób na zdefiniowanie systemów projektowania produktów, które znajdują się całkowicie online. Domyślnie jest to jedyne źródło prawdy. Koniec z zastanawianiem się: „Czy to najnowsza wersja?”
5. Płynne przekazanie . Po prostu udostępnij link programistom, a uzyskają dostęp do wszystkich informacji potrzebnych do wdrożenia projektu — czerwonych linii, pomiarów i zasobów graficznych gotowych do wyeksportowania.
6. Wszechstronność, którą można dostosować i poprawić . API wtyczek Figma pozwala zespołom pisać własne wtyczki lub docierać do szerszej społeczności użytkowników i rozszerzać narzędzie o nowe funkcjonalności.

1. Dostępność i współpraca

Zaproś zespół na pokład

Przyjrzyjmy się bliżej, w jaki sposób Figma przyczynia się do sześciu kluczowych obszarów omówionych powyżej. Nowi użytkownicy mogą chcieć założyć bezpłatne konto Figma, założyć zespół i oglądać, jak zaczyna się Figma. Po utworzeniu zespołu zaproś członków zespołu i odpowiednich interesariuszy do przyłączenia się.

Dostępne są trzy poziomy dostępu. To dość oczywiste, ale zwykle prawa do edycji są przyznawane zespołowi projektowemu, a prawa do wyświetlania wszystkim innym. Obejmuje to programistów i innych interesariuszy, którzy muszą być w stanie śledzić proces projektowania i przekazywać informacje zwrotne.

Podobne opcje udostępniania są dostępne na poziomie zespołu (pokazanym powyżej), poziomie projektu i poziomie pliku. Jeśli poziomy dostępu nie są określone, są one propagowane z zespołu do projektu iz projektu do plików.

Ponieważ Figma jest dostępna w przeglądarce, nie ma znaczenia, w jaki sposób ktoś zostanie zaproszony lub w jakim systemie się znajduje. Dopóki urządzenie i przeglądarka, z której korzystają, spełniają minimalne wymagania, mogą wskoczyć od razu za pomocą łącza, a interfejs zmienia się w zależności od tego, czy mają uprawnienia do edycji lub wyświetlania.

Osadzanie pliku projektu

Pliki projektu Figma można osadzać w oprogramowaniu innych firm. Na przykład udostępniony dokument Dropbox Paper może być użyty do przedstawienia aktualnego stanu projektu.

Aby osadzić pliki projektu, ustaw widoczność pliku na Każdy, kto ma łącze — może wyświetlać , kopiować kod osadzania i osadzić plik projektu w dowolnym oprogramowaniu innej firmy, które obsługuje embed.ly.

Informacje zwrotne i poprawki

Inną kluczową funkcjonalnością procesu projektowania produktu jest możliwość dystrybucji projektów, zbierania opinii i zarządzania wersjami. Każdy, kto ma link do Figma, może zobaczyć najnowszą wersję i skomentować bezpośrednio punkt, o którym chce wyrazić opinię.

Aby oznaczyć członków zespołu, użyj znaku @, a system zaprezentuje listę nazwisk do wyboru. Spowoduje to powiadomienie członków zespołu, a po przetworzeniu opinii można zamknąć dyskusje, klikając Rozwiąż .

Aby utrzymać wyrównanie zespołów, istnieje fajna integracja, która może publikować dyskusje z plików Figma w wyznaczonym kanale Slack.

Współpraca w czasie rzeczywistym

Jedną z bardziej intrygujących funkcji Figmy jest to, co nazywają trybem wieloosobowym . Umożliwia wielu członkom zespołu jednoczesne otwieranie i pracę nad plikiem projektu. Wszyscy pracujący nad plikiem są widoczni w prawym górnym rogu strony, a ich awatary są nazwane i można je kliknąć.

Docenienie tego, co to oznacza w praktyce, może zająć trochę czasu. Chociaż jest mało prawdopodobne, że projektanci będą używać trybu wieloosobowego do jednoczesnej pracy nad tą samą częścią pliku, niesamowicie wygodnie jest nie martwić się o konflikt wersji pliku, szczególnie w przypadku większych zespołów rozproszonych.

Tryb wieloosobowy przydaje się podczas prezentacji zdalnej, ponieważ umożliwia wszystkim podłączonym do pliku śledzenie widoku prezentera. Pozwala także zespołom omijać dodatkowe programy i używać Figma jako tablicy online (chociaż konkretne rozwiązania, takie jak Miro, mogą ostatecznie lepiej pasować do tego zadania).

W tym celu zaleca się tworzenie niestandardowych komponentów do replikowania określonych zasobów jako wirtualnych karteczek samoprzylepnych lub elementów diagramów.

2. Elastyczność w iteracji i tworzeniu wyników

Po zaproszeniu członków zespołu i rozpoczęciu wstępnych szkiców, Figma może być wykorzystana do iteracji. Głównym powodem, dla którego stworzono Figma, jest projekt interfejsu — po zakończeniu whiteboardingu zespoły mogą przejść do map przepływu i makiety. Ponownie, mądrze jest zbudować biblioteki komponentów, które można ponownie wykorzystać do tych zadań. Oficjalna kolekcja szablonów dostarcza inspiracji i aranżacji projektowych na początek.

3. Umiejętność budowania prototypów i testowania

Tworzenie interaktywnych prototypów za pomocą Figma jest dość łatwe. Gdy plik Figma jest otwarty z prawami do edycji, można przełączać się między trybem projektowania i prototypowania. W trybie prototypu można kliknąć element, aby uczynić go interaktywnym, zarówno na scenie, jak i na pasku bocznym warstw.

Po wybraniu elementu w trybie prototypu z boku pojawia się mały okrąg. Po przeciągnięciu pojawiają się niebieskie linie, które można upuścić na ekran lub stan, aby pokazać wynik interakcji.

Typowe przejścia są dostępne w Figma, co znacznie ułatwia tworzenie prototypów o wysokiej wierności. W rzeczywistości zespół Figma niedawno wydał inteligentną funkcję wyzwalania animacji i przeciągania. Aspekt inteligentnej animacji interpoluje ruch podobnych elementów, a wyzwalacz przeciągania to nowy rodzaj interakcji. Oba drastycznie poprawiają jakość interaktywnych prototypów.

Testowanie użytkownika

Ponownie, link to wszystko, co jest potrzebne do dystrybucji prototypów Figma, nawet do testowania przez użytkowników. Kliknięcie małej ikony odtwarzania w prawym górnym rogu uruchamia prototyp i generowany jest nowy adres URL. Możliwe jest skopiowanie adresu URL lub użycie niebieskiego przycisku Share Prototype . Po otwarciu linku użytkownicy otrzymują interaktywny prototyp i mogą w razie potrzeby dodawać komentarze.

Testowanie na urządzeniach mobilnych

Projekty na urządzenia mobilne prezentowane są wraz z makietą rzeczywistego urządzenia otaczającego prototyp. Jeśli do testowania interakcji potrzebny jest większy realizm, najlepiej pobrać aplikację Figma Mirror do testowania na konkretnym urządzeniu.

4. Ustanowienie jednego źródła prawdy

Historia wersji

Czy nie byłoby wspaniale, gdyby pliki projektów były zawsze aktualne i stale tworzyły kopie zapasowe? Ta funkcjonalność jest domyślnie zawarta w Figmie. Każdy plik jest zapisywany automatycznie podczas pracy nad nim, a Figma tworzy nowy wpis w historii wersji po 30 minutach bezczynności. Tworzony jest dziennik wszystkich automatycznie zapisanych wersji, a każda wersja może zostać przywrócona w razie potrzeby.

Oczywiście automatyczne wersjonowanie nie jest jedyną opcją zapisywania pracy. Możliwe jest ręczne zapisanie wersji lub edytowanie określonej wersji w historii wersji.

Projektowanie systemów i bibliotek komponentów

Innym aspektem, w którym błyszczy Figma, jest to, jak pozwala projektantom tworzyć, organizować i dystrybuować biblioteki komponentów. Każdy plik można opublikować jako bibliotekę, a każdy kolor, styl tekstu, efekt, siatka lub komponent jest dostępny do użycia w innych plikach Figma.

Gdy wprowadzane są zmiany w dowolnym elemencie w bibliotece, edycje mogą być publikowane i propagowane do plików, które używają tych elementów. Projektanci pracujący nad tymi plikami mogą wtedy zdecydować, czy zaakceptować zmiany, czy nie.

Możliwość decydowania o sposobie dystrybucji bibliotek w połączeniu z opcją przełączania widoczności lub niewidoczności elementów biblioteki sprawia, że ​​całe doświadczenie jest płynne i wydajne.

Komponenty i biblioteki można zagnieżdżać w celu tworzenia wyrafinowanych systemów projektowania, w których wszystko jest wersjonowane i aktualne dla wszystkich zaangażowanych osób. A wszystkie komponenty mogą być opatrzone komentarzami.

5. Płynne przekazanie

Przekazanie programisty

Dzięki Figma projektanci i programiści nie potrzebują oddzielnego narzędzia, takiego jak Zeplin, do zarządzania przekazywaniem. Mogą po prostu otwierać pliki i przełączać się w tryb kodu na prawym pasku bocznym, nawet z dostępem tylko do wyświetlania.

Gdy tryb Kod jest aktywny, wybranie elementu na scenie ujawni wszystkie istotne informacje potrzebne do wdrożenia, a wszystkie inne informacje dotyczące położenia elementu w stosunku do innych elementów są widoczne. Podobnie jak w przypadku podobnych rozwiązań, wygenerowany kod nie jest przeznaczony do całkowitego kopiowania i wklejania, ale tak łatwy dostęp jest pomocny.

6. Wszechstronność, którą można dostosować i ulepszyć

Interfejsy API Figma i niestandardowe wtyczki

API i system wtyczek Figma ułatwiają wielu zespołom projektowym i dyscyplinom dostosowanie programu do ich specyficznych potrzeb procesowych. Elastyczność Figma daje użytkownikom możliwość programowej interakcji z platformą. Kilka przykładów:

Korzystanie z prawdziwych danych

Niezwykle cenna jest możliwość wykorzystania prawdziwych danych w makietach i prototypach, a Figma umożliwia to, umożliwiając importowanie treści ze źródeł zewnętrznych. Wykorzystując rzeczywistą treść, możliwe jest testowanie obciążeniowe komponentów projektowych, aktualizowanie makiet i angażowanie zespołów, które nie są związane z projektem.

Wtyczka o nazwie Google Sheets Sync to doskonały przykład tego, co można zrobić. Ta wtyczka ułatwia integrację Arkuszy Google jako źródła do wypełniania i synchronizowania zawartości komponentów w plikach Figma.

Zaawansowane przepływy pracy

Możliwość umieszczenia systemu projektowego w programie do projektowania interfejsu użytkownika jest cenna tylko wtedy, gdy system jest konsekwentnie wdrażany na ekranach skierowanych do klienta. Na szczęście istnieją interfejsy API Figma, wtyczki i integracje, które mogą pomóc.

Dodatek Storybook synchronizuje pliki Figma i pokazuje komponenty projektu Figma w panelu wraz z zaimplementowanymi komponentami. Innym interesującym przypadkiem użycia jest konwerter Figma to React, ulepszenie przepływu pracy, które konwertuje komponenty Figma na kod.

Funkcje Figma są idealne dla całego procesu projektowania

Nie ma jednego programu do projektowania, który poradzi sobie z potrzebami każdego projektanta lub problemu projektowego, i to dobrze. Konkurencja między narzędziami do projektowania jest korzystna dla projektantów. Dzięki temu firmy, które tworzą nasze narzędzia, słuchają tego, czego potrzebujemy i dostarczają nam aktualne funkcje dopasowane do wykonywanych przez nas zadań.

To powiedziawszy, Figma to zaawansowane, ale intuicyjne narzędzie, które udowodniło, że jest w stanie poradzić sobie z całym procesem projektowania cyfrowego. Poszczególni projektanci i zespoły mogą korzystać z unikalnych funkcji współpracy i iteracji, a tam, gdzie program nie działa, ogromny wybór wtyczek wypełnia pustkę.

• • •

Dalsza lektura na blogu Toptal Design:

• Potęga Figmy jako narzędzia projektowego
• Figma vs. Sketch vs. Axure – przegląd zadaniowy
• Mini samouczek – praca z komponentami przycisków Figma
• Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX
• Precyzyjne projektowanie — recenzja Adobe XD