Rozwijanie systemu projektowania. Jak uniknąć nieoczekiwanej rutyny.

Cztery proste rzeczy do zapamiętania i naśladowania przed opracowaniem systemu

Jeśli opracowujesz systemy projektowania, prawdopodobnie nauczyłeś się, że kolejność jest ważna. Kiedy komponent lub symbol został utworzony i pomnożono go przed przypisaniem niezbędnych właściwości, ryzyko procedury stało się możliwe.

Przykład: komponent został utworzony z zagnieżdżonych w nim symboli. Jeśli zapomnisz określić parametry zmiany rozmiaru / ograniczenia we właściwym czasie, wszystkie sklonowane są niepoprawnie skalowane.

Przyspiesz czas projektowania i rozwoju nawet o 50%

System projektowania materiałów dla Figma składa się dokładnie z 512 elementów interfejsu użytkownika materiału i 1171 ikon materiałów.

  • Unikalna architektura do szybkiego dostosowywania
  • Wyposażony w prostą i przejrzystą dokumentację
  • Dedykowany do aplikacji stacjonarnych i mobilnych
  • Wykonane zgodnie z poniższymi wytycznymi dotyczącymi projektowania materiałów
  • Maksymalnie korzysta z funkcji „Instance” firmy Figma
  • Obsługuje internetowy interfejs API Figma do integracji w czasie rzeczywistym
  • Klienci obsługują 7 dni w tygodniu!

Dowiedz się więcej → http://setproduct.com/material

Jeśli nadal masz wątpliwości, zalecamy obejrzenie przeglądu

① Utwórz listę powtarzających się elementów

Zidentyfikuj i zgrupuj wszystkie powtarzające się obiekty w dokładnym układzie, prototypie lub koncepcji. Nie tylko przyciski na liście. Etykiety, ikony, dane wejściowe, nagłówki i tak dalej. Warto dodać tła, a nawet cienie, jeśli chcesz zbudować wystarczająco elastyczny system. Poniżej poznasz cel tych działań.

Niektóre powtarzające się składniki

② Określ wszystkie możliwe stany

Teraz zacznij tworzyć listę elementów, w których możliwa jest reakcja systemu lub użytkownik prawdopodobnie będzie wchodził w interakcje. Jeśli twoja misja wymaga opisania nawet stanów po najechaniu, zaleciłbym kontynuowanie tego procesu do ostatnich etapów rozwoju, kiedy wszystkie składniki są znane wizualnie, a następnie możesz zadać sobie pytanie: „Który z nich wymaga klonowania w celu uzyskania dodatkowych stanów ?

Kilka możliwych stanów dla wprowadzania tekstu

③ Dostosuj ograniczenia lub zmień parametry

Postaw sobie regułę: „Kiedy pracuję nad komponentem, zawsze pamiętam o jego skalowaniu”. Czy pamiętasz przykład, od którego zacząłem ten post? Najważniejsze jest to, że musisz ustawić ograniczenia / parametry zmiany rozmiaru natychmiast po przekonwertowaniu ramki na komponent. W przeciwnym razie utkniesz w rutynie na wypadek, gdybyś musiał dostosować ją ręcznie dla każdego elementu w przyszłości.

Ikony zmieniające parametry mają być przyciągane w prawo

First Najpierw dostępne nazwy, stany później

Masz już gotowy komponent i sklonujesz go w celu uzyskania dodatkowych stanów? Doskonale, ale po raz pierwszy zastosuj do niego dostępną nazwę. Zadbaj o siebie i zespół deweloperów i używaj wyraźnych nazw. Pamiętaj, że sklonowany komponent zachowuje nazwę rodzica. Jeśli wolisz porządek, oczekuję, że twoje pole tekstowe powinno brzmieć:

Pola tekstowe / podkreślone / domyślne

Teraz komponent można bezpiecznie sklonować. Następnie odłącz instancję, zastosuj niezbędne zmiany wizualne, a na końcu pozostaje tylko edytować:

Pola tekstowe / podkreślone / aktywne

⑤ Coś na deser

Brak rutyny. Mój proces projektowania jest teraz związany z systemem projektowania i pokazywany na żywo w YouTube:

Dolna linia ⤑ zachowaj sekwencję ♛

To wszystko o podstawach na dziś. Bez wątpienia w projektowaniu systemów projektowania jest o wiele więcej niuansów, być może opowiem o tym później. Podziel się w komentarzach własnymi metodami / krokami, kiedy zaczynasz projektować system od zera. Twoje zdrowie.

Co dalej? Szybko rozpocznij projekt materiałowy dzięki tej bibliotece Figma

Utworzono za pomocą systemu prototypowania materiałów dla Figma
❶ Poznaj system → http://setproduct.com/material
❷ Przegląd komponentów → http://setproduct.com/material/components
❸ Więcej filmów → http://setproduct.com/material/videos
❹ Kup i pobierz → http://setproduct.com/material/download
❺ Ponad 1000 ikon materiałów → http://setproduct.com/material/icons_pro