Przekazywanie makiet Figma deweloperom: wskazówki od

Spis treści:

• Przeprowadź badania specyfikacji z programistami
• Unikaj używania ułamków w obliczeniach
• Zwróć uwagę na rozmiary elementów tekstowych i modułów
• Utrzymuj porządek w dokumentacji
• Ilustruj stany i fabuły
• Zostaw notatki
• Utwórz bibliotekę komponentów dla swojego projektu
• Pokaż animację w czasie rzeczywistym

Proces tworzenia strony internetowej wymaga znacznego wysiłku, ponieważ konieczne jest nie tylko dokładne przemyślenie jej struktury i projektu wizualnego, ale także wdrożenie układu i programowania stron.

Czasami projektant tworzy doskonały układ, ale po jego zaprojektowaniu jakość pracy znacznie się pogarsza.

• W tekście pojawiło się zbyt dużo spacji.
• Brakuje elementów,
• Przepraszam, nie mogę pomóc w tej sprawie.

Zwykle dzieje się tak, gdy projektant nie poświęca należytej uwagi przygotowaniu układu, co prowadzi do nieporozumień ze strony programisty. W tym artykule oferujemy przewodnik krok po kroku, który pomoże uniknąć takich sytuacji i zaoszczędzić czas zarówno Tobie, jak i Twojemu zespołowi.

Przejrzyj specyfikacje techniczne z programistami

Po otrzymaniu specyfikacji technicznej prawdopodobnie zaczniesz wyobrażać sobie złożone animacje i scenariusze, które chcesz zaimplementować na stronie internetowej. Jednak w praktyce często zdarza się, że niektóre pomysły muszą zostać uproszczone, a nawet pominięte w wersji finalnej. Jeszcze bardziej nieprzyjemna sytuacja może powstać, jeśli wyobrazisz sobie coś w rodzaju „latającej układarki asfaltu”, której programiści w ogóle nie będą w stanie zrealizować.

Stworzenie koncepcji latającej układarki asfaltu nie jest trudnym zadaniem; można ją łatwo narysować, opisać, a nawet stworzyć model i wizualizację. Jednak gdy rozpoczyna się właściwa realizacja, okazuje się, że nie jest ona w stanie ani wystartować, ani położyć asfaltu, a efekt końcowy wygląda zupełnie inaczej niż zamierzono.

Ilya Birman, Kierownik Działu Artystycznego.

Ważne jest, aby zrozumieć, że specyfikacje techniczne nie obejmują wszystkich aspektów projektu. Dlatego przed rozpoczęciem prac zaleca się omówienie ewentualnych ograniczeń technicznych z klientem i jego zespołem deweloperskim. Da to możliwość wcześniejszej oceny, co jest realistycznie wykonalne w ramach zaplanowanych ram, a z których zadań można zrezygnować. Idealnie byłoby, gdybyś zapoznał się z technologiami używanymi przez programistów, przynajmniej na podstawowym poziomie, a także przejrzał odpowiednią dokumentację.

Przeczytaj również:

Skontaktuj się ze specjalistą: czy umiejętności programowania są niezbędne dla projektanta?

Ważne jest, aby z wyprzedzeniem poinformować programistów o formacie, w jakim planujesz dostarczyć pliki.

Unikaj używania ułamków w obliczeniach

Tworząc strony internetowe, programiści korzystają z CSS i HTML, uwzględniając rozmiary obrazów i odstępy w pikselach. Piksel nie może jednak mieć wartości ułamkowej, co utrudnia stosowanie rozmiarów takich jak 27 789 pikseli dla czcionek lub odstępów.

Aby uniknąć niepotrzebnych komplikacji, zaleca się wykluczenie ułamków z układu. W przeciwnym razie programista będzie musiał zaokrąglić liczby, co może prowadzić do naruszenia integralności kompozycji.

Zwróć uwagę na rozmiary elementów tekstowych i modułów

W Na pierwszy rzut oka może się wydawać, że nadmiar tekstu. Blok bez tekstu nie stwarza poważnych problemów. Jednak dla programisty jest to ważny sygnał – ograniczniki tekstu muszą być ustawione dokładnie tak, jak zamierzył projektant. W przeciwnym razie ostateczny układ może stać się bałaganem. Dlatego ważne jest, aby upewnić się, że funkcja automatycznego wyrównywania wysokości tekstu jest zawsze aktywna.

Kolejną charakterystyczną cechą tekstu jest to, że jego długość może być nieograniczona. Ignorując ten fakt, ryzykujesz ciągłe problemy z układem.

Staraj się tworzyć moduły w taki sposób, aby były jednorodne, jeśli znajdują się na tym samym poziomie informacji. Liczbę „prawie identycznych” modułów należy ograniczyć do minimum, aby programiści mogli sprawniej i dokładniej przekształcać elementy graficzne w produkt końcowy.

