Potęga Figmy jako narzędzia projektowego

Opublikowany: 2022-03-11

Figma to oparte na chmurze narzędzie do projektowania, które jest podobne do Sketch pod względem funkcjonalności i funkcji, ale z dużymi różnicami, które sprawiają, że Figma jest lepsza do współpracy zespołowej. Dla tych, którzy są sceptyczni wobec takich twierdzeń, wyjaśnimy, w jaki sposób Figma upraszcza proces projektowania i jest bardziej skuteczny niż inne programy w pomaganiu projektantom i zespołom w efektywnej współpracy.

Przyjrzyjmy się bliżej.

Projekt interfejsu w Figma
Figma ma znajomy interfejs, który ułatwia jego adaptację.

Figma działa na dowolnej platformie

Figma działa na każdym systemie operacyjnym z przeglądarką internetową. Z Figma można korzystać z komputerów Mac, komputerów z systemem Windows, maszyn z systemem Linux, a nawet Chromebooków. Jest to jedyne tego typu narzędzie do projektowania, które to umożliwia, a w sklepach korzystających ze sprzętu z różnymi systemami operacyjnymi każdy może nadal udostępniać, otwierać i edytować pliki Figma.

W wielu organizacjach projektanci używają komputerów Mac, a programiści używają komputerów z systemem Windows. Figma pomaga połączyć te grupy. Uniwersalna natura Figmy zapobiega również irytacji PNG-ponga (gdzie zaktualizowane obrazy są przeskakiwane tam iz powrotem między dyscyplinami zespołów projektowych). W Figma nie ma potrzeby korzystania z mechanizmu pośredniczącego, aby praca projektowa była dostępna dla wszystkich.

Współpraca w Figma jest prosta i znajoma

Ponieważ Figma jest oparta na przeglądarce, zespoły mogą współpracować tak, jak w przypadku Dokumentów Google. Osoby przeglądające i edytujące plik są wyświetlane w górnej części aplikacji jako okrągłe awatary. Każda osoba ma również nazwany kursor, więc śledzenie, kto robi to, jest łatwe. Kliknięcie czyjegoś awatara powoduje powiększenie tego, co oglądają w tym czasie.

Narzędzia do współpracy projektowej Figma
Podczas współpracy w Figma możesz kliknąć dowolny awatar, aby zobaczyć jego widok.

Współpraca przy plikach w czasie rzeczywistym pomaga złagodzić „dryfowanie projektu” — definiowane jako błędna interpretacja lub odchodzenie od uzgodnionego projektu. Design drifting zwykle ma miejsce, gdy pomysł jest opracowywany i szybko wdrażany w trakcie realizacji projektu. Niestety często prowadzi to do odejścia od ustalonego projektu, powodując tarcie i przeróbki.

Korzystając z Figma, kierownik projektu może sprawdzić, co zespół projektuje w czasie rzeczywistym, po prostu otwierając udostępniony plik. Jeśli projektant w jakiś sposób błędnie zinterpretuje krótki opis lub historyjkę użytkownika, ta funkcja pozwala projektowi na interwencję, poprawny przebieg i zaoszczędzenie niezliczonych godzin, które w przeciwnym razie zostałyby zmarnowane. (Dla porównania, zespoły używające programu Sketch nie mają bezpośredniego sposobu na stwierdzenie, czy projektanci zbłądzą).

Uwaga na marginesie: niektórzy projektanci nie lubią być „szpiegowani” podczas pracy, więc to od projektanta zależy wyjaśnienie korzyści. Ogólnie rzecz biorąc, większość projektantów szybko dostrzega wartość takiej funkcji i łatwo dostosowuje się do pracy we wspólnym środowisku.

Figma używa luzu do komunikacji zespołowej

