Výukový program Figma - Jak vytvořit responzivní navigační nabídku

Je důležité myslet na svůj design jako na dynamický kousek, i když pracujete na statickém plátně.

Pokud chcete navrhnout rozvržení pro více obrazovek zařízení pomocí Photoshopu nebo Illustratoru, musíte pro každé rozvržení vytvořit různé snímky.

Nyní s Figmou je možné vytvářet dynamické snímky. Jeden rámeček se vejde na obrazovky více zařízení.

V tomto krátkém tutoriálu vám ukážu, jak si můžete vytvořit citlivý Navbar pomocí Figmy.

1 - Vytvořte nový snímek

  • Nejprve přejděte na panel nástrojů a vyberte nástroj rámeček
  • Vyberte velikost rámečku na pracovní ploše v panelu vlastností.
  • Změňte velikost snímku na 100 pixelů

2 - Vytvořte základní prvky Navbar:

* Než začnete vytvářet jakýkoli nový prvek. Nejprve vyberte rámeček, takže každý prvek, který vytvoříte, bude uvnitř tohoto rámečku.

Logo:

Vytvořte jednoduchý text s obecným názvem značky jako logo.

Zarovnání:

  • Vyberte vrstvu loga a přejděte do sekce zarovnání v horním postranním panelu.
  • kliknutím na Zarovnat doleva a poté Zarovnat svislý střed nastavíte polohu uvnitř rámu.

Jídelní lístek :

Pro nabídku. bude to jednoduchý seznam textových vrstev s názvy stránek.

Skupina vrstev:

  • Vyberte všechny textové vrstvy nabídky a kliknutím na Ctrl + G nebo Command + G seskupte nabídku do jedné jednotky.

Zarovnání:

  • Vyberte nabídku a přejděte na panel vlastností na postranním panelu.
  • Nastavte zarovnání nabídky do vodorovného středu Zarovnat a poté Zarovnat svislý střed.

Knoflík :

Vytvořte základní tlačítko s jednoduchým tvarem a textovou vrstvou.

Skupina vrstev:

  • Klepnutím na Ctrl + G nebo Command + G seskupíte vrstvy tlačítek uvnitř jedné skupiny.

Zarovnání:

  • Vyberte tlačítko a přejděte na panel vlastností na postranním panelu.
  • klepněte na Zarovnat doprava a Zarovnat svislý střed.

Pokud změníte šířku nebo výšku rámečku, vaše elementy nebudou sledovat velikost rámečku, jejich poloha je uvnitř rámečku statická.

Naším cílem je vytvořit polohu prvků vzhledem k velikosti rámu.

K vyřešení tohoto problému musíme definovat omezení polohy pro naše prvky.

3- Nastavení omezení:

Umožňuje definovat horizontální a vertikální omezení našich prvků.

Omezení loga:

  • Vyberte své logo a přejděte do části Omezení na panelu vlastností na postranním panelu.

Svislé omezení:

  • Klikněte na šipku vedle vrcholu.
  • V rozevírací nabídce vyberte střed.

Horizontální omezení:

Pro horizontální omezení ji ponechte vlevo (pokud již není na levé pozici, nastavte ji doleva).

Omezení nabídky:

  • Vyberte nabídku a nastavte její horizontální omezení na střed a svisle na střed.

Omezení tlačítek:

  • U tlačítka nastavte horizontální omezení doprava a svisle na střed.

Nyní, když změníme velikost našeho rámu, vertikálně i horizontálně, uvidíme, že náš Navbar plně reaguje.

Pro další Figma výukové programy, bezplatné šablony, sady uživatelského rozhraní a zdroje.

Navštivte figmaland.com