Jak vytvořit mřížku ve Figma – rozvržení jednoduše

Naučte se vytvářet mřížky ve Figma pomocí mřížek pro sloupce, řádky nebo čtverce. Ideální pro návrh UI, rozestupy a zarovnání na pixel přesně.

Create Stunning Product Video & Docs with AI

Tento tutoriál byl vytvořen pomocí Trupeer za méně než 5 minut

Vytvořit zdarma

Tento průvodce vás provede procesem přidávání a přizpůsobování mřížkových linek v aplikaci Figma, aby váš návrh měl dobře uspořádané rozvržení.
Postupujte podle kroků níže a efektivně přidejte mřížkové linky do svých projektů ve Figma.

Figma umožňuje použít layout mřížky na rámy, takže je snazší zarovnávat a organizovat prvky návrhu.

1. Vyberte rám

Klikněte na rám, na který chcete mřížku použít. Mřížky rozvržení jsou dostupné pouze pro rámy – nikoli pro jednotlivé prvky.

2. Přidejte mřížku rozvržení

Přejděte do pravého postranního panelu (panel Design), přejděte do sekce Layout grid a klikněte na ikonu „+“.

3. Vyberte typ mřížky

Figma nabízí tři typy mřížek:

Mřížka (rovnoměrné čtverce)
Sloupce (vhodné pro responzivní rozvržení)
Řádky (dobré pro horizontální zarovnání)

Pomocí rozbalovací nabídky vyberte preferovaný typ mřížky.

4. Přizpůsobte nastavení mřížky

Počet sloupců/řádků: Nastavte počet sloupců nebo řádků.
Mezery (Gutter): Upravte rozestupy mezi sloupci/řádky.
Okraj (Margin): Nastavte odsazení mezi rámem a mřížkou.
Zarovnání: Vyberte, jak se mají zarovnat sloupce nebo řádky:
- Sloupce: Vlevo, na střed, vpravo nebo Roztáhnout
- Řádky: Nahoru, na střed, dolů nebo Roztáhnout
Barva & neprůhlednost: Změňte barvu mřížkových linek a jejich průhlednost podle svého návrhu.

5. Zapněte/vypněte viditelnost mřížky

Pomocí zkratky Shift + G můžete kdykoli zobrazit nebo skrýt mřížku rozvržení.

Krok za krokem: Jak vytvořit mřížku v aplikaci Figma

Krok 1

Začněme se učit – „Jak přidat mřížkové linky v aplikaci Figma“. Otevřete svůj soubor ve Figma. Vyberte možnost rámu a vytvořte nový rám.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Krok 2

Pokud jste ještě nevytvořili rám, ujistěte se, že ho vytvoříte a nastavíte jeho rozměry. Přejděte do nastavení mřížky na vrstvě.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Krok 3

Přejděte do nastavení mřížky na vrstvě. V nastavení mřížky vyberte typ mřížky, který preferujete, například čtvercovou mřížku, a přizpůsobte ji svým potřebám.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Krok 4

Upravte sloupce a řádky v nastavení mřížky tak, aby odpovídaly požadavkům vašeho návrhu.

Adjust the columns and rows within the grid settings to suit your design requirements.

Krok 5

Po nastavení počtu řádků a sloupců pokračujte dokončením přizpůsobení mřížky.

After setting the number of rows and columns, proceed to finalize your grid customization.

Krok 6

Klikněte na „Create Style“ (Vytvořit styl) a uložte svou mřížku jako soubor se zachovanými nastaveními mřížky. Uložte ji pod názvem konkrétního stylu – aby dávala smysl pro projekt a mohli jste ji použít i v budoucnu.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Tipy, jak vytvořit mřížku ve Figma

Používejte mřížky rozvržení pro konzistenci:
Vyberte rám nebo kresbu, do které chcete přidat vodicí čáry mřížky. V pravém panelu v části Layout Grid klikněte na ikonu + pro přidání mřížky. Tím zajistíte konzistenci napříč vaším návrhem a pomůžete přesně zarovnat prvky.
Přizpůsobte typ mřížky:
Figma vám umožňuje vybrat pro rozvržení mezi Grid, Columns a Rows. Vyberte Grid pro jednotnou mřížku, Columns pro rozvržení založené na sloupcích nebo Rows pro vodorovnou strukturu. Přizpůsobte rozestupy, počet a okraje podle vašich potřeb.
Nastavte více mřížek:
Do jednoho rámu můžete přidat více mřížek. Použijte různé typy mřížek pro práci na různých částech návrhu, například použijte sloupcovou mřížku pro text a standardní mřížku pro celkové zarovnání.
Používejte mřížku pro responzivní design:
Pro responzivní webový nebo mobilní design použijte sloupcovou mřížku a upravte šířku mřížky a gutter tak, aby odpovídaly různým velikostem obrazovky. Pomáhá to udržet proporce a čitelnost na více zařízeních.
Přepínejte viditelnost mřížky:
Viditelnost mřížek přepnete stisknutím Shift + G. Díky tomu můžete mřížky rychle zobrazit a skrýt bez změny návrhu.

