Zdaleka nejlepší způsob, jak pro návrháře rozvržení zobrazit rozvržení.
A pohodlný způsob sdílení rozvržení pro návrháře.

Náhodou se stává, že většina webových designérů pracuje v Adobe Photoshopu a posílá hotové rozvržení s příponou `.psd`. Což je pro nás, designéry layoutů, zcela nepohodlné, ale mnozí si na to již zvykli.

Musíte tedy neustále stahovat aktualizované návrhy, mazat staré (aby nedošlo k jejich záměně) a sledovat změny.

Nyní to může být mnohem jednodušší!

Návrhář (nebo vy sami) zveřejní své rozvržení ve speciálním programu a umožní přístup k projektu. Pokud bylo něco aktualizováno, zobrazí se oznámení „co“ a „kde“.

Kromě vždy aktuální verze designu je výhodou takových programů to, že pro zobrazení stylů nemusíte provádět zbytečné akce. Kliknete na tlačítko nebo text a okamžitě se zobrazí vlastnosti prvku, a když najedete na sousední prvky, zobrazí se odsazení.

Co dalšího můžete s těmito programy dělat?

  • Vyberte jazyk zobrazení stylu: CSS/Sass/Less/Stylus, Swift, Objective-C atd.
  • Zkopírujte text nebo sadu vlastností.
  • Zanechte komentář na správném místě rozvržení, pokud neexistuje žádné spojení s návrhářem.
  • Stáhněte si zdroje s ikonami nebo obrázky, což eliminuje proces ruční přípravy grafických prvků. Nejprve musí návrhář určit export konkrétního majetku v nastavení zdroje.

Obecně platí, že existuje spousta užitečných funkcí, které běžnému vývojáři značně usnadňují život.

Pokud projektant pracuje v:

1) Program Sketch (.sketch) — Zeplin / InVision / Figma / Avocode

2) Program Photoshop (.psd)— Zeplin / InVision / Avocode

3) Program Adobe XD (.xd) – Zeplin / Avocode / Adobe XD

4) Program Figma (.fg) – Figma / Zeplin / Avocode

Pojďme se blíže podívat na nejoblíbenější služby.

vzducholoď — služba pro prohlížení návrhových rozvržení. Funguje to takto: vezme soubor návrhu a vygeneruje průvodce stylem, zdroje a specifikace pro vývojáře.

Existuje desktopová aplikace, ale v prohlížeči funguje stabilněji. Rozvržení můžete přidávat pouze z programu, ve kterém návrhář pracoval.

Existuje mnoho nastavení, například:

  • zakázat zobrazení základních stylů
  • nastavit formát zobrazení barev (HEX, RGB, HSL)
  • přidejte do Průvodce styly barvy a parametry písem, abyste usnadnili navigaci a rychle nastavili stejné styly pro ostatní prvky
ČTĚTE VÍCE
Jak funguje kamera se snímačem pohybu?

Z mínusů stojí za zmínku, že neexistuje způsob, jak zobrazit modulární mřížku, musí to být samostatný soubor nebo popsán v nějakém dokumentu.

Chcete-li nahrát rozložení do Zeplin musíte si stáhnout desktopovou aplikaci, která automaticky nainstaluje další pluginy pro programy Sketch / Photoshop / AdobeXD. V Zeplin již musí být vytvořen projekt. Dále:

  • Photoshop vyberte nástroj „kreslicí plátno“, vyberte rozvržení a odešlete do Zeplin (Okno > Rozšíření > Zeplin)
  • skica vyberte všechna kreslicí plátna, která je třeba přenést na vývojáře, klikněte Cmd+E (⌘E) nebo Pluginy > Zeplin > Exportovat vybraná kreslicí plátna. Vyberte požadovaný projekt a klikněte import
  • AdobeXD vyberte kreslicí plátna, klikněte Cmd+Option+E (⌥⌘E)macOS / Ctrl+Alt+E Windows popř menu >Export > Zeplin. Vyberte projekt a klikněte import
  • Obrjiž má vestavěnou funkcionalitu pro práci se službou Zeplin. Chcete-li povolit export, otevřete menu >Integrace > Zeplin. Poté vyberte kreslicí plátna, klikněte Možnost + E (⌥E) / Alt + E nebo klikněte na tlačítko exportovat (v pravém horním rohu) a vyberte Export do Zeplin a požadovaný projekt

