Utwórz responsywny pulpit nawigacyjny z figma

Sep 17, 2025
Jak

FIGMA to narzędzie graficzne dla projektantów interfejsu użytkownika. Ma prosty interfejs i umożliwia współpracę z kolegami z kolegami z drużyny. Jeśli chcesz pracować w trybie offline, możesz użyć aplikacji Desktop. Alternatywnie, FIGMA działa na dowolnym systemie operacyjnym (Hello, Windows), więc nie musisz niczego instalować. I rozpoczynanie się jest łatwe - możesz zaimportować swoje poprzednie projekty układu z szkicu.

  • Wybierz konstruktor strony internetowej: 16 najlepszych narzędzi

W figma możesz stworzyć wszystko, czego potrzebujesz do interfejsu, zilustrowane ikony wektorowe do niestandardowych układów. Edycja multiplayer może zaoszczędzić dużo czasu na zespoły projektowe, ponieważ oznacza to, że wszyscy członkowie zespołu mogą pracować nad tym samym układem w tym samym czasie. I to nie są nawet wszystkie wspaniałe funkcje.

W tym samouczku pokażę ci, jak się skonfigurować z figma, a następnie przejdź przez jak utworzyć ekran aplikacji mobilnej, krok po kroku. W takim przypadku zaprojektujemy pulpit nawigacyjny do fikcyjnej aplikacji statystyk. Kiedy skończysz, będziesz mógł tworzyć różne interfejsy w Figma i pracować nad nimi z zespołem w czasie rzeczywistym.

01. Zarejestruj się

Przede wszystkim musisz się zarejestrować www.figma.com. . Zdecyduj, czy chcesz użyć narzędzia w przeglądarce lub pobierz aplikację pulpitu. Aby pobrać wersję pulpitu, przejdź do menu hamburger w lewym górnym rogu i kliknij "Uzyskaj aplikację Desktop".

02. Utwórz arceboard i siatkę

Add a baseline grid to help you position your elements harmoniously (click image to enlarge)

Dodaj siatkę bazową, aby pomóc w ustawieniu elementów harmonijnie (kliknij obraz, aby powiększyć)

Trafienie ZA stworzyć kartę. Możesz wybrać jeden z ustawień wstępnych lub utwórz własny rozmiar niestandardowy. W tym projekcie będziemy korzystać z telefonu i GT; iPhone 7 (375x667px). Aby utworzyć siatkę, najpierw wybierz kartę. Następnie na prawym pasku bocznym znajdź "Grid układ" i naciśnij "+". Skonfiguruj liczbę kolumn: 6, rynna: 16, marginesy: 8 i typ: Stretch.

03. Narysuj prostokąt na tle

Zacznijmy od tła. naciśnij R. Aby wywołać narzędzie prostokąta i narysować prostokąt # 5F98FA bez granic. Ustaw wymiary do 375x363 za pomocą panelu Właściwości po prawej stronie.

04. Dodaj pasek stanu

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge)

Ustaw gradient do paska stanu za pomocą panelu Właściwości po prawej stronie na ekranie. Tutaj możesz dostosować opcje kolorów, aby utworzyć gradient liniowy (kliknij zdjęcie, aby powiększyć)

Następnie chcemy umieścić pasek stanu na górze ekranu. naciśnij R. Aby ustawić szerokość: 375, wysokość: 64, pozycja (x: 0; y: 0). Dla naszego paska nawigacyjnego Ustawmy wypełnienie gradientu za pomocą panelu Inspektora nieruchomości po prawej stronie. Znajdź opcję "Wypełnij", naciśnij podgląd kolorów i wybierz "liniowy" z menu rozwijanego. Kolor na górze powinien być # 77A6F7, a na dole # 5A93F5 (krycie 100 procent dla obu).

05. Importuj pasek stanu IOS

Niestety, figma domyślnie nie zawiera elementów UI iOS. Istnieje jednak plik o nazwie "przykładowy plik", który jest projektowaniem aplikacji IOS, więc możemy pożyczyć pasek statusu z tego. Skopiuj opcję Pasek stanu światła, wklej go do bieżącego pliku i umieść go w (X: 0; Y: 0). Korzystanie z narzędzia tekstowego ( T. ), Kliknij kartę, aby dodać nagłówek do paska nawigacyjnego. Poszedłem na AveNiru Heavy, 15px, #ffffff. Wyrównaj nagłówek przez poziome centrum, Y: 33.

06. Utwórz ikonę tylnej części

Po lewej stronie paska nawigacji powinna być ikona "Back". Stworzę to od podstaw. Utwórz prostokąt 14x14px, dodaj obrót 45 stopni, X: 14; y: 43. Powierz ten prostokąt i umieść go w X: 18; y: 43. Wybierz zarówno prostokąty, jak iw górnym menu Przejdź do grup Boolean & GT; Wybór odejmowania. Po tym wróć w grupy boolowskie; Wybór spłaszczenia lub naciśnij cmd + e. .

07. Zakończ ikonę strzałki