Časté chyby a jak se jim vyhnout při přidávání vodicích čar ve Figma

Nesprávné rozestupy mřížky:
Řešení: Zkontrolujte nastavení mřížky a ujistěte se, že rozestupy a počet sloupců/řádků odpovídají vašemu návrhu. Používejte konzistentní měření pro zachování zarovnání.
Přeplnění rámu mřížkami:
Řešení: Nepřidávejte příliš mnoho mřížek ani nepoužívejte mřížky, které se nehodí k obsahu. Držte se jednoho stylu mřížky (např. sloupců), pokud nemáte konkrétní důvod pro použití různých mřížek.
Nesprávně zarovnané prvky návrhu:
Řešení: Použijte mřížku pro zarovnání prvků, ale ujistěte se, že jsou vaše prvky návrhu plně zarovnané s mřížkou. Přibližte zobrazení, abyste se ujistili, že se vše správně přichytí k vodicím čarám mřížky.
Nepřehledné rozvržení pro diváky:
Řešení: Pokud navrhujete pro to, aby se na něj dívali ostatní, zajistěte, aby mřížky design nepřehlušovaly. Používejte mřížky pouze jako vodítko a před finálním exportem je vypněte.
Zmatek ohledně viditelnosti mřížky:
Řešení: Pokud jsou mřížky příliš rušivé, použijte posuvník Opacity v panelu Layout Grids a snížením průhlednosti omezte jejich viditelnost, ale zachovejte je jako užitečné pro zarovnání.

Nejčastější dotazy k přidání mřížky ve Figma

Můžu přidat mřížku jen do určité části svého návrhu, například do obrázku?
Mřížky se ve Figma aplikují na rámečky a kreslicí plochy. Chcete-li mřížku zaměřit na konkrétní část, vytvořte rámeček kolem oblasti, kterou chcete, a aplikujte mřížku na tento rámeček.
Jak přizpůsobím velikost mřížky?
Můžete přizpůsobit velikost mřížky, rozestupy a žlábek (gutter) tak, že upravíte hodnoty v sekci Layout Grids v pravém panelu, když máte vybraný rámeček.
Jak skrýt mřížkové čáry při prezentaci nebo exportu?
Jednoduše vypněte mřížkové čáry stisknutím Shift + G nebo zrušte zaškrtnutí možnosti Layout Grids v pravém panelu, aby se odstranily z náhledu a při exportu.
Lze mřížkové čáry ve Figma tisknout?
Ne, mřížkové čáry se ve výchozím nastavení netisknou ani neexportují. Před exportem návrhu můžete vypnout jejich viditelnost, aby se v konečném výstupu nezobrazily.
Můžu použít mřížkové čáry pro návrh mobilních nebo webových stránek?
Ano, mřížkové čáry jsou nesmírně užitečné pro webový i mobilní design. Můžete použít sloupcové mřížky pro zarovnání prvků a zajistit, aby se váš návrh dobře přizpůsobil různým velikostem obrazovky.
Toto je postupný návod pro přidání mřížkových čar ve Figma.
Jak udělat záznam obrazovky na Macu?
Pro záznam obrazovky na Macu můžete použít Trupeer AI. Umožňuje zachytit celou obrazovku a nabízí funkce s umělou inteligencí, jako je přidání AI avatarů, přidání voiceoveru, přiblížení a oddálení ve videu. Díky funkci překlad videa pomocí AI od trupeer můžete video přeložit do 30+ jazyků.
Jak přidat AI avatar do záznamu obrazovky?
Chcete-li do záznamu obrazovky přidat AI avatar, budete muset použít nástroj pro záznam obrazovky s AI. Trupeer AI je nástroj pro záznam obrazovky s umělou inteligencí, který vám pomáhá vytvářet videa s více avatary a také vám pomůže vytvořit si vlastní avatar pro video.
Jak udělat záznam obrazovky ve Windows?
Pro záznam obrazovky ve Windows můžete použít vestavěný panel Hra (Windows + G) nebo pokročilý nástroj s AI, jako je Trupeer AI, pro pokročilejší funkce, jako jsou AI avatary, voiceover, překlad atd.
Jak přidat voiceover do videa?
Chcete-li do videí přidat voiceover, stáhněte si chrome rozšíření trupeer ai. Po registraci nahrajte své video s hlasem, vyberte požadovaný voiceover v trupeer a exportujte upravené video.
Jak se přiblížit při záznamu obrazovky?
Chcete-li se během záznamu obrazovky přiblížit, použijte efekty přiblížení v Trupeer AI, které vám umožní přiblížit a oddálit v konkrétních okamžicích a zvýšit tak vizuální dopad vašeho videoobsahu.