Figma wykorzystuje Slacka jako swój kanał komunikacji. Kiedy kanał Figma jest tworzony w Slacku, wszelkie komentarze lub zmiany projektu wprowadzone w Figma są „zwolnione” dla zespołu. Ta funkcja jest kluczowa podczas projektowania na żywo, ponieważ zmiany w pliku Figma zaktualizują każdą inną instancję, w której plik jest osadzony (potencjalny ból głowy dla programistów). Zmiany w makiecie, uzasadnione lub nie, są natychmiast sprawdzane, a kanał opinii jest aktywny.

Komunikacja zespołu projektowego Figma w Slacku
Projekty Figma mogą używać kanałów Slacka do wątków komentarzy w pliku.

Udostępnianie Figma jest nieskomplikowane i elastyczne

Figma umożliwia również udostępnianie dowolnego pliku, strony lub ramki na podstawie uprawnień (nazywanych obszarem roboczym w innych narzędziach do projektowania). Po utworzeniu łącza udostępniania do ramki na stronie osoba, która je kliknie, otworzy przeglądarkę Figma i ładuje powiększony widok ramki.

Udostępnianie plików narzędzia do projektowania aplikacji
Figma udostępnia projekty, pliki, strony i ramki każdemu, kto ma odpowiednie uprawnienia.

Ta forma selektywnego udostępniania, od pliku do ramki, pozwala projektantom, właścicielom produktów i programistom udostępniać dokładnie to, co jest potrzebne w narzędziach do śledzenia błędów i oprogramowaniu społecznościowym, takim jak Confluence lub SharePoint.

Wbudowane pliki Figma zapewniają aktualizację w czasie rzeczywistym

Figma udostępnia również fragmenty kodu do osadzania na żywo, aby wkleić iFrame w narzędziach innych firm. Na przykład, jeśli Confluence jest używany do wyświetlania osadzonych plików makiet, te pliki nie są „aktualizowane” przez zapisanie pliku Figma — te osadzone pliki SĄ plikiem Figma.

Jeśli ktoś w Figma dokona zmiany w makiecie, można ją zobaczyć na żywo we wbudowanej makiecie Confluence. (Możesz przeczytać więcej o integracji Figma i Confluence tutaj.)

Wpływ tej funkcji na proces UX ilustruje poniższy diagram:

Figma ulepsza narzędzia do projektowania UX
Figma eliminuje potrzebę dedykowanych aplikacji do prototypowania i komentowania.

Przed Figmą używano kilku innych narzędzi w celu ułatwienia wymiany makiet projektowych i aktualizacji. Cykl iteracji składał się z serii aktualizacji plików tam iz powrotem, dzięki czemu zespoły mogły przejrzeć i wdrożyć obecny projekt.

Po Figmie narzędzia innych firm nie są już potrzebne (ale mogą być używane w razie potrzeby). Ponieważ Figma obsługuje funkcje narzędzi innych firm opisanych wcześniej, jest tylko jeden krok w tym procesie — przejdź od szkiców do Figma, a wszystkie grupy mają najnowsze makiety. Nie ma „przekazania” w ścisłym tego słowa znaczeniu.

Figma jest świetnym narzędziem do przekazywania opinii na temat recenzji projektu

Figma obsługuje komentowanie w aplikacji zarówno w trybie projektowania, jak i prototypowania, a wątek komentarzy jest śledzony w Slacku i/lub e-mailu. Nie ma potrzeby publikowania plików PNG ani przeprowadzania ciągłych aktualizacji, aby uzyskać opinie od zespołu za pomocą narzędzia innej firmy, takiego jak InVision lub Marvel.

Narzędzia do projektowania internetowego interfejsu użytkownika i opinie
Projektanci mogą dodawać komentarze podczas recenzji, otwierając ten sam plik Figma.

Podczas przeglądów projektów projektanci zespołów mogą omawiać swoją pracę na dużym ekranie, nagrywać komentarze i naprawiać problemy — wszystko w Figma. Ta forma informacji zwrotnej na żywo nie jest możliwa w programie Sketch, który wymaga przesłania do usługi w chmurze w celu uzyskania danych wejściowych zespołu.

Poszukiwani niezależni projektanci UI z siedzibą w USA