Ještě více se dočtete v samotném blogu Zeplin – nahrávají video o exportu + screenshoty a také popisují, jak připravit zdroje pro export.

InVision — služba pro rychlou konverzi návrhů na klikací prototypy a rozvržení pro spolupráci.

V InVision si na rozdíl od jiných programů můžete prohlížet animované prototypy. Rozvržení a prototypy můžete načíst stejným principem jako v Zeplin, tedy ze zdrojového programu.

Je velmi výhodné, že všechny obrázky ke stažení jsou na jednom místě. Existuje mnoho jazykových možností pro zobrazení stylů.

  • příliš zatížené rozhraní (vrstvy jsou zobrazeny a nelze je skrýt, přepínače režimů a mnoho dalšího, což jednoduchý vývojář často nepotřebuje)
  • nepohodlná navigace v rozvrženích
  • Stylovou lištu nemůžete natáhnout
  • neexistuje žádný formát HSL(HSB) pro barvy, ale existuje UIColor pro vývojáře Apple

Obr – nástroj, ve kterém můžete vytvořit návrh a přímo zobrazit styly z rozvržení.

Rozhraní je více přizpůsobeno speciálně pro návrháře. Nechybí ani desktopová aplikace. Na výběr zatím lze pouze CSS, iOS, Android + jsou hned logicky rozděleny.

Princip fungování Figmy spočívá v individuální konfiguraci práv: pozvat vývojáře do projektu, přiřadit mu stav „pouze pro čtení“. Vývojář se dívá na rozvržení, písmo, barvy, velikosti, odsazení. Ale pokud jste dostali plná přístupová práva, snažte se to nezkazit.

ČTĚTE VÍCE
Jak rozmrazit plastové kanalizační potrubí?

Čerstvost verzí je zajištěna nepostřehnutelným procesem synchronizace – všechny layouty v rukou front-end vývojáře jsou ve fázi, ve které je designér naposledy opustil.

Kromě toho můžete exportovat libovolné .skica soubor, který je převeden do požadovaného formátu pro Figma.

Avocode — program pro práci s libovolnými rozvrženími.

Rozvržení lze stáhnout dvěma způsoby:

  1. Připojením svého účtu Dropbox a výběrem požadovaného souboru odtud
  2. Nahrání návrhu přímo z vašeho počítače

Podporovaná rozlišení: .sketch, .psd, .xd, .ai. Soubory z programu Figma lze stáhnout prostřednictvím desktopové aplikace.

Pokud si designér předem nepřipravil prostředky ke stažení, pak to není problém – veškerou grafiku si můžete uložit sami pouhým výběrem požadovaného prvku a kliknutím na tlačítko export.

Avocode je přizpůsobitelný pro jakákoli kritéria a typy vývoje (webové a mobilní aplikace). Pokud zvolíte styl kódu Sass, můžete dokonce zahrnout knihovny Compass nebo Bourbon.

Před Avocode neměl žádný program možnost zvolit si zobrazení stylů přes CSS v JS. A nejlepší na tom je, že desktopový program je dostupný pro všechny operační systémy! Jsou tedy jednoznačně o krok napřed před všemi ostatními.

Je třeba poznamenat, že takové programy umožňují zdarma sdílet omezený počet projektů s ostatními. jeden účet. Pokud budete pozváni, může být projektů, kolik chcete.

Zeplin – 1 projekt. Placené projekty verze 3 nebo více od 17 $ měsíčně

Invision – 1 projekt. Placené předplatné od 15 $ měsíčně

Adobe XD – 1 projekt. Cena placeného předplatného s neomezeným počtem projektů začíná od 9.99 $

Figma – 3 projekty a 2 uživatelé. Další od 12 USD za uživatele měsíčně

Avocode – zkušební doba 14 dní. Služba stojí od 10 USD na uživatele měsíčně