Vytvoření reagující řídicího panelu s figemem

Sep 16, 2025

jak

Figma je grafický nástroj pro projektanty UI. Má jednoduché rozhraní a umožňuje spolupracovat na práci se svými spoluhráči. Pokud chcete pracovat offline, můžete se rozhodnout použít aplikaci Desktop. Alternativně Figma funguje na jakémkoli operačním systému (HELLO, Windows), takže nemusíte vůbec nic nainstalovat. A Začínáme je snadné - můžete importovat předchozí vzory rozložení z náčrtu.

Zvolte stavitel webových stránek: 16 nejlepších nástrojů

Na Figo, můžete vytvořit vše, co potřebujete pro vaše rozhraní, z ilustrovaných vektorových ikon na vlastní rozložení. Multiplayer editace by mohlo ušetřit mnoho času pro designové týmy, protože to znamená, že všichni členové týmu mohou pracovat ve stejném rozložení současně. A ty nejsou ani všechny jeho skvělé rysy.

V tomto tutoriálu vám ukážu, jak se dostat s figmatem, pak projít, jak vytvořit obrazovku mobilní aplikace, krok za krokem. V tomto případě budeme navrhovat řídicí panel pro fiktivní statistickou aplikaci. Když jste hotovi, budete moci vytvářet různá rozhraní na figmatu a pracovat na nich s vaším týmem v reálném čase.

01. Zaregistrujte se

Nejdříve se musíte zaregistrovat www.figma.com. . Rozhodněte se, zda chcete použít nástroj ve svém prohlížeči nebo stáhnout aplikaci Desktop. Chcete-li stáhnout verzi Desktop, přejděte do nabídky Hamburger v levém horním rohu a klikněte na 'Získat aplikaci Desktop'.

02. Vytvořte kreslicí a mřížku

Add a baseline grid to help you position your elements harmoniously (click image to enlarge) — Přidat základní síť, který vám pomůže umístit své prvky harmonicky (klikněte na obrázek pro zvětšení)

Udeřil A vytvořit kreslicí. Můžete si vybrat jeden z předvoleb nebo vytvořit vlastní vlastní velikost. Pro tento projekt budeme používat telefon a gt; iPhone 7 (375x667px). Chcete-li vytvořit mřížku, nejprve vyberte kreslicí. Pak na pravém postranním panelu naleznete "rozložení mřížky" a stiskněte tlačítko "+". Nastavení počtu sloupců: 6, žlab: 16, okraje: 8 a typ: úsek.

03. Nakreslete obdélník na pozadí

Začněme s pozadím. lis R. Chcete-li vyvolat nástroj obdélník a nakreslete obdélník # 5F98FA bez hranic. Nastavte rozměry na 375x363 pomocí panelu Vlastnosti na pravé straně.

04. Přidat stavový řádek

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) — Nastavte gradient pro stavový řádek pomocí panelu Vlastnosti vpravo na obrazovce. Zde můžete upravit možnosti barev pro vytvoření lineárního gradientu (klikněte na obrázek pro zvětšení)

Dále chceme umístit stavový řádek v horní části obrazovky. lis R. Nastavení šířky: 375, výška: 64, poloha (x: 0; y: 0). Pro naši navigační bar nastavte gradientovou výplň pomocí panelu Inspektor vlastnosti vpravo. Vyhledejte možnost "Vyplnit", stiskněte tlačítko Náhled barev a vyberte "Lineární" z rozevírací nabídky. Barva v horní části by měla být # 77A6F7 a na dně # 5A93F5 (opacity 100% pro oba).

05. Importovat stavový řádek iOS

Figma bohužel neobsahuje prvky IOS UI ve výchozím nastavení. Nicméně, existuje soubor s názvem, ukázkový soubor ', který je design IOS App Design, takže si můžeme vypůjčit stavový řádek od toho. Zkopírujte volbu Light Status Bar, vložte jej do aktuálního souboru a umístěte ji na (X: 0; Y: 0). Pomocí textového nástroje ( T. ), Kliknutím na kreslicí tabule přidáte záhlaví do navigačního panelu. Šel jsem pro Avenir těžký, 15px, #ffffff. Zarovnejte záhlaví horizontálním centrem, y: 33.