Przekazanie programisty jest ułatwione dzięki Figma

Figma wyświetla fragmenty kodu w dowolnej wybranej ramce lub obiekcie w formatach CSS, iOS lub Android dla programistów do wykorzystania podczas przeglądania pliku projektu. Komponenty projektu mogą być kontrolowane przez dowolnego programistę w dowolnym pliku, który może wyświetlić. Nie ma potrzeby korzystania z narzędzia innej firmy, aby uzyskać informacje. Mimo to Figma ma pełną integrację z Zeplin, jeśli zespoły chcą robić coś więcej niż tylko proste pomiary i wyświetlanie CSS.

Przegląd prototypu Figma i przekazanie przez programistę
Programiści mogą uzyskać dostęp do kodu z pliku projektu lub uruchamiając prototyp Figma.

Pliki projektu Figma znajdują się w jednym miejscu — online

Ponieważ Figma jest aplikacją online, zajmuje się organizacją plików, wyświetlając projekty i ich pliki w dedykowanym widoku. Figma obsługuje również wiele stron na plik, na przykład Sketch, dzięki czemu zespoły Agile mogą logicznie organizować swoje projekty:

  • Utwórz projekt dla tematu funkcji .
  • Utwórz plik dla epickiego lub dużego obiektu.
  • Utwórz w tym pliku strony dla każdej historyjki użytkownika.

To tylko jedna metoda organizowania plików, która może być bardziej lub mniej szczegółowa w zależności od wymagań procesu.

Alternatywa szkicu online dla systemu Windows
Pliki projektów można łatwo organizować w dedykowanym widoku.

Interfejsy API Figma zapewniają integrację narzędzi innych firm

Figma ma teraz interfejsy API dla programistów, które umożliwiają prawdziwą integrację z dowolną aplikacją opartą na przeglądarce. Firmy używają tego do integracji wyświetlania plików projektowych w czasie rzeczywistym w swoich aplikacjach. Na przykład Uber ma duże ekrany wyświetlające pliki projektowe „na żywo” wokół swojej firmy. Projekty są udostępniane, a opinie są mile widziane od każdego w firmie.

Oprogramowanie JIRA firmy Atlassian wdrożyło dodatek Figma, dzięki czemu właściciele produktów, programiści i inżynierowie ds. jakości zawsze przeglądają najnowszą wersję dowolnej makiety od projektantów.

Dodatkowo, API Figma obiecuje spełnić żądania klientów dotyczące wtyczek innych firm i ulepszeń funkcji, które Sketch już zapewnia.

Wersjonowanie plików jest automatyczne lub na żądanie

Wszelkie wątpliwości związane z aktualizacją plików na żywo są dodatkowo łagodzone przez wbudowany system wersjonowania Figma. W dowolnym momencie projektant może stworzyć nazwaną wersję i opis pliku Figma; można to zrobić natychmiast po dokonaniu uzgodnionych zmian w projekcie.

Projektowanie interfejsu internetowego automatyczne wersjonowanie plików
Wersje plików są zapisywane ręcznie w celu tworzenia gałęzi projektu.

Działający plik w udostępnionym środowisku nie ulegnie zmianie, dopóki zmiany nie zostaną celowo zatwierdzone do oryginalnej wersji. Możliwe jest również przywrócenie dowolnych automatycznie zapisanych wersji w celu utworzenia duplikatu lub zastąpienia oryginału.

Prototypowanie w Figma jest proste i intuicyjne

Podczas gdy Sketch ostatnio dodał obszar roboczy do prototypowania obszaru roboczego, Figma poszła dalej, zapewniając przejścia między ramkami. Prosta funkcja prototypowania Figma eliminuje potrzebę korzystania z innego narzędzia, które wykonuje prototypowanie w stylu pokazu slajdów, takiego jak InVision lub Marvel. Gdy wystarczy prosta prezentacja z przejściami, nie ma potrzeby eksportowania do narzędzi recenzji.