Aby uniknąć niepotrzebnego obciążenia podczas wyrównywania elementów, użyj funkcji automatycznego układu. Może niezależnie dostosowywać wszystkie komponenty w sobie zgodnie z ustawionymi parametrami.

Przeczytaj także:

Automatyczne wyrównanie w Figma: Auto Layout

Utrzymywanie porządku w dokumentacji

Tworzenie ukrytych grup i używanie dowolnych nazw podczas pracy to naturalny proces. Jednak dla zewnętrznego obserwatora zrozumienie takiego dokumentu może być dość trudne. Dlatego przed wysłaniem makiety do deweloperów warto ją uporządkować:

• Usuń niepotrzebne style i ukryte warstwy.
• Uwolnij wszystkie poziomy.
• Nadaj każdemu obiektowi zrozumiałe i odpowiednie nazwy.

Aby zmniejszyć koszty czasowe, zaleca się korzystanie z wtyczek.

Przeczytaj także:

Pięć skutecznych wtyczek do Figmy: usprawnienie pracy.

Ilustracja stanów i fabuły

Podczas wyświetlania. Podczas korzystania z pola wyboru, przycisku radiowego lub podobnego elementu interfejsu ważne jest również zademonstrowanie ich stanów. Najlepiej dodatkowo wyjaśnić, jaką funkcję pełnią i jak mają działać w systemie.

Kolejnym kluczowym aspektem jest relacja między ekranami. Aby system działał prawidłowo, programista musi wiedzieć, jakie akcje zostaną wykonane, gdy użytkownik kliknie konkretny przycisk na ekranie. To połączenie można wyświetlić za pomocą strzałek:

Aby uzyskać najbardziej wizualną reprezentację stanów elementów interfejsu, zaleca się użycie komponentów zmiennych. Wtyczka Autoflow idealnie nadaje się do wskazywania relacji.

Zostaw uwagi

Jeśli masz wątpliwości co do sposobu, w jaki projektant wdroży określone efekty, możesz napisać komentarz z wyjaśnieniem. Znacznie uprości to proces koordynowania końcowego rezultatu i zaoszczędzi Twój czas.

Tworzenie biblioteki komponentów dla projektu

Podczas pracy staraj się zebrać wszystkie standardowe elementy interfejsu na jednej stronie dokumentu i przekształcić je w komponenty. Pozwoli Ci to stworzyć kompletny system projektowy do końca projektu. Programista będzie mógł od razu zobaczyć wszystkie podstawowe elementy projektu, a Ty nie będziesz musiał ich za każdym razem przerysowywać.

Pamiętaj, że stany wszystkich elementów można zademonstrować za pomocą interaktywnych komponentów. Przydatne może być również określenie stylów, takich jak kolory, czcionki i ikony, na stronie z tymi elementami.

Prezentowanie animacji w czasie rzeczywistym

Opisanie animacji za pomocą tekstu lub słów nie jest łatwym zadaniem, ponieważ istnieje ryzyko, że programista zinterpretuje informacje inaczej, niż zamierzałeś. Aby uniknąć takich nieporozumień, najlepiej przesłać projekt z działającymi animacjami – można je stworzyć bezpośrednio w Figmie.

Przeczytaj również:

Tworzenie prototypów w Figmie z wykorzystaniem animacji to przyjemny proces, który pozwala zwizualizować interakcje i dynamikę projektu. Zacznijmy od podstaw.

Pierwszą rzeczą, którą musisz zrobić, to przygotować projekt. Upewnij się, że wszystkie elementy, które chcesz animować, znajdują się na osobnych klatkach lub stronach. Ułatwi Ci to zarządzanie nimi podczas konfigurowania animacji.

Gdy wszystko będzie gotowe, wybierz obiekt, który zainicjuje animację. Może to być przycisk lub inny element interfejsu. W panelu po prawej stronie znajdź sekcję „Prototyp”. Tutaj musisz nawiązać połączenie między bieżącą klatką a tą, do której chcesz przejść po interakcji z obiektem.

Następnie wybierz typ interakcji, która będzie miała miejsce po kliknięciu elementu. Figma oferuje różne opcje, takie jak „Dotknięcie”, „Przesunięcie”, „Przewinięcie” i inne. W zależności od wyboru możesz dostosować animację przejścia.

Na tym etapie zwróć uwagę na opcje animacji. Możesz wybrać, jak dokładnie będzie wyglądać przejście – może to być proste przejście, zanikanie, slajd i wiele innych efektów. Możesz również ustawić czas trwania animacji, co nada Twojemu prototypowi płynny i naturalny wygląd.

Nie zapomnij przetestować animacji. W trybie podglądu możesz zobaczyć, jak działa Twój prototyp i wprowadzić niezbędne poprawki.

Dzięki Figmie możesz tworzyć interaktywne i animowane prototypy, które pomogą Ci lepiej przekazać swój pomysł zespołowi lub klientom.