Nasza ikona strzałki jest prawie gotowa. Teraz musimy wystarczyć szerokość i wysokość wartości numerycznych - w mojej obudowie: 12px; Wysokość: 20px. Ostatnim krokiem jest ustawienie koloru wypełnienia do #FFFFFFF.

08. Utwórz wykres

Teraz stworzymy wykres. Po pierwsze, umieścimy w niektórych wytycznych. Wybierz narzędzie prostokąt ( R. ) i ustaw X: 24 y: 147; Szerokość: 1; Wysokość: 166; Wypełnij kolor # B3DCFF i krycie 20%.

Duplikuj ten prostokąt cztery razy z marginesami 80px. Na dole każdej wytycznej musimy dodać etykietę daty za pomocą warstw tekstowych ("lutego 2", "9 lutego", "lutego 16", "lutego" 23 "," 1 marca "). Użyłem Avenir Medium, przy 11px, # C1D8FF.

09. Zrób linię danych

Za pomocą narzędzia do pióra ( P. ) Musimy stworzyć wektor do reprezentowania linii danych. Kliknij i przeciągnij, aby utworzyć punkt Bézier. Ten kształt powinien mieć uderzenie 4px i bez wypełnienia, #ffffff.

Dodajmy cień, aby pomóc liniowi wyróżnić: Kliknij sekcję "+" w sekcji efektów i wybierz "Drop Shadow". Użyj następujących ustawień, aby wykonać gładki i elegancki cień: rozmycie: 3px, Y: 7px, # 2951FF, nieprzezroczystość: 100%.

10. Dodaj szczegóły do ​​wykresu

Use the Text tool to add values to the places the guidelines intersect with the data line

Użyj narzędzia tekstowego, aby dodać wartości do miejsc Wytyczne przecinają się z linią danych

W punktach, w których wytyczne przecinają się z linią danych, którą zamierzamy dodać kółka. Tym razem użyjemy narzędzia Ellipse ( O. ), Które znajdziesz w menu rozwijanym towarzyszącym narzędziem prostokątnym. Narysuj koła 8x8px na każdym przecięciu i ustaw kolor wypełnienia na # 5F98FA. Musimy dodać skok: kliknij przycisk "+" obok sekcji skoku, Ustaw Waga: 2px i wyrównaj: Center.

11. Ostateczne akcenty

Aby zakończyć sekcję wykresu, wystarczy dodać wartości do naszych punktów przecięcia. Z narzędziem tekstowym ( T. ) Wybierz Avenir Black, 11px, # 1F4991.

12. Trzy pudełka informacyjne

Poniżej wykresu linii utworzymy trzy komórki, które wyświetlają więcej informacji. Korzystanie z narzędzia tekstowego ( T. ) Utwórzmy naszą pierwszą pozycję: "Szacowana wartość swoich udziałów": X: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Po prawej stronie komórki umieść wartość "1 115 USD", styl tekstu: AveNir Heavy, 22px, # 5F98FA, wyrównanie tekstu: w lewo, X: 287; Y: 387.

13. Wykonanie separatora

Narysuj prostokąt, który ma 1px wysokości i obejmuje pełną szerokość ekranu (# F5F5F5; X: 0; Y: 435) - będzie działać jako separator między komórkami. Wybierz nagłówek, wartość i separator i utwórz grupę ( cmd + g. ).

14. Dodawanie nagłówków

Underneath the graph will be three cells showing key pieces of data (click image to enlarge)

Pod wykresem będzie trzy komórki pokazujące kluczowe elementy danych (kliknij obraz, aby powiększyć)

Duplikuj tę grupę, dzięki czemu masz trzy grupy z 24px pionową odległością między nimi. Zmień drugą nagłówek do "Łącznie członków" i trzeciej grupy kierując się do "Przyjaciół" i zaktualizuj odpowiednie wartości.

15. Narysuj i wyrównaj inny prostokąt

Teraz dodamy połączenie do działania. Narysuj prostokąt poniżej ostatniej komórki, szerokość: 195; Wysokość: 44, odległość osi Y od ostatniego separatora 21px.

Korzystanie z narzędzi do wyrównania, wyrównaj prostokąt przez poziome centrum. Następnie ustaw kolor wypełnienia na # 5F98FA i okrągłość do 22 (znajdziesz to pole po "rotacji" w panelu Właściwości). Po tym dodanie efektu cienia kropli (kolor: #abdaff; nieprzezroczystość: 100%; y: 5; rozmycie: 11).

16. Umieść tekst na przycisku

Dodaj tekst do przycisku za pomocą narzędzia tekstowego ( T. ): "Uzyskaj więcej akcji! Ustaw to w Avenir Black, 15px, #ffffff. Wyrównaj tekst przez środek przycisku. Wreszcie, grupuj wszystkie elementy razem i weźmie je prawidłowo.

17. Spraw, by to odpowiadać

Teraz dostosujemy nasz układ, więc reaguje na różne iPhone (320x568, 375x667 i 414x736). Aby to zrobić, musimy użyć ograniczeń, które znajdziesz w menu Właściwości po prawej stronie.

18. Uzyskanie układu

Jeśli wybierzesz "Left" lub "Prawo" na poziomym rozwijanym, grupa będzie przypierać do wybranej strony ekranu i nie rozciągnie się. Jeśli wybierzesz "Center", grupa lub warstwa się rozciągnie, więc wypełnia szerokość ekranu. Musimy zrobić pasek statusu na miejscu, więc chcemy, aby "prawo i wzmacniacz; lewy" opcja (lub przytrzymaj "Cmd" i kliknij lewe i prawy paski na diagramie).

19. Sprawdź to

Spróbujmy tego. Z wybranym paskiem stanu, naciśnij opcję "Right & AMP; Left". Wybierz kartę, a zamiast iPhone 7 wybierz iPhone 7 Plus. Działa prawidłowo, nawet jeśli wybierzesz rozmiar iPhone SE.

20. Sprawdź każdą warstwę

Rozważmy resztę warstw. W tle paska nawigacyjnego chcemy użyć "prawy + w lewo". Do tytułu nawigacyjnego: 'Center'. W przypadku ikony strzałki tylnej, najlepiej jest użyć opcji "Left" - w ten sposób strzałka będzie przypięta do lewej strony ekranu.

21. Ustaw wykres linii

Ustawmy teraz wykres liniowy. W przypadku wytycznych, daty i kółek przecięcia, chcemy użyć "centrum". W przypadku linii danych i tła użyjemy "Right & Amp; Left". W sekcji Data Data chcemy użyć "Left" dla każdego tytułu, "prawo" dla każdej wartości, a "Prawa i wzmacniacz; pozostawiony" dla linii separatora. W przypadku grupy CTA Set's Set 'Center'.

22. Ustaw pionowe ograniczenia

Ostatnim krokiem jest ustawienie ograniczeń pionowych. Pasek stanu, pasek nawigacyjny, linia danych i kółek przecięcia i powiązane tytuły powinny być ustawione na "Top". Tło wykresu, daty i wytyczne powinny być ustawione na "Centrum". Każda grupa dodatkowych danych powinna być ustawiona na pionową "Center", a grupa przycisków CTA powinna być ustawiona na "dno".

23. Spraw, by działał dla każdego rozmiaru ekranu

Dwukrotnie powierzmy artysty i ustawić do rozmiaru iPhone'a 7 plus, a drugi do rozmiaru na iPhone SE. W wersji Plus musisz zmniejszyć różnicę między ostatnią komórką dodatkowych informacji a przyciskiem CTA, wybierając grupę komórek i zwiększenie jej wysokości od 195 do 225. W wersji SE zobaczysz, że komórki informacyjne przepełnienie przepełnienia Przycisk CTA, więc musimy wybrać grupę komórek i zmniejszyć wysokość do 150.

24. Wszystko zrobione!

Hej, gratulacje! Zakończyliśmy cały ekran aplikacji w Figma. Na razie sprawdź, że wszystko jest zrobione i możesz usiąść i czuć się jak ekspert.

Ten artykuł był pierwotnie w magazyn netto. wydać 288; Kup tutaj tutaj.

Powiązane artykuły:

  • Nowa koncepcja Behance wygląda jak aplikacja zabójcy
  • Projektowanie wpływu na wpływ społeczny
  • 8 wskazówek do ACE Tech Jobs Wywiady

Jak - Najpopularniejsze artykuły

17 wskazówek dotyczących rysowania twarzy mangi

Jak Sep 17, 2025

(Kredyt obrazu: Zakary Lee) MANGA Twarze są istotną częścią rysowania mangi. Zacząłem karierę rysunkową, ucz..

Utwórz niestandardowy bot bot

Jak Sep 17, 2025

(Kredyt obrazu: projektant stron internetowych) Luz jest coraz bardziej popularnym narzędziem dla firm i zespołów,..

4 kroki do stosowania zmiennych czcionek

Jak Sep 17, 2025

(Kredyt obrazu: przyszłość) Zmienne czcionki umożliwiają projektantom czcionki do definiowania różnic typu w s..

Jak narysować kot

Jak Sep 17, 2025

Chcesz wiedzieć, jak narysować kota? Przyjechałeś do właściwego miejsca. Rysunek zwierząt mogą być trudne, ale także sa..

Pracuj obraz Maska Magia z Houdini

Jak Sep 17, 2025

Jeśli jesteś zainteresowany Więcej o Houdinie, upewnij się, że uczestniczysz w Nowym Jorku (24-25 kwietnia). Na konfere..

Utwórz zestawy ikon produktu w Illustrator

Jak Sep 17, 2025

Kliknij ikonę w prawym górnym rogu, aby powiększyć ikony Ilustrowane ikony mogą by�..

Jak zbudować złożone układy za pomocą CSS

Jak Sep 17, 2025

Układ dla sieci zawsze był ograniczony, naprawdę nigdy nie było nic naprawdę dedykowanego, aby uzyskać treści łatwe do wy..

Zbuduj prosty odtwarzacz muzyczny z reakcją

Jak Sep 17, 2025

Reagować Jest popularną biblioteką JavaScript dla interfejsów użytkownika budynku, aw tym samouczku pokażę Ci,..

Kategorie