• úvod
  • témata
  • události
  • tržiště
  • diskuze
  • nástěnka
  • přihlásit
    registrace
    ztracené heslo?
    KULHYUI design, design systémy, interakční design, ♥ Figma
    Design rozhraní webů a aplikací. Architektura design systémů. Interakční design. Všechno okolo Figmy, ale i dalších editorů (XD, Sketch, Framer, Webflow).

    Jaka je vase design role?


    Instrukce:
    Pokud profesne delate UI design, jakou roli ve firme zastavate, priapdne jak by jste svou roli definovali, pokud delate sami na sebe?

    15 hlasy od 15 respondentů

    rozbalit záhlaví
    PETRPEDROS
    PETRPEDROS --- ---
    Ahoj řeším problém se zalomením textu. Ve word mám nasekané mezery, v indesign se text tváří stejně, ale vložím ho do figma a najdenou mi mezery chybí. Nevíte čím to může být?

    KULHY
    KULHY --- ---
    Tyjo, tak to jsem byl docela Nostradamus KULHY. :)

    DAN_F
    DAN_F --- ---
    HAVANA: Je to tak, Figma nemá, co se týče prototypování, zas tak sofistikované možnosti. Jestli myslíš nějaký range slider, tak buď to můžeš udělat jednoduše vizuálně přes varianty a sloupec s potřebným množstvím čísel, který zarovnáš v každé variantě do opačné krajní polohy a pak ty mezikroky necháš vyřešit animaci, tj. takhle:
    How To Make Range Slider In Figma | #figmatutorial
    https://www.youtube.com/watch?v=2d32vTtJUnw


    Nicméně bude tam ta lineární animace posunu sloupce s čísly, takže se to nebude chovat úplně odpovídajícím způsobem, jako kdyby se ti jen překreslovala čísla.

    Přesné chování by pak možná mohlo jít teoreticky nasimulovat prostřednictvím variables, kde jsem viděl, že jdou celkem jednoduše simulovat chování různých counterů / stepperů, ale k variables jsem se po pravdě ještě sám vůbec nedostal, takže nevím, jestli to lze aplikovat i na slider.
    DAN_F
    DAN_F --- ---
    Jinak, pamatujete si někdo na Invision Studio?
    Introducing InVision Studio—the world’s most powerful screen design tool
    https://vimeo.com/238515862
    RUDOLF
    RUDOLF --- ---
    Strávil jsem s Figmou asi 8 hodin, máme ready-to-use komponenty z kterých se dají poskládat standardní prvky. Prezentuji prototyp, teda takovou light verzi, z každého view jsem udělal single page flow, takže uživatelé navigaci flow používají jako překlikávání mezi položkami menu. Do skutečného interaktivního prototypu jsem se nepustil, páč tam byl koncept Frame a když jsem pak zkoušel apikovat frame na ty své view, tak mi to přišlo trochu trochu nemotorné a zdlouhavé a tahle navigace postoužila. Tj. tohle si vyzkouším na něčem jednodušším. né na něčem, kde už probíhá feedback.

    Mám ale jiný dotaz, nakonec jsem doiteroval, že mám page s komponentama a udělal jsem něco, co asi není best practice, ale jdu si to u vás ověřit. OneDnA | Prototype je kompnenta složená z menu komponenty + dalších komponent. Každý view (stránka) je nová variace komponenty + do ní vložím jinou obsahovou komponentu, to jsou ty komponenty po stranách. A tyhle vnořený komponenty mají taky variaci, takže napříkladu: mám dvě variace celé stránky, obě mají komponentu která pro každou variantu stránky ukáže jiný obsah. Takže upravím breadcrump + zlustím označenou menu item a mám to.

    Takhle si ten Prototype pak dám na stránku, kam koukají kolegové, vysázím tam 10 instanci Prototype a v každé instanci vyberu jinou variantu.

    Z toho co jsem koukal, tak varianty jsou spíš na tvorbu interaktivních elementů a ten můj přístup je takové moje samorostlé flow. Když se ho budu držet, narazím na nějaké problémy? Hlavně s ohledem na vytváření interakce.

    KULHY
    KULHY --- ---
    Mam tu ted na stole komplexni komponentu pro nas produkt — tabulky. Porad jsem premyslel, jak sikovne nakombinovat system sloupcu i radku (protoze oboji ma svuj vyznam), ale nejak mi to ve svete autolayoutu, ktery je bud horizontalni nebo vertikalni nefungovalo. Narazil jsem na skvele postaveny system. Ten umi oboji, ale hlavne pouziva chytry trik, ktery me nikdy nenapadl. Kdyz chcete na sebe navrstvit dva auto-layout frejmy, kazdy v jinem smeru a zustat responzivni jako celek, jednoduse se frejmy adekvatne ukotvi a nastavi na scale. Clovek se tak moc uzavre do auto-layoutu, az mu unikne jina zakladni funkcinalita.
    Easy table builder | Figma Community
    https://www.figma.com/community/file/1207404789742132927/easy-table-builder

    KULHY
    KULHY --- ---
    DSTEPZ: Hele chapu — a asi mas pravdu, ale i tak mi to prijde jako zdrava light alternativa, mozna i diky tomu ze to neni uniformni list, ale jsou tam i ty potvory s podurovni. Muzeme si samozrejme rict, ze ty taky meli mit indikaci zatrhnutyho child filtru, ale to by vedlo k dalsimu zeslozitovani UI a na kontrolu mas pak prehled aktivnich filtru mimo list. tady rychlej check. Problem vidim spis v tom odsazeni,

    KULHY
    KULHY --- ---
    DSTEPZ: To byl celkem rozumnej zaver. :) Ano — neptam se na UI. Diky za poznatky jak chapes zarazeni filtru.

    Ale tak kdyz jsme v tematickym auditku — tak pro zabavu. Je tam toho hromada spatne, ja bych to taky takhle nedelal. Je to teda multi-select, ale treba zasmogovat to menu checkboxy mi prijde fail. Podivejte se na podobny typy menu. Ten nahatej check funguje skvele. Odsazeni samozrejme spatne — souhlas a melo by byt jako na tehlech prikladech.

    DSTEPZ
    DSTEPZ --- ---
    KULHY: Nevim, jestli to chapu dobre, ale tohle resi princip atomic designu

    KULHY
    KULHY --- ---
    Třeba tady filtr v produktu teď někdo navrhoval, že by to komplexní dropdown menu (které je samo o sobe instance kompoenenty menu) mělo být součástí té komponenty včetně konkrétního obsahu. Já tvrdím, že to tam už nepatří. A že se to dá dát někam do nějaký nadstavby typu templates to chápu, ale jde mi hlavně o tu definici pravidel — co ještě patří do design systému a co už jsou právě nějaký templates. Podle čeho by jsme se při dalším rozvoji mohli řídit.

    GEN_IO
    GEN_IO --- ---
    Dovolím si odložit. I pro ostatní. Nevím, jestli jste zaregistrovali. Třeba se bude komu hodit ⭐️

    Convert any website into fully editable Figma designs | HTML to Figma file
    https://youtu.be/gk7tr31KqEM


    Plugin: https://www.figma.com/community/plugin/1159123024924461424/html.to.design

    KULHY
    KULHY --- ---
    Zrovna resim v praci odsazeni obsahovej bloku na webovy strance. Specificky se bavime o tom jestli je dulezity pro uzivatele zajistit i pro pomerne maly rozliseni (jako je 1280 x ~700), aby byl ve viewportu vzdy videt kousek dalsiho bloku.

    Cetli jste nejaky pojednani, zavery z testovani nebo mate vlastni zkusenost, priapdne i subjektivni nazor?

    KULHY
    KULHY --- ---
    Dneska pobavilo:

    KULHY
    KULHY --- ---
    PETRPEDROS: Jako docela jsem zamrznul po otevreni mailu. Nezbyva nez doufat, ze to prezijeme…

    DSTEPZ
    DSTEPZ --- ---
    CUBICULA: Nojo, za tyhle presahy muzou vsechny ty konverze a google analytics. Driv se temer nic nemerilo a stacil ti grafik, kterej ma zkusenosti v danym oboru. V dnesni dobe se po grqficich kolikrat vyzaduje, aby umeli udelat i dobry kafe. Not good.

    A jeste pro odlehceni

    KULHY
    KULHY --- ---
    KULHY
    KULHY --- ---
    Btw tohle je pecka! Text baseline alignment…

    KULHY
    KULHY --- ---
    CUBICULA: Jasne ze muzu, jen jsem nebyl u kompu :)

    Me to funguje na jednicku.

    KULHY
    KULHY --- ---
    KAJJAK: Tohle je pro me zatim trochu neprobadana puda. Rekl bych ze cesty na to jsou, ale vzhledem k povaze Figmy to asi neni uplne optimalni a dotazeny CSS. Figma uz v zakladu nabizi nejaky CSS readout v inspect panelu a pak jsou tu nejaky pluginy ktery to asi posouvaji dal (napr. CSSGen).

    Vetsinou je stejne potreba harmonckej tandem designera a frontendisty, aby si nastavili atomickej zaklad a pak uz se vesele sklada jen z nazvu komponent a jejich properties.

    Kliknutím sem můžete změnit nastavení reklam