8px grid ve Figma? Tato skrytá funkce ušetří 2 stisknutí kláves v jedné vteřině

8px grid ve Figma? Tato skrytá funkce ušetří 2 stisknutí kláves v jedné vteřině

Jak ušetřit čas při návrhu webů a aplikací ve Figma? Funkce pro práci s 8px gridem, kterou UI/UX designéři přehlíží.

Používáte při návrhu uživatelských rozhraní 8px grid? Odsazujete všechny objekty od sebe po 8px (nebo 4px)? A věděli jste, že si můžete práci v nástroji Figma ulehčit?

Je ráno, vaříte si kávu, usedáte ke stolu a zapínáte počítač. Otevíráte projekt ve Figma. Vkládáte objekty na plátno. Vše musí lícovat pěkně po 8 px. Přemisťujete objekty sem a tam a přitom zběsile mačkáte klávesy…

SHIFT + →, ←, ←

SHIFT + →, ←, ←

SHIFT + →, ←, ←

SHIFT + ↑, ↓, ↓

SHIFT + ↑, ↓, ↓

SHIFT + ↑, ↓, ↓

SHIFT + ←, →, →

SHIFT + ←, →, →

SHIFT + ←, →, →

SHIFT + ↓, ↑, ↑

SHIFT + ↓, ↑, ↑

SHIFT + ↓, ↑, ↑

Je to tak automatické, že si ani neuvědomujete, kolik kláves jste právě stiskli. Co takhle jich zmáčknout méně a dosáhnout stejného výsledku? 🤔

Figma umožňuje stisknutím klávesy se šipkou posunout objekt o 1 px (šipka = malý posun). Vy ale chcete posunout objekt o větší vzdálenost, a proto existuje klávesové zkratka, které to řeší. Když ke zmáčknuté šipce stisknete navíc klávesu SHIFT, posunete objekt o 10 px (⇧+šipka = velký posun). To ale nejspíš víte.

Co když ale chcete objekty posouvat po 8 px? Jak to většinou uděláte?

  • Buď u malých vzdáleností osmkrát zmáčknete šipku a posunete objekt po jednom pixelu,
  • nebo přidržíte klávesu SHIFT, posunete objekt o 10 px a pak dvěma stisky šipky opačného směru objekt vrátíte o dva pixely. Celkem 4 zmáčknuté klávesy. 😱

Dobré je to, že Figma umožňuje nastavit vlastní hodnoty posunů. A to je velkým ulehčením.

Pokud tuto funkci znáte a používáte, podívejte se alespoň na 2 zajímavé tipy, které najdete na konci článku. Třeba vás inspirují. 👉

Pokud nevíte, o jakou funkci jde, čtěte dál…

Nastavte si hodnoty posunů na 8 px

Ve Figma můžete změnit hodnotu jak malého posunu (šipka), tak i velkého (⇧+šipka). A to se při práci s 8px gridem hodí.

Pokud změníte hodnotu velkého posunu na 8 px (místo 10 px), bude vám pak stačit pro posunutí objektu o 8 px pouze jeden stisk kláves (⇧+šipka). Už nebudete pokaždé muset vracet objekt o 2 px zpět.

Víte, co to znamená? Vyšší rychlost návrhu a 3x vyšší efektivitu. 🤫 Vytvoříte 3x více designů a vyděláte 3x více peněz (s nadsázkou) 🤪.

Přiznám se, přestože mám s Figma už nějakou zkušenost, že jsem funkci objevil až nedávno. A hned jsem si hodnoty posunů přenastavil. Je to neuvěřitelný „game changer“. 🎉

Jak nastavit hodnoty posunů (Nudge values) ve Figma?

  1. Běžte do hlavního menu Figma.
  2. Přejděte na Preferences > Nudge amount…
  3. Nastavte si vlastní hodnoty pro malé posuny (Small nudge) a velké posuny (Big nudge). Výchozí hodnoty jsou 1 pro malý posun a 10 pro velký. Velký posun nastavte na 8 px.
  4. Hodnoty zavřením okna uložte.
  5. Designujte rychlostí blesku. ⚡️
Figma Nudge values - nastavení
Jak nastavit hodnoty posunů (Nudge values) ve Figma?

👉 Tip 1: Zkuste si změnit i hodnotu malého posunu z 1 px na 4 px. Osobně nikdy neodsazuji objekty po menších jednotkách než 4 px. Proto mi dává smysl zvětšit i malý skok.

Problém nastane v případě, že si objekt nejprve umístíte kurzorem na nějakou „lichou“ pozici vůči jinému objektu a pak nebudete schopni jednoduše vzdálenost „dorovnat“. Ale když se naučíte předvídat, nemusíte se do takové situace dostat.

Nevýhodou také je, že se posuny týkají i změny velikostí artboardů nebo velikosti písma. To jde ale obejít tím, že hodnotu do pole vepíšete číselně a potvrdíte.

👉 Pro Tip 2 [Lifehack]: Za vyzkoušení také stojí prohodit hodnoty. Jako malý posun nastavte 8 px a jako velký posun snižte na 1 px. Proč? Přestože to logicky nedává smysl, je to skvělá vychytávka. Pokud je totiž odsazování po 8 px častější než odsazování po 1 px, dost vám to pomůže. Zmáčknete šipku a posunete objekt automaticky po 8 px. Nemusíte mačkat neustále SHIFT. Ten zmáčknete pouze tehdy, když budete chtít být preciznější a ladit věci po 1 px. 🔥

Přehození hodnot Small nudge a Big nudge ve Figma
Zkuste prohodit malou a velkou hodnotu posunů. Pokud měníte velikosti spíše po 8 px než po 1 px, hodně vám to urychlí flow.

PS. Řekl bych, pošlete článek designérům ve vašem okolí. Ale protože vím, že hranici motivace pro sdílení stejně nepřekročíte 😆, zkuste si alespoň s nastavením hodnot posunů ve Figma sami pohrát. Stojí to za to. 👋

→ Připojte se k 400+ odběratelům článků. Přínosný a hodnotný obsah. Bez spamu. Odhlášení kdykoliv.

south
Mentoring pro UI designéry

Naučte se zlepšit homepage nebo landing page vašeho webu

Novinka
Vytvořte si web bez nutnosti kódovat

Vytvořte si web
bez nutnosti kódovat