Jak vytvořit přechod ve Figmě

Když se nemůžete rozhodnout pro jednu barvu, přechody jsou vynikající volbou. Ve Figmě můžete vytvořit různá pozadí s přechodem, umístit přechod na tvar a text, vytvořit přechody tahů a mnoho dalšího. Můžete dokonce vytvářet síťové přechody pomocí efektu rozostření nebo pomocí komunitního síťového přechodového pluginu Figma.

Vzhledem k tomu, že Figma má tolik různých způsobů, jak vytvořit gradient, noví uživatelé mohou mít potíže s jejich pochopením od začátku. Samozřejmě, experimentování je součástí procesu učení, ale je mnohem jednodušší mít všechny pokyny na jednom místě. A přesně to poskytuje tento článek.

Jak vytvořit různé styly přechodů ve Figmě

Figma nabízí různé styly přechodů, které můžete použít k vyplnění pozadí nebo objektů na plátně více barvami.

• Lineární:  Lineární přechody mají dvě barvy, které se prolínají v přímce.
• Radiální:  U radiálních přechodů začíná první barva z jednoho bodu a přechází do druhé ve všech směrech.
• Úhlový:  V úhlových přechodech můžete určit směr, kterým se přechod pohybuje, přidáním úhlů. Je to skvělá volba pro vytváření 3D obrázků.
• Diamant:  Jak název napovídá, diamantové přechody začínají od jednoho bodu a rozprostírají se ve tvaru diamantu.

Kroky pro vytvoření kteréhokoli z těchto stylů přechodu jsou stejné. Jediný rozdíl je ve zvoleném stylu. Zde je návod, jak vytvořit návrh přechodu ve Figmě:

1. Otevřete prázdný soubor Figma.
   
2. Klepněte na nástroj „Obdélník“ na levém panelu nástrojů.
   
3. Pomocí nástroje nakreslete na plátno obdélník, který se použije jako reference přechodu.
   
4. Vyberte vytvořený obdélník.
   
5. Kliknutím na aktuální barvu pod „Vyplnit“ na pravém panelu otevřete výběr barvy.
   
6. Stiskněte rozevírací nabídku a změňte výchozí „Solid“ na libovolný styl přechodu. Objeví se dvě barevné zarážky nebo rámečky.
   
7. Vyberte každou barevnou zarážku a vyberte barvu, kterou chcete přidat do přechodu.
   
8. Klepnutím na čtyři tečky vedle položky „Vyplnit“ uložíte přechod jako styl.
   

Poté můžete upravit hodnotu průhlednosti, umístit barevné zastávky tam, kde chcete, aby jedna barva končila a druhá začínala, přidat další barevnou zarážku, posouvat je na plátně nebo změnit úhel přechodu. Po dokončení úprav přechod znovu uložte (krok 8).

Poznámka:  Chcete-li odstranit zarážku barvy, kterou jste přidali, vyberte zarážku a stiskněte na klávesnici „Smazat“ nebo „Backspace“.

Nyní můžete použít styl přechodu na libovolný objekt, který chcete.

Jak vytvořit síťový přechod ve Figmě

Síťované přechody jsou oblíbené mezi velkými společnostmi a značkami. Pokud jste častým uživatelem Instagramu, uvidíte logo aplikace každý den. Vědět, jak je vytvořit, se tedy může hodit v situacích, kdy potřebujete ke svým projektům přidat nějakou zajímavost.

Jak již bylo zmíněno, síťové přechody lze vytvářet pomocí pluginu poskytovaného komunitou Figma. Existuje však přímější způsob, jak přidat více barev, kamkoli na plátno chcete, bez potřeby externích nástrojů.

Zde je návod, jak vytvořit gradient sítě ve Figmě:

1. Zadejte nový soubor Figma.
   
2. Vytvořte rámeček.
   
3. Zaškrtněte políčko „Clip content“ na pravém panelu, aby bylo oříznuto vše, co jde mimo rámeček.
   
4. Začněte přidávat různé tvary nebo si vytvořte vlastní objekt pomocí nástroje „Pero“ uvnitř rámečku.
   
5. Změňte „Výplň“ každého nového formuláře tak, aby se lišil od ostatních.
   
6. Vyberte všechny tvary.
   
7. V části „Efekty“ stiskněte rozbalovací nabídku a vyberte „Rozostření vrstvy“.
   
8. Otevřete nastavení „Rozostření vrstvy“ a zvyšujte hodnotu, dokud již neuvidíte jasné hranice mezi tvary.
   
9. Uložte styl jako výše a použijte jej na jiné objekty.

Dalším způsobem, jak vytvořit síťový přechod, je použití úhlového stylu. Poskytuje trochu jiný, ale stejně zajímavý fascinující výsledek jako první tutoriál.

Zde je to, co musíte udělat:

1. Otevřete prázdné plátno.
   
2. Použijte požadovaný tvar a přidejte jej na plátno.
3. V části „Výplň“ změňte „Plné“ na „Úhlové“.
   
4. Vyberte barvy pro přechod.
   
5. Upravte úhel a další aspekty přechodu.
   
6. Přidejte další tvar, nejlépe „Eclipse“, tj. kruh.
   
7. Položte jej na druhý tvar na plátně.
   
8. Přidejte lineární přechod a změňte barvu na barvu, která dobře odpovídá zbytku.
   
9. V části „Efekty“ použijte efekt „Rozostření vrstvy“ a rozmažte linie nového tvaru, aby se spojil s prvním.
   

Jak provést přechod obrázku ve Figmě

Kromě vytvoření přechodu můžete také překrýt existující obrázek přechodem a přidat tak nějaký rozměr. Dodává mu efekt „vyblednutí“ neboli iluzi neviditelného zdroje světla svítícího na obraz zvenčí.

Zde je návod, jak přidat přechod do obrázku ve Figmě:

1. Otevřete nový soubor ve Figmě.
   
2. Přetáhněte obrázek, ke kterému chcete přidat přechod, na plátno.
   
3. Nahoru přidejte tvar, který odpovídá velikosti obrázku.
   
4. V části „Výplň“ vyberte styl přechodu.
   
5. Vyberte barvy přechodu z výběru barev.
   
6. Upravte krytí, úhel atd.
   

Můžete také použít nástroj „Pero“ a nakreslit tvar v oblasti, kde chcete mít přechod.

Jak přecházet text ve Figmě

Vytvoření přechodu na textu ve Figmě je velmi podobné tomu, jak vytvoříte přechod pro jakýkoli jiný tvar. Zde jsou kroky:

1. Otevřete nové plátno ve Figmě.
   
2. Stiskněte nástroj „Text“ z panelu nástrojů vlevo.
   
3. Klikněte kamkoli na plátno a začněte psát.
4. Vyberte text a přejděte na „Vyplnit“.
   
5. Vyberte styl přechodu.
   
6. Stiskněte každé pole barev a najděte barvu, kterou chcete přidat do přechodu.
   

Nejčastější dotazy

Kolik barev mohu přidat do přechodu ve Figmě?

Můžete přidat tolik barev, kolik chcete, ve standardním i síťovém stylu přechodu Figma. Ale snažte se to nepřehánět. Vzhledem k tomu, že přechody mají více přechodových barev, více než pět může být příliš mnoho, dokonce i pro síťový přechod.

Mohu do Figmy importovat přechod?

Do Figmy můžete importovat libovolný přechod. Můžete například vložit kód z CSS (Cascading Style Sheets) otevřením panelu „Kód“ a vložením kódu. Přechody můžete také importovat z Adobe Illustratoru.

Kde najdu bezplatné přechody Figma?

Bezplatné a placené přechody Figma najdete v  komunitě Figma . Nabízí nepřeberné množství nádherných a jedinečných designů vytvořených uživateli Figmy. Filtrovat můžete podle pluginů, souborů a widgetů. Do vyhledávacího pole v horní části zadejte „gradient“ a najděte ten, který se vám líbí.

Získejte funky s barevnými přechody

Přechody jsou vynikajícím způsobem, jak učinit design odlišným a personalizovaným. A Figma vám umožňuje hladký přechod mezi dvěma nebo více barvami, které si vyberete. Nepřehánějte to však. Smíchejte barvy, které se k sobě hodí, a snažte se zůstat ve stejné paletě barev.

Už jste zkoušeli udělat gradient ve Figmě? Řekněte nám v komentářích níže, jaký styl přechodu jste použili a k ​​čemu jste jej použili.