Jaký je jiný název pro rozložení?

Některé z nich jsme se naučili, když jsme projekt poslali vývojářům, jiné – když jsme pomocí pluginu Buzzy vytvořili fungující aplikaci bez kódu přímo ve Figmě.

Tento článek rozhodně není krátký, ale najdete v něm spoustu užitečných informací!

Figma je neuvěřitelně výkonný nástroj pro návrh typu vše v jednom, který se může pochlubit mnoha funkcemi navrženými pro zefektivnění procesu přenosu návrhu, ale tyto funkce musíte používat správně.

Dokončili jste svůj design a přecházíte na prototypování? Předat rozvržení vývojáři, dalším návrhářům nebo pomocí pluginu Buzzy vytvořit fungující aplikaci přímo ve Figmě?

Budete se muset prokousat nepřehledným, nekonzistentním a špatně strukturovaným souborem Figma. Navíc nebude o nic užitečnější než standardní JPEG. Proces přenosu souborů se stává zdlouhavým a únavným, nebo vývojář prostě začne improvizovat a dělat svá vlastní rozhodnutí o designu – a to nikdo nechce =)

Algoritmus akcí

Kdykoli nepracujete s pevně definovaným designovým systémem, vizuální zkoumání a nápady jsou chaotické, spontánní procesy, a to je v pořádku.

Po přechodu do další fáze k dokončení souborů, které budou přeneseny do programátorů, doporučujeme postupovat následovně.

Pokud používáte návrhový systém nebo sadu uživatelského rozhraní s komponentami a knihovnami stylů, již máte výhodu.

1. Určete hlavní téma a styly (barvy, typografie atd.). Použijte styly komponent a knihovny Figma. Usilujte o konzistenci – 15 odstínů červené nebo 11 různých textových stylů na jedné obrazovce nemusí být považováno za promyšlené rozhodnutí, ale vývojář (jako Buzzy!) může vzít návrh za nominální hodnotu.

2. Navrhněte si obrazovky, které potřebujete. Pokud znovu použijete určité prvky návrhu, přeměňte je na komponenty Figma. To vám pomůže udržet konzistenci. Kromě toho můžete rychle provádět jakékoli změny v projektu.

3. Použít rámy (ne skupiny!) a funkce Auto Layout pro vytvoření konzistentní, logické hierarchie pro vaše rozvržení a prvky návrhu. Má být toto tlačítko umístěno uvnitř textového řádku nebo nad ním, zarovnáno k okraji obrazovky? Pečlivě zvažte umístění prvků a zajistěte, aby byly rozestupy mezi nimi jednotné.

4. Představte si, jaké budou interakce a chování obsahu, včetně zarovnání, umístění prvků při změně velikosti nadřazeného bloku, chování objektů vyčnívajících mimo kontejner a možnosti posouvání stránky. Pokud chcete změnit velikost obrazovky, přetáhněte roh rámečku a ujistěte se, že se prvky návrhu chovají tak, jak očekáváte. V tomto případě bude vývojář (nebo plugin Buzzy) schopen pochopit, jaké by mělo být umístění a chování obsahu.

Má být tato ikona zarovnána k levému okraji textu nebo k levému okraji tlačítka, které ji obsahuje? Změní se velikost tohoto tlačítka, pokud se změní velikost textu?

Vestavěné nástroje Figma vám dávají možnost toto vše definovat, i když mají vaše návrhy a prototypy pevnou velikost.

5. Volitelný krok: Nastavte a otestujte prototyp. Je to skvělý způsob, jak otestovat vizuální prvky a funkce, a také rychle začít s Buzzy, protože okamžitě identifikujete a přizpůsobíte hlavní obrazovky a navigaci.

6. Rozhodli jste se použít plugin Buzzy? S ním můžete oživit obrazovky a navigaci.. Pokud již máte prototyp, automatizace obrazovek a navigace vám poskytne výraznou výhodu! Publikujte svou aplikaci a otestujte ji, abyste se ujistili, že se vše zobrazuje a funguje tak, jak jste zamýšleli. Než přejdete ke složitějším manipulacím, proveďte opravy. Zkontrolujte, zda jste navrhli všechny obrazovky a potřebné prvky (výstrahy, dialogová okna, chybová hlášení, prázdné stavy nabídek atd.).

7. Pomocí pluginu Buzzy můžete vytvářet fungující obrazovky, nabídky a dynamický obsah. Označte formuláře, pole, data a komplexní chování. Rozdělte proces do samostatných kroků a pracujte vždy na jedné malé nebo jednoduché části.

8. Publikovat, testovat, vylepšovat aplikaci a opakovat v případě potřeby konkrétní kroky!

To je vše! Prvních 5 kroků je dobrou praxí pro práci s Figma, i když Buzzy nikdy nepoužíváte. Ať tak či onak, vaši kolegové designéři a vývojáři vám za tento přístup poděkují. Hodně štěstí!

jsi ještě tady? Níže naleznete podrobnější příklady, užitečné tipy a triky.

Podrobné tipy a příklady