06. Vytvořte zadní ikonu

V levé části navigačního panelu by mělo být ikona "Zpět". Vytvořím to od nuly. Vytvořte obdélník 14x14px, přidejte rotaci 45 stupňů, x: 14; Y: 43. Duplikovat tento obdélník a umístit jej na x: 18; Y: 43. Vyberte oba obdélníky a pod horní menu přejděte na Boolean Groups & GT; Odečtěte výběr. Poté se vrátí do booleanových skupin a gt; Splatten výběr nebo stiskněte CMD + E. .

07. Dokončete ikonu šipky

Naše ikona šipky je téměř hotová. Nyní prostě musíme nastavit šířku a výšku na číselné hodnoty - v mé šířce případu: 12px; Výška: 20px. Posledním krokem je nastavení barvy výplně na #ffffff.

08. Vytvořte graf

Nyní vytvoříme graf. Za prvé, budeme vloženi do některých pokynů. Vyberte nástroj Obdélník ( R. ) a SET X: 24 Y: 147; šířka: 1; výška: 166; Vyplňte barvu # B3DCFF a neprůhlednost 20%.

Duplikovat tento obdélník čtyřikrát s 80px okraje. Na dně každé vodítko potřebujeme přidat datum štítku pomocí textových vrstev ("únor 2", "únor 9 '," únor 16', "23. února", "1"). Použil jsem Avenir Medium na 11px, # C1D8FF.

09. Udělejte datovou linku

Pomocí nástroje pera ( P. ) Musíme vytvořit vektor reprezentovat datovou linku. Kliknutím a přetažením vytvořte bod Bézier. Tento tvar by měl mít 4px zdvih a žádnou výplň, #ffffff.

Pojďme přidat klesající stín, který vám pomůže vyniknout řádku: Klikněte na "+" na sekci Efekty a zvolte 'Drop Shadow'. Použijte následující nastavení pro vytvoření hladkého a elegantního stínu: Rozostření: 3px, Y: 7px, # 2951ff, Opacity: 100%.

10. Přidat detail do grafu

Use the Text tool to add values to the places the guidelines intersect with the data line — Pomocí textového nástroje přidáte hodnoty na umístění pokyny protínají s datovým řádkem

V bodech, kde se pokyny protínají s datovou linkou, přidáme kruhy. Tentokrát použijeme nástroj ELLIPSE ( Ó ), které najdete v rozevírací nabídce doprovázejícím nástroj obdélník. Nakreslete 8x8px kruhy na každé křižovatce a nastavte barvu výplně na # 5F98FA. Musíme přidat tah: klikněte na tlačítko '+' vedle části zdvihu, nastavte hmotnost: 2px a zarovnání: Centrum.

11. Závěrečné doteky

Chcete-li dokončit sekci grafu, musíme jen přidat hodnoty do našich průsečíků. S textovým nástrojem ( T. ) Vyberte Avenir Black, 11px, # 1F4991.

12. Tři informativní boxy

Pod grafem linky vytvoříme tři buňky, které zobrazují více informací. Pomocí textového nástroje ( T. ) Vytvořme náš první okruh: "Odhadovaná hodnota vašich akcií": X: 16; Y: 391, Avenir Medium, 15px, # 5D7EB6. Vpravo od buňky umístěte hodnotu '$ 1,115', textový styl: avenir těžký, 22px, # 5f98fa, zarovnání textu: vlevo, x: 287; Y: 387.

13. Dělat separátor

Nakreslete obdélník, který je 1PX na výšku a rozpustí plnou šířku obrazovky (# F5F5F5; X: 0; Y: 435) - to bude působit jako oddělovač mezi buňkami. Vyberte záhlaví, hodnotu a oddělovač a vytvořte skupinu ( CMD + G. ).

14. Přidání záhlaví

Underneath the graph will be three cells showing key pieces of data (click image to enlarge) — Pod grafem budou tři buňky zobrazující klíčové části dat (klikněte na obrázek pro zvětšení)

Duplikovat tuto skupinu, takže máte tři skupiny s 24px vertikální vzdálenost mezi nimi. Změnit druhý okruh do "Celkem členů" a třetí skupinový záhlaví "Přátelé se přihlásilo" a aktualizovat příslušné hodnoty.

15. Nakreslete a zarovnejte jiný obdélník

Nyní budeme přidat hovor na akci. Nakreslete obdélník pod poslední buňku, šířka: 195; Výška: 44, vzdálenost osy Y od posledního oddělovače 21px.

Použití nástrojů Zarovnat, řádek obdélníku vodorovným středem. Poté nastavte barvu výplně na # 5F98FA a zaokrouhlení na 22 (toto pole najdete po "rotaci" v panelu Vlastnosti). Poté přidejte pádný stínový efekt (barva: #ABDAFF; opacity: 100%; y: 5; rozmazání: 11).

16. Dejte text na tlačítko

Přidat text na tlačítko pomocí textového nástroje ( T. ): "Získejte více akcií!" Nastavte to v Avenir Black, 15px, #ffffff. Zarovnejte text středem tlačítka. Nakonec, skupina všechny prvky dohromady a pojmenujte je správně.

17. Udělejte to reagovat

Nyní budeme upravit naše uspořádání, takže je reagující na různé iPhony (320x568, 375x667 a 414x736). K tomu musíme použít omezení, které najdete v nabídce Vlastnosti vpravo.

18. Získání správného rozvržení

Pokud zvolíte "vlevo" nebo "vpravo" na vodorovném rozevíracím rozevíři, skupina bude zapnout vybranou stranu obrazovky a nebude protáhnout. Pokud zvolíte "Center", skupina nebo vrstva se protáhne, takže vyplní šířku obrazovky. Musíme vytvořit stavový řádek plovák na místě, takže chceme, že "správná a amp; levá" možnost (nebo podržení "cmd" a klepněte na levé a pravé pruhy na diagramu).

19. Otestujte jej

Zkusme to to. S vybraným stavovým řádkem stiskněte možnost "Právo & Amp; Left". Vyberte kreslicí šňůru a namísto iPhone 7 vyberte iPhone 7 Plus. Pracuje správně, i když vyberete velikost iPhone SE.

20. Zkontrolujte každou vrstvu

Pojďme zvážit zbytek vrstev. Pro navigační bar pozadí, chceme použít "vpravo + doleva". Pro navigační bar titul: 'Center'. Pro ikonu zpětné šipky je nejlepší použít možnost "Left" - tímto způsobem bude šipka připnána na levou stranu obrazovky.

21. Nastavte graf linky

Nyní nastavíte graf linky. Pro pokyny, data a křižovatka kruhy chceme používat "CENTER". Pro datovou linku a pozadí použijeme "vpravo & amp; vlevo". Ve sekci Extra Data chceme použít "vlevo" pro každý titul, "vpravo" pro každou hodnotu, a "vpravo & amp; vlevo" pro oddělovací čáry. Pro skupinu CTA můžete nastavit "Centrum".

22. Nastavte svislé omezení

Konečný krok je nastavit svislé omezení. Stavový řádek, navigační lišta, datová linie a křižovatka a související tituly by měly být nastaveny na "TOP". Pozadí grafu, dat a pokynů by mělo být nastaveno na "Centrum". Každá skupina dalších dat by měla být nastavena na vertikální 'Center' a skupina CTA by měla být nastavena na "Dno".

23. Práce pro každou velikost obrazovky

Pojďme duplikovat kreslicí dvakrát a nastavte jeden na velikost iPhone 7 Plus a druhý k velikosti na iPhone SE. Na verzi Plus budete muset snížit mezeru mezi poslední buňkou dalších informací a tlačítkem CTA výběrem skupiny buněk a zvýšení jeho výšky od roku 195 do 225. Na verzi SE uvidíte, že informace o přetečení informačních buněk Tlačítko CTA, takže musíme vybrat skupinu buněk a snížit jeho výšku na 150.

24. Všechno udělal!

Hej, gratulujeme! Dokončili jsme celou obrazovku aplikace na Figo. Právě teď zkontrolujte, zda je vše hotovo, a můžete se posadit a cítit se jako odborník.

Tento článek byl původně uváděn v Čistý časopis Vydání 288; Kupte si to tady.

Související články:

Nový klubový koncept vypadá jako vrah aplikace
Projektování sociálního dopadu
8 tipů na rozhovory o práci