Triky a triky
O čem je tento článek?
Ahoj všichni, jmenuji se Andrey Nasonov, jsem návrhář UI/UX, pracuji jako vedoucí konstrukčního oddělení v Elonsoftu, toto je moje série článků o tricích, tricích a dalších tricích v Figma 🙂
Tento článek pro designéry, ale bude užitečný pro ostatní členy týmu.
Chci se podělit o trik, který usnadní návrhářům, front-endovým vývojářům a QA život .
A co je nejdůležitější, snižte počet nesrovnalostí mezi rozvržením a designem.
Problém
Pravděpodobně si to všimlo jen málo lidí, ale pokud zadáte figmu s právy „zobrazit“ a najeďte myší nad prvek, který nemá barvu výplně, pak figma nezobrazí hranice prvku.
I když dáte prvku tah nebo barvu, ale nastavíte 0% krytí, ohraničení se stále nezobrazí.
A protože vývojáři front-endu, QA a další členové týmu často mají oprávnění „zobrazit“ , toto chování figmy jim přináší spoustu nepříjemností.
Představte si, že pokaždé, když se pokusíte určit velikost prvku nebo vzdálenost mezi prvky, musíte přejít na panel vrstev a vybrat požadovaný prvek.
To je nepohodlné a je to něco, co s největší pravděpodobností nikdo neudělá.
K čemu to vede
Frontendery nemohou určit správnou velikost prvku nebo mezery mezi prvky a v nejlepším případě zkontrolovat rozměry u návrháře, ale nejčastěji se sázejí podle svého uvážení. Jak ukazuje praxe, velikosti a okraje v tomto případě nebudou odpovídat designu.
Druhým problémem je export vrstvy ikony bez rámečku, ve kterém je umístěna. To vede k tomu, že ikona je v prvku nesprávně umístěna nebo má nesprávnou velikost.
O ikonách v návrhovém systému jsem psal více v předchozím článku.
To vše komplikuje vývoj a přidává další práci, protože budete muset popsat problém pro všechny nesrovnalosti a vývojáři front-end to všechno napraví.
Řešení problémů
Abych tento problém vyřešil, přišel jsem s malou berlí nebo „pístem“, jak říká jeden chlápek na YouTube.
- Vytvořte barevný styl.
- Otevřít okno pro úpravy stylu.
- Klikněte na náhled čtvercové barvy a v levém horním rohu vyberte místo obrázku „Obrázek“ „Obrázek“. Poté přesuňte kurzor na šachovnici a klikněte na tlačítko „Vybrat obrázek“
- Dále vyberte plně průhledný obrázek png. Čím menší obrázek, tím lépe, použil jsem obraz 1 x 1 pixel. (Obrázek lze stáhnout z níže uvedeného odkazu)
- Všechno, styl je připraven.
Nyní použijte tento styl na všechny prvky, kde chcete, aby se rámeček zobrazil při najetí myší.
< span class = "ui_preloader__dot">
Například jsem připravil dva rámečky s prvky. V jednom jsem použil styl na komponenty tlačítek a ikon a v druhém ne. Pokuste se zvýraznit prvky a získat představu o tom, co každý den cítí vaše fronty 🤯
Zde můžete exportovat transparentní soubor png 1x1px (v červeném poli, viz panel vrstev)
Kde podat žádost?
Tento styl přiřazuji průhledným prvkům, jako jsou základní tlačítka, tlačítka tahu, karty, položky seznamu, komponenty ikon, buňky tabulky atd., a také pomocí tohoto stylu označím strukturu stránky.
Nepřiřazuji tento styl všem průhledným rámům, ale pouze těm, kde si myslím, že je důležité, aby frontend viděl hranice bloku nebo prvku.
Záměrně tento styl nepřiděluji některým rámům, protože chápu, že front-end má více možností a nejsou tak často zabaleny prvky do kontejnerů, jako jsou návrháři. Vzhledem k tomu, že figma není dokonalá, musíme pro dosažení požadovaného chování někdy zabalit prvek 100 500 snímků.
PS. Pokud použijete tento styl na komponentu ikony, nezapomeňte zrušit zaškrtnutí políčka „Zobrazit v exportu“, aby při exportu ikony do svg nebyl žádný další kód.
bonus
Pokud použijete techniku, když je komponenta ikony zabalena do sjednocení, pak pokud namalujete komponentu ikony v tomto stylu, můžete rychle vybrat ikonu pomocí kombinace ctrl + LMB. Už se nemusíte propadat několika vrstvami nebo stisknutím klávesy Enter přejdete na ikonu.
Děkuji
Pokud jste se dozvěděli něco nového nebo vám byl článek užitečný – stiskněte ^
A pokud chcete vědět více triků – přihlaste se k odběru, aby vám neunikly nové články.
Pokud jste frontend a máte podobný problém, ukažte tento článek svému návrháři, možná bude ulehčete si život 😊