Intuicyjne prototypowanie stron internetowych
Prototypowanie Figma działa jak inne narzędzia, wykorzystując strzałki łączące między ramkami.

Prototypy Figma mogą być dystrybuowane tak jak pliki projektowe Figma; każdy, kto ma uprawnienia do linków, może wyświetlać i komentować prototyp, a opinie są przechwytywane w panelu komentarzy narzędzia i zapisywane w Slack. Deweloperzy mogą zobaczyć przepływ pracy projektowej, pozostawić bezpośrednie @wiadomości dla projektantów oraz uzyskać pomiary i atrybuty CSS z wnętrza prototypu.

Biblioteki zespołu Figma są idealne dla systemów projektowych

Systemy projektowania stały się koniecznością dla wielu firm i istnieje zapotrzebowanie na komponenty (symbole w Sketch i Illustrator), które są wielokrotnego użytku, skalowalne i „tokenizowane” do użycia w bibliotekach wzorców dostępnych dla projektantów UX i programistów front-end.

Biblioteka systemu projektowania Figma
Niemodalne okno dialogowe biblioteki zespołu Figma zapewnia nieograniczony dostęp do komponentów i stylów.

Często używane wyrażenie „pojedyncze źródło prawdy” pasuje tutaj — po utworzeniu biblioteki zespołu Figma każdy, kto ma dostęp do projektu, może używać wystąpień komponentów w swoich projektach i mieć pewność, że pracuje z najnowszymi wersjami.

Biblioteka komponentów systemu projektowania
Organizowanie komponentów jest proste i elastyczne przy użyciu plików i ramek.

Podejście Figma do bibliotek komponentów jest proste i łatwe w zarządzaniu. Projektanci mogą tworzyć pliki pełne komponentów lub używać komponentów na stronie do organizowania biblioteki szyków. Każda ramka na stronie Figma staje się sekcją organizacyjną w bibliotece zespołu (nie ma potrzeby tworzenia hierarchii\takich\).

Jednym ze sposobów na uporządkowanie bibliotek jest posiadanie projektu poświęconego wyłącznie komponentom. Pliki w tym projekcie można organizować według potrzeb, a strony w tych plikach można odpowiednio ułożyć.

Figma została stworzona, aby usprawnić pracę zespołową projektową

Korzystanie z Figma przez dowolny okres czasu zademonstruje zalety tego narzędzia do współpracy na żywo. Utrzymuje zespoły w zadaniu i zachęca do pełnego ujawnienia, co jest niezbędne przy tworzeniu systemu projektowania dla różnych dyscyplin. Figma jest łatwa w użyciu dla każdego na dowolnej platformie i pozwala zespołom szybko udostępniać swoją pracę i biblioteki.

Eksperci od projektowania, którzy używają Figmy po przejściu ze Sketcha (pliki Sketch mogą być importowane z parzystością do Figma) nie są zawiedzeni:

…całkowicie zmienia sposób, w jaki możesz pracować z kolegami i klientami – Usprawnij wspólne projektowanie z Figma

Figma w ciągu ostatnich kilku lat połączyła to, co najlepsze w świecie narzędzi do projektowania interfejsu użytkownika — dlaczego Twój zespół projektowy powinien rozważyć przejście na Figma

Przez ostatni rok używałem Figmy do procesu projektowania UI/UX i zaoszczędziło mi to godzin pracy. To naprawdę zmieniło mój przepływ pracy w projektowaniu – jak usprawnić przepływ pracy UI/UX za pomocą Figma

Mój czas spędzony w Figmie jest zwykle najprzyjemniejszą i najbardziej produktywną częścią mojego dnia – Figma zmienia cały mój przepływ pracy i jest niesamowity!

• • •

Dalsza lektura:

  • Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX
  • Usprawnij wspólne projektowanie dzięki Figma
  • Użyj Craft by InVision, aby usprawnić współpracę zespołową
  • Śmierć modelowi szkieletowemu. Prosto do High-Fidelity!
  • Zostań projektantem światowej klasy, zmieniając świat w swoje biuro