UI Tools: Flinto

UI Tools: Flinto

Flinto to kolejne narzędzie z serii: – Słyszałam, że jest, ale nic więcej o nim nie wiem. I powiem szczerze, że coraz ciężej nadążyć za dostępnymi narzędziami dla projektantów UI, bo tworzy się ich cała masa. Flinto znajdziecie w dwóch wersjach – jako program do pobrania (pod warunkiem, że jesteście posiadaczami Maca) lub w wersji przeglądarkowej, bardzo okrojonej, jako Flinto Light.

Jeżeli jesteście ciekawi poprzednich recenzji zerknijcie na Principle lub Figma.

Flinto light jest bardzo… light

Flinto Light pozwala głównie na tworzenie interakcji między gotowymi ekranami. Mając statyczne obrazki i ładując je do aplikacji, możemy stworzyć na nich aktywne obszary, które przenosić będą nas do kolejnych widoków. Wszelkie animacje zatem odbywają się w formie przejść między ekranami i ograniczają do wyboru jednego z ośmiu efektów. Dodatkowo Flinto Light pozwala oznaczyć tzw. sticky headers, które w trakcie scrollowania ekranu zostaną przypięte w jednym miejscu.

interaktywny prototyp we flinto

Ale wróćmy do Flinto

W porównaniu ze swoją wersją przeglądarkową, pełna wersja Flinto przypomina kombajn do prototypowania. We Flinto zaprojektujemy proste ekrany, dodamy do nich interakcje, a także wprawimy w ruch poszczególne elementy. To czyni z Flinto narzędzie, które mogłabym wziąć pod uwagę w codziennej pracy. Ma jednak swój minus – jest tylko na Maca.

Koszt programu to $99 z rocznymi aktualizacjami w cenie, jest więc tańszy od wspomnianego wcześniej Principle.

Rzut oka na interfejs

Otwierając pierwszy raz Flinto nie powinniście być zaskoczeni. Wygląda dość podobnie do poprzednio recenzowanych narzędzi. Główny pasek narzędzi zawiera skróty do tworzenia najczęściej używanych elementów, po lewej stronie klasycznie zarządzamy warstwami i grupami warstw, po prawej mamy pasek właściwości, a na samym środku główny obszar roboczy. We Flinto, podobnie jak w konkurencyjnych aplikacjach, prace opieramy na Screenach (podobnych do choćby photoshopowych artboardów) – czyli jeden widok aplikacji to we Flinto jeden Screen.

prototypowanie aplikacji mobilnej

Po pobraniu aplikacji na telefon możemy również podejrzeć nasz prototyp „na żywo” (co zresztą wydaje się być już standardem w aplikacjach do prototypowania). Warto jednak pamiętać, że Flinto jest na razie tylko iOS friendly! Nie posiadając iPhona możemy jednak posłużyć się wbudowanym okienkiem Preview, które wyświeli prototypowaną aplikację z działającymi interakcjami.

Podczas pracy w aplikacji nic specjalnie nie zdążyło mnie zirytować, interfejs jest intuicyjny i mając doświadczenie w pracy w programach graficznych lub tych do prototypowania, przejście na Flinto nie powinno być żadnym problemem.

Animujemy

To, co jest dla mnie dużą zaletą w narzędziach do prototypowania, to rozbudowane opcje animacji. We Flinto spotkamy się z dwoma typami: Transitions i Behaviours. Transitions służą do tworzenia przejść między ekranami, natomiast Behaviours użyjemy do animowania elementów interfejsu takich jak przyciski, elementy wektorowe, slidery, scrollowanie.

Obsługiwanie scrollowania jest zresztą całkiem przyjemne i szybkie do skonfigurowania dzięki dedykowanym opcjom.

program do animowania interfejsu

Sposób animowania we Flinto był akurat dla mnie czymś nowym – do tej pory przyzwyczajona byłam do klasycznych, adobowych linii czasu i klatek kluczowych, nie mogę jednak powiedzieć, że rozwiązanie Flinto jest specjalnie skomplikowane, czy niewygodne. Jest po prostu inne i warto sobie poklikać żeby sprawdzić, czy nam odpowiada.

Podsumowując?

W porównaniu do uprzednio recenzowanych narzędzi Flinto wypada bardzo dobrze (zwłaszcza jeżeli połączymy go ze Sketchem). Brakuje mu co prawda kilku, moim zdaniem, podstawowych narzędzi, które przydałyby się w projektowaniu (jak choćby obsługa gridów, która w Figmie jest rewelacyjna). Mamy za to wygodną pracę z wektorami i edycję typografii, co już daje nam spore pole do popisu.

Natomiast jeśli chodzi o pracę z animacjami, mam wrażenie, że przy rozbudowanym prototypie, Flinto lepiej sprawdzi się od Principle (a jeśli macie porównanie tych dwóch narzędzi to również chętnie wysłucham Waszych opinii).

Flinto współgra ze Sketchem (po zainstalowaniu pluginu do Sketcha możecie wyeksportować plik do Flinto). Tu dużą zaletą jest praca na pełnej strukturze oryginalnego pliku, edycji tekstów i wektorów, co potrafi znacznie przyspieszyć pracę.

Mając za sobą przetestowane trzy nowe narzędzia nie mogłabym powiedzieć, że któregoś używałabym z całą pewnością do każdej pracy, a z któregoś bym kategorycznie zrezygnowała. Wszystkie trzy to narzędzia, które sprawdzą się świetnie w różnych projektach i wszystkie trzy czymś pozytywnym mnie zaskoczyły. W każdym z nich było również coś, czego trochę mi brakowało, więc poszukiwanie Świętego Graala UI trwa dalej. Podoba się Wam ta seria – czekacie na kolejne narzędzia?

nauka programów do ui

Kurs Flinto od eduweb.pl

Flinto poznałam dzięki kursowi na eduweb.pl. Jeżeli Flinto wzbudził również Wasze zainteresowanie to kupując kurs i wpisując UITOOLS (w polu karty podarunkowej) otrzymacie 10% zniżki! Śpieszcie się, bo zniżka będzie ważna tylko do 11 października!

Dowiecie się w nim nie tylko jak obsługiwać program i poznacie kilka tricków, ale całkiem szeroko poruszony został temat animacji interfejsu. Przechodząc przez kurs będziecie mogli stworzyć interaktywny interfejs aplikacji mobilnej, dowiecie się jak tworzyć elementy wektorowe i jak wykorzystać oba typy animacji w programie. Osoby, które chcą dowiedzieć się czegoś więcej o roli mikrointerakcji w interfejsie powinny być zadowolone.