Technologie
Figma
Czym jest Figma i co sprawiło, że jest tak popularna w świecie projektowania interfejsów użytkownika?
Figma to rewolucyjne narzędzie do projektowania i prototypowania interfejsów, które pozwala współpracownikom na jednoczesną pracę nad projektem. To, co wyróżnia tę aplikację to fakt, że działa bezpośrednio w przeglądarce, dzięki czemu dostęp do stworzonego interfejsu, grafiki czy szablonu możliwy jest z dowolnego urządzenia. Idea wspólnej pracy dała początek ogromnego sukcesu Figmy i jej popularności w świecie projektowania.
Do czego służy Figma?
Jak już zostało wspomniane na wstępie, Figma służy do projektowania interfejsów oraz prototypowania interakcji. Jednak coraz więcej osób korzysta z tej platformy również do tworzenia prostych grafik czy banerów, przeznaczonych do użytku cyfrowego. Aby zacząć przygodę z projektowaniem w Figmie, wystarczy otworzyć stronę aplikacji w przeglądarce, a następnie założyć darmowe konto, wypełniając kilka podstawowych danych kontaktowych. Choć z narzędzia można korzystać bezpośrednio w oknie przeglądarki to możliwe jest również pobranie aplikacji desktopowej na Windows lub macOS.
Wszystkie projekty utworzone w Figmie zapisywane są online, co pozwala zespołowi na pracę w czasie rzeczywistym. Rozwiązanie to sprawdza się tak naprawdę podczas każdego etapu projektowania, od burzy mózgów, początkowych szkiców i koncepcji po wdrożenie ustalonego design systemu i konsultacje wewnątrz zespołu. Co więcej, płynność pracy nie jest zakłócana przez konieczność zapisywania dodatkowych kopii na urządzeniu czy też nieustanne przesyłanie plików między współpracownikami.
Figma jest narzędziem obsługującym procesy kodowania front-end, dlatego posiada funkcje, które sprawiają, że web design jest prawidłowy z punktu widzenia całości procesu produkcji aplikacji mobilnej lub webowej. Oczywiście istotnym jest również, aby nasz design jawił się innym jako praca czytelna i przejrzysta, co jednocześnie polepszy team collaboration. W tym przypadku z pomocą przychodzą m.in. komponenty i stworzony z nich zbiór zasobów, które w łatwy sposób można wyeksportować do kodu.
Czym tak właściwie są komponenty? Komponenty to elementy, które możesz ponownie wykorzystać w projektach. Przeważnie tworzy się je z obiektów wielokrotnie występujących w interfejsie, jak chociażby przyciski, pola tekstowe, wyszukiwarka, nawigacja czy stopka. Jednak wraz z rozwojem projektu, zapewne zbiór ten poszerzy się o kolejne komponenty. Budowanie i aktualizacja biblioteki komponentów sprawi, że tworzony produkt cyfrowy charakteryzować się będzie spójną oprawą wizualną. Dzięki możliwości ponownego wykorzystania stworzonych obiektów – projektowanie stanie się o wiele efektywniejsze, a Twój zespół przyspieszy working time.
Wyróżniamy komponent główny dla którego zaprojektowane zostały określone właściwości obiektu oraz instancję – kopię komponentu, przeznaczoną do powielania w kolejnych ekranach. Jest to istotne rozróżnienie, ponieważ wszystkie zmiany wprowadzone w głównym komponencie będą aktualizować się w instancjach. Podczas pracy w zespole warto opracować pewne wytyczne, które usystematyzują pracę z biblioteką tak, by wszystkie główne komponenty znajdowały się w jednym miejscu, przykładowo na osobnym page'u w pliku Figmy. Chociaż usunięcie komponentu można z łatwością przywrócić, to współpraca, wprowadzanie zmian lub chociażby weryfikacja czy nasz design system jest spójny, przebiegać będzie o wiele płynniej, jeśli określone zostaną pewne wytyczne.
10 pluginów, które ułatwią pracę w aplikacji Figma
Unsplash to jedna z największych platform, zawierających darmowe zdjęcia do użytku komercyjnego. Plugin ten umożliwia bezpośrednie dodawanie fotografii do projektów w Figmie, bez konieczności pobierania ich czy kopiowania ze strony przeglądarkowej.
Wtyczka Iconify to ogromny zbiór ikon, które możesz wykorzystać w swoim projekcie. Potrzebne materiały znajdziesz za pomocą wyszukiwarki lub przeglądając kolekcje, stworzone przez m.in. Google czy Material Design. Wybierając pierwsze podejście należy pamiętać, by dodawane do projektu ikony były spójne pod względem stylistycznym – jeśli decydujemy się na ikonę stworzoną z linii o zaokrąglonych zakończeniach, pozostałe również powinny być zbudowane w taki sposób.
Jak sama nazwa wskazuje, plugin ten ułatwia tworzenie przepływów użytkownika. Choć w Figmie można bez problemu tworzyć strzałki, rysowanie ich przy każdym obiekcie w rozbudowanym user flow może być nieco męczące. Autoflow okazuje się w tym przypadku niezwykle pomocne, gdyż łączy dwa zaznaczone obiekty poprzez dodanie między nimi strzałki, która automatycznie reaguje na przesunięcia elementów i dostosowuje swój kształt do nowego położenia.
Jeden cień dodany do obiektu nigdy nie będzie wyglądał tak dobrze i realistycznie, jak grupa kilku, odpowiednio dobranych drop shadow. Beautiful Shadows tworzy serię efektów, umożliwiając jednocześnie kontrolę nad ilością warstw, ale też, co ważniejsze – źródłem i nasileniem światła, sprawiając, że nasz design zyska nieco subtelności.
Plugin Contrast dostępny na Figma umożliwia szybkie sprawdzenie niczego innego, jak właśnie kontrastu pomiędzy zaznaczonymi obiektami. Jest to istotny etap w trakcie projektowania, mający na celu stworzenie inkluzywnego produktu cyfrowego, spełniającego wytyczne WCAG. Wtyczka ta przedstawia podstawowe informacje odnośnie kontrastu, a na bazie otrzymanych danych, możesz dostosować kolory zgodnie z wymaganiami. Dla dokładniejszej analizy warto sprawdzić wybrane kolory na stronie Adobe Color Contrast Checker.
Projektując interfejsy, trafiamy na moment w którym potrzebujemy uzupełnić przykładowe dane użytkownika – imię nazwisko, adres czy chociażby uzupełnić podglądowy opis produktu. Content Reel jest o tyle pomocne, że pozwala wypełnić pola tekstowe czymś innym, niż Lorem ipsum. Dzięki temu sprawdzisz, jak treści układają się w zaprojektowanych modułach, a design odzwierciedlać będzie bardziej realistyczne informacje.
Plugin ten, jak sama nazwa wskazuje, pozwala na usuwanie tła ze zdjęć. Choć efekty nie mogą równać się z ręcznym szparowaniem, przy wykorzystaniu narzędzi jakie ma do zaoferowania chociażby program Photoshop, jest to pewna alternatywa dla izolowania prostych obiektów z fotografii o dobrym kontraście.
Choć wtyczka ta jest dopiero w początkowej fazie rozwoju, z pewnością przyda się, jako pewna referencja podczas tworzenia styli typograficznych. Plugin generuje wizualny rytm na bazie fontu, który został zastosowany w zaznaczonym przez nas obiekcie. Następnie możemy wybrać wartość podstawową, wysokość linii czy skalę na podstawie której stworzony zostanie system. Warto pamiętać, by stworzone style tekstowe były dostosowane również do mobilnych wersji interfejsu.
Jest to przydatny program do porządkowania frame’ów. W zależności od wybranych opcji, wtyczka może automatycznie usunąć niewidoczne warstwy, uporządkować ich kolejność czy rozgrupować pojedyncze elementy. Jeśli nie mamy w nawyku porządkowania dokumentu na bieżąco, warto skorzystać z pluginu, który nam w tym pomoże.
Wtyczka ta sprawi, że przy zaznaczonym ekranie pojawi się adnotacja z informacją o jego aktualnym statusie. Dzięki temu każda z osób posiadających dostęp do pliku od razu zobaczy czy dany ekran jest przykładowo gotowy do przekazania na produkcję, co jednocześnie usprawni Twoją współpracę z pozostałymi członkami zespołu.
Figma – zalety przy współpracy z klientem
Prezentowanie efektów przed klientem, czy nawet zespołem współpracowników, bywa stresującą częścią pracy. Do tego dochodzą problemy techniczne ze screen share czy chociażby różnice w interfejsie między oprogramowaniami do wideokonferencji. Dzięki temu, że Figma jest aplikacją działającą online, możesz zaprosić do projektu inne osoby, a następnie prowadzić prezentację, omawiając swój design bez konieczności wyświetlania jej poprzez udostępnianie ekranu. Jeśli klient lub członek zespołu wybierze Twój awatar w prawym rogu okna to dzięki opcji “following” automatycznie będzie widział dokładnie te same ekrany czy sekcje, które w danym momencie chcesz omówić.
Jeśli nie potrzebujesz prezentować rezultatów w czasie rzeczywistym, pokaż design udostępniając link do pliku lub wybierając opcję share prototype. W obu przypadkach Figma pozwala tworzyć komentarze, a także dostosowywać ich położenie na makiecie. Jest to szczególnie przydatne, kiedy projektowana strona lub aplikacja składa się z kilkunastu ekranów czy iteracji, a otrzymanie czytelnych uwag decyduje o tym, czy nasz design może być dalej rozwijany.
Figma Community
Figma Community to najprościej ujmując przestrzeń w której projektanci i projektantki czy też całe zespoły projektowe mogą udostępniać materiały do publicznego użytku. Na przestrzeni lat utworzyła się ogromna społeczność użytkowników Figmy. Twórcy publikowanych w Community treści przyczyniają się zarówno do rozwoju aplikacji, jak i do wspierania umiejętności osób, które dopiero zaczynających swoją przygodę z Figmą. Udostępniane pluginy, widgety oraz design systemy mają na celu pomóc innym w optymalizacji pracy. Każda osoba posiadająca konto na Figmie, może przeglądać dostępne na Figma Community materiały, a następnie skopiować je do swoich projektów, by skorzystać z opracowanych interfejsów, bibliotek komponentów, szablonów czy przyjrzeć się technikom prototypowania. Wystarczy wpisać szukaną frazę lub po prostu "start to explore it as it is". Dzielenie się materiałami i funkcje pozwalające na współpracę z innymi projektantami to istotne cechy wpisane w tożsamość Figmy, które spowodowały tak wielki sukces platformy.
Figma vs Azure XD vs Sketch
Należy pamiętać, że Figma to nie jedyne dostępne na rynku narzędzie do projektowania interfejsów użytkownika. Chociaż aplikacja ta ma wiele zalet oraz funkcjonalności, które budują jej popularność i rzeszę zadowolonych użytkowników, to wśród pozostałych platform do projektowania produktów cyfrowych należy wymienić również narzędzia takie jak Adobe XD oraz Sketch. Pierwszy program dostępny jest w ramach pakietu Adobe Creative Cloud zarówno dla użytkowników systemu operacyjnego Windows, jak i macOS. Jest to o tyle istotne, że druga ze wspomnianych platform, przeznaczona jest jedynie dla osób, które posiadają oprogramowanie z systemem iOS. Obie z wymienionych platform są aplikacjami desktopowymi i oferują funkcję pracy w czasie rzeczywistym – by doścignąć możliwości Figmy. Niestety opcja ta dostępna jest jedynie po wykupieniu subskrypcji co, z praktycznego punktu widzenia, daje Figmie znaczną przewagę. Warto również skorzystać z aplikacji mobilnych, lecz tutaj do wyboru pozostaje nam tylko Figma oraz program Adobe XD.
Czy Figma jest za darmo?
Figma jest bezpłatnym narzędziem do projektowania interfejsów użytkownika, jednak w przypadku działalności komercyjnej, darmowy plan może nie sprawdzić się zbyt długo. Warto zaznaczyć, że od początku mamy dostęp do wszystkich funkcji aplikacji, a plany subskrypcji nie ograniczają w żaden sposób możliwości platformy. Natomiast to co stanowi istotną różnicę, to liczba stworzonych projektów, a także liczba dodanych współpracowników. W darmowym planie możemy utworzyć trzy pliki i udostępnić je dwóm osobom z którymi będziemy jednocześnie pracować nad zleceniem. Jak łatwo się domyślić – wpływa to niekorzystanie na team collaboration.
Płatne wersje oferują dodatkowo dostęp do nieograniczonej historii edycji pliku, zmiany uprawnień udostępniania projektu oraz tworzenia bibliotek zespołowych, które umożliwiają dzielenie się komponentami i stylami. Ile musimy zapłacić, by móc lepiej zarządzać projektami w zespole? Na ten moment istnieją dwa poziomy subskrypcji:
- profesjonalny (12/15 dolarów za każdego użytkownika miesięcznie w rozliczeniu rocznym/miesięcznym)
- organizacyjny (45 dolarów za każdego użytkownika miesięczne, dostępne jedynie w rozliczeniu rocznym).
Oba plany oferują wszystkie z wcześniej wymienionych funkcji. Jednak w przeciwieństwie do subskrypcji profesjonalnej, Figma Organization dodatkowo posiada w ofercie integrację z mechanizmem SSO, dzięki któremu wszyscy uprawnieni pracownicy mogą zalogować się do platformy za pomocą firmowych danych. Dodatkowe korzyści to m.in. prywatne wtyczki i widgety, możliwość tworzenia własnych bibliotek i współdzielenie ich między kilkoma zespołami w organizacji.
Podsumowując – Figma jest darmowym narzędziem, ale do pewnego momentu. Chociaż platforma od początku udostępnia wszystkie funkcjonalności potrzebne do projektowania interfejsów użytkownika, to wraz z rozwojem działalności, poszerzeniem oferowanych usług i przybyciem nowych designers, konieczne będzie wykupienie subskrypcji – to get the most out of Figma!