Podívejme se na některé podrobnější příklady založené na výše uvedeném přístupu. Mnohé z nich se částečně duplikují a vyjadřují jedinou myšlenku – „jednat důsledně a opatrně“.

1. Hnízdění je důležité

Pokud ve svém návrhu vidíte několik prvků umístěných nad větším prvkem, pravděpodobně to znamená, že by do něj měly být vnořeny.

To není nejlepší řešení.

Nejčastějším příkladem této chyby jsou tlačítka. Na obrázku výše jsou tvar tlačítka a text na sobě zcela nezávislé. To vede k problémům jak s uspořádáním, tak s funkčností.

• Rozložení: Text by měl být umístěn vzhledem k tvaru tlačítka, nikoli k nadřazenému kontejneru nebo obrazovce, ve které jsou prvky umístěny. Pokud se změní velikost nebo umístění druhého, text a tlačítko již nebudou vzájemně zarovnány.
• Funkčnost: Na který ze 2 objektů by se měla akce tlačítka použít? Pokud do formuláře, pak kvůli textu bude střed tlačítka deaktivován, protože je umístěn nápis nad formulářem (a ne uvnitř) a lisování bloků. Proto html prvek „button“ (tlačítko) zahrnuje podpis.

Oprava chyby: Změňte tlačítko na rámeček obsahující textovou vrstvu. Nyní bude tato vrstva umístěna a upevněna uvnitř rámečku, na který můžeme bezpečně aplikovat akci: popisek je součástí tlačítka, a proto je interaktivní, stejně jako pozadí.

Navíc můžete rámečku přiřadit vlastní styly (výplně, tahy, efekty, zaoblené rohy atd.), takže se obejdete bez zbytečné vektorové vrstvy „tvar tlačítka s pozadím“.

Hurá! Nyní je tlačítko jediným prvkem.

Další rady: Povolte funkci Auto Layout rámu pro automatické ovládání velikosti prvku, zarovnání a odsazení.

Ještě lepší! Nyní můžeme snadno ovládat výplň a chování tlačítka jak při změně velikosti jeho kontejneru, tak při změně jeho obsahu (například pokud změníme text nebo přidáme ikonu).

2. Používejte rámce, nikoli skupiny

To přímo souvisí s výše popsaným problémem vnoření: obecně, pokud něco „seskupíte“ ve Figmě, je to znamení, že byste měli použít rámeček nebo automatické rozvržení.

Přístup, který zvolíte, ovlivňuje funkčnost, snadnost použití a výkon – rámečky lze upravovat, čímž se eliminuje potřeba vrstev pozadí, které se vznášejí za titulkem.

Brilantní srovnání rámečků a skupin viz tento článek Příprava uživatelského rozhraní.

Rada: Klepněte pravým tlačítkem myši na skupinu a vyberte „Výběr rámečku“. Potom přetáhněte vrstvy ze skupiny nahoru tak, aby byly uvnitř rámečku, a odstraňte skupinu. Ujistěte se, že jsou prvky správně umístěny/propojeny (viz níže).

3. Věnujte pozornost umístění a ukotvení

Ve Figmě mají rozvržení pevnou velikost a prvky rozhraní lze přetáhnout kamkoli. Ale v praxi jsou všechny umístěny určitým způsobem a mají specifická nastavení, která jsou zvláště důležitá během procesu vývoje.

Oprava chyby: Pomocí ovládacích prvků na pravém panelu upravte šířku, výšku, souřadnice X a Y, možnosti zarovnání a změny velikosti pro každou vybranou vrstvu. ​​Ale udělejte to až poté, co pochopíte vnoření vrstev – viz výše!

Tip pro používání pluginu Buzzy: Vyberte režim Fixed Layout, abyste nemuseli měnit velikost návrhu. I když tato rada nebude fungovat pro skutečnou aplikaci, je to užitečné řešení pro prototypy nebo MVP (minimální životaschopné produkty).

4. Zvažte chování responzivního rozhraní, prvky, které přesahují obrazovku, a možnosti posouvání

Jak se mění množství obsahu na každé obrazovce, přemýšlejte o tom, jak bude fungovat posouvání a jak efektivně oříznout prvky mimo obrazovku. V ideálním případě byste měli používat konzistentní přístup na podobných obrazovkách, aby navigace a další akce zůstaly pro uživatele předvídatelné.

Oprava chyby: Karta Návrh ve Figmě obsahuje ovládací prvky pro oříznutí objektů mimo rámec a karta Prototyp obsahuje ovládací prvky pro úpravu posouvání. I když je ve Figmě sami nepoužíváte, vývojář (nebo nástroj jako Buzzy) je může použít k určení stylu a chování prvku.

Pokud jste navrhli pevné rozvržení aplikace, naplánujte si dopředu, jak se má chovat na jiných velikostech obrazovky.

Tip pro používání pluginu Buzzy: Buzzy obsahuje některé základní ovládací prvky pro přizpůsobení citlivosti návrhu, od jednoduchého nastavení minimální a/nebo maximální šířky obrazovky po individuální ovládání každé šířky nebo možnost „flex-wrap“, která umožňuje zalomení obsahu při změně velikosti výřezu.

Budete muset udělat pár pokusů a omylů a trochu experimentovat. Nejlepší je začít s testovacím souborem, který demonstruje, jak v praxi funguje nastavení Figmy a responzivní nastavení Buzzy.

5. Jednotnost a přesnost jsou nesmírně důležité.

I když je to zřejmé, rozhodli jsme se to zmínit znovu. Dělejte chytrá designová rozhodnutí.

Pokud musí být prvek vždy 20 pixelů od horní části obrazovky, ujistěte se, že je to vždy 20 pixelů, nikoli 22 pixelů na jednom, 23 pixelů na jiném a 19 pixelů na jiném – uživatel uvidí, že poskakuje po obrazovce. Pokud potřebujete, aby byly prvky vzájemně zarovnány, ujistěte se, že jsou skutečně zarovnány.

To také ovlivňuje vnořování prvků a rozhodnutí, která jsou přijímána během procesu vývoje.

Pokud je ve výše uvedeném příkladu nutné prvky zarovnat doleva a mít jednotné vertikální odsazení, je výhodnější použít funkci Auto Layout na nadřazený kontejner, než ovládat 3 samostatné prvky umístěné nezávisle na sobě. Vývojář bude muset vytvořit 1 kontejner a aplikovat na něj několik jednoduchých stylů.

Pokud jsou objekty záměrně nesprávně zarovnány návrhářem, bude muset vývojář přidat další stylingové a/nebo obalové prvky, aby bylo umístění přesně tímto způsobem, což je obtížnější a časově náročnější.

6. Opětovné použití prvků

Pokud se prvky objevují více než jednou, přeměňte je na komponenty (nebo styly), abyste zjednodušili návrh a vývoj. Navigační lišty nebo tlačítka, která se objevují na více obrazovkách, lze převést na opakovaně použitelné součásti. To usnadňuje navrhování, provádění změn a zabraňuje nesrovnalostem a chybám v souboru Figma.

Další oblastí, kde se komponenty důrazně doporučují, jsou ikony. UI Prep má podrobný průvodce o používání ikon v Figma.

7. Vyvarujte se zbytečných transformací, obratů a rotací

To je důležité, pokud používáte Buzzy, protože publikování transformovaných prvků je v současné době podporováno pouze částečně. Tento přístup bude správný v každém jiném případě.

Například v níže uvedeném příkladu je rám otočen o 180 stupňů: to neovlivňuje jeho vzhled, ale snižuje výkon publikované aplikace a ztěžuje určení polohy prvku bez jeho otočení zpět.

Jak je to daleko od levého okraje obrazovky? Hodnota 280px na panelu nástrojů vpravo je nesprávná, protože odkazuje na pravý okraj objektu.

8. Tip pro uživatele Buzzy: Vyhněte se tahům, zejména u složitých vektorových tvarů a ikon

Buzzy při publikování zvládá okraje a tahy jen částečně, zvláště když se zabývá složitými vektorovými tvary. Tento problém se obvykle týká ikon. Nejlepším řešením je aplikovat na ně funkci Obrysový tah, zkombinovat složité tvary (například pomocí Union Selection) a poté stisknout Flatten Selection, abyste získali jeden vektorový objekt.

Oprava chyby: Na horním navigačním panelu vyberte „Object“ a poté „Outline Stroke“.

9. Tip pro buzzy uživatele: Použijte Flatten na vektorové tvary

Toto je speciální pravidlo pro uživatele Buzzy: složité vektorové tvary (jako jsou mnohoúhelníky, hvězdy atd.) musí mít aplikovanou funkci Flatten, aby se při publikování správně zobrazily.

Standardní rámečky, obdélníky a elipsy fungují skvěle bez dalších manipulací.

Plugin rozdělí text na fragmenty, aby do každého z nich zahrnul dynamický obsah nebo proměnnou. Upozornění: K ovládání polohy a velikosti prvků používáme automatické rozvržení!

V tomto příkladu je uživatelské jméno proměnná, která by měla být umístěna ve vlastní textové vrstvě, to znamená, že text „Vítejte“ byste měli umístit do samostatné statické textové vrstvy.

13. Tip pro rušné uživatele: Vytvářejte vícevrstvé výplně a obrázky na pozadí chytrým způsobem

Buzzy aktuálně nepodporuje vícevrstvé výplně ani obrázky na pozadí. Cesta ven je vytvořit několik vrstev, abyste dosáhli požadovaného výsledku. Například základní vrstva s obrázkem na pozadí a další s barevnou přechodovou výplní jako překrytí.

14. Tip pro buzzy uživatele: Nastavení obrazu

Buzzy aktuálně nepodporuje přizpůsobení obrázků. Plugin používá zdrojové soubory tak, jak je Figma přijímá (raw), takže musíte nejprve upravit původní obrázek.

Řešením je použití Figma k provedení změn, exportu upraveného obrázku pomocí požadovaných nastavení exportu a opětovnému importu finálního obrázku k publikování přes Buzzy.

Pokud jste dočetli až sem, jsem ohromen. Ale děkuji a dobrou noc.