• ú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í
    DSTEPZ
    DSTEPZ --- ---
    Pokud delas ve webflow, tak je skvelej Relume framework (https://www.relume.io)/. Obsahuje to spoustu veci - 1. AI generator webu (struktura, sekce a komponenty). 2. AI copy (texty, ktery si na zaklade promptu muzes upravovat. 3. Export do figmy, kde muzes pridat barvicky a cely to pripadne customizovat a to cely pak nasledne importovat do webflow, ladit, publikovat atd. Samozrejme muzes vynechat figmu apod. Strasnej timesaver. Nejsem programator, ale v ramci webapps pouzivame radeji hotovy frameworky, na vsechno ostatni chatgpt /claude.ai.
    UV_CAT
    UV_CAT --- ---
    KULHY: Tak pak jsou takový nástroje, jako https://www.usegalileo.ai/ (jen design)
    Nicméně dokážu si představit nějaký pokročilejší node-based editor, ve kterym parametricky nadefinuješ celý web. Zatim jsem však takový nenašel...
    KULHY
    KULHY --- ---
    DAN_F: Něco málo dělat jde a můžeš ukáldat do .fig. Tady to mají hezky popsaný co jde a co nejde:
    https://help.figma.com/hc/en-us/articles/360040328553-What-can-I-do-offline-in-Figma
    ELECTRICKOTA
    ELECTRICKOTA --- ---
    Figma - DEV mode je nově placený
    Pricing for Figma's Free, Professional, and Organization plans.
    https://www.figma.com/pricing/#figma
    Dalo se to čekat ale i tak :(
    HAVANA
    HAVANA --- ---
    potreboval bych pls poradit, od nekoho kdo umi hodne dobre ve figme, a to primarne interakce...dokaze figma udelat tohle? na stejny urovni responsivnosti. a kdyz jo, tak jak?


    Untitled Document
    https://2ucq8y.axshare.com/
    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.
    JARDABEREZA
    JARDABEREZA --- ---
    DAN_F: Není to nezbytně nutná podmínka, ale hodně věcí to může usnadnit. Samozřejmě pak je možné, že jsi jediný na světě, komu to řešení vyhovuje anebo, že to děláš pro 5 lidí. Ale jinak bez toho potřebuješ hodně dobrý user research a komunikaci s uživately a to není snadné. U mě je takový projekt: https://github.com/jardicc/alchemist používám ho k práci hodně a myslím, že to hodně přidává na kvalitě. Občas mi někdo daruje pár tisíc na vývoj.

    U ostatních pluginů co nedělám pro sebe... já jsem teď full time programátor, takže ten kontakt s realitou grafika je pryč. Dřív tam byl, ale dneska prostě nevím... někdo mi to musí říct... nebo se musím sakra dobře rozpomenout.
    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
    JARDABEREZA
    JARDABEREZA --- ---
    Figma and Adobe are abandoning our proposed merger | Figma Blog
    https://www.figma.com/blog/figma-adobe-abandon-proposed-merger/
    Figma and Adobe are abandoning our proposed merger
    KULHY
    KULHY --- ---
    Docela jsem se s tou tabulkou popral nakonec. Nechci hodnocení designu, ten jsem nevytvářel, jde jen o technický řešení komponent ve Figmě.
    Screen Recording 2023-12-06 at 17.36.42.mov - Disk Google
    https://drive.google.com/file/d/1-4r2uVjg2msTehifJ9yqbNzL_t0hMvkO/view
    KULHY
    KULHY --- ---
    BLAMAZ: Pripadne tady ten hack neni uplne blbej
    Gradients with variables | Figma Community
    https://www.figma.com/community/file/1295349493892095561
    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 --- ---
    Z tohohle jsem si sednul na záď. Figma-like kolaborativní 3D design tool na modely, interaktivní scény/hry, 3D interface prototypy apod.
    Spline - 3D Design tool in the browser with real-time collaboration
    https://spline.design/
    KULHY
    KULHY --- ---
    To je docela sranda jak se to tady schazi ty ruzny pohledy. Fakt by me tesilo, vsechny ty vstupy sesbirat a udelat testovani. Bohuzel se nic takovyho nestane.

    Jeste par detailu a zajimavosti:
    - neni to muj design (mam trochu potrebu se od takoveho vysledku jako designer distancovat)
    - jedna se o filtr tabulkovyho vypisu ruzhnejch financinich zaznamu
    - je to desktop only
    - je tam modry podbarveni radku na hover
    - subsekce se rozeviraji na hover
    - pres to, ze to je subpar design, tak s tim uspesne pracuje tisice uzivatelu denne

    DSTEPZ: Validni uvahay, tezko ti dam ted odpovedi, ale vim ze levy panel s filtry nehrozi — ta apliakce ma tak preloadovanej interface, ze kdyz jsem to videl poprvy, tak jsem jen chvili ziral a nemel slov. Ale to je realita nekterejch odvetvi a fintech tam asi taky spada spolu s health, sience apod. (btw na tohle tema ma Vitaly Friedman ze Smashing Magazine fajn prednasku https://www.youtube.com/watch?v=2hlQqMigGZg%29

    ESTEN: Chapu tu pointu, ale toggle je proste pro me switch on/off nejake feature. Ja bych pouzil checkbox (nebo ten muj kontroverzni checkmark — ale chapu tu preferenci checkboxu, to uz jsem uznal). To litani ocima je imho jen domneka — podle me ta pevna pozice prvku znacici aktivni stav nalevo a prvku zancici dalsi uroven napravo naopak pomaha. Bud hledam nejakou polozku a nebo sekundarne koukam jestli je aktivni stav, takze se do sebe ty use cases nemichaji tim, ze by meli stejnou pozici a stridali se.

    HAVANA: Kazdopadne se muselo stat co popisujes. Samostanej modal s filtrama bych asi taky pri redesignovani prozkoumal, ale obecne se s tim patternem snzim setrit, preci jen te trochu hazi pryc z kontextu.

    Na konci dne by to stejne chtelo hlavne lepsi poradi, wording a grouping (proste obsahu a strukturu).
    JARDABEREZA
    JARDABEREZA --- ---
    KULHY: Třeba tady říkají, že ikona a popisek může být ReacNode. Tzn. jako property můžeš dovnitř strčit libovolnou jinou komponentu. https://ant.design/components/menu
    JARDABEREZA
    JARDABEREZA --- ---
    Avocode tvrdí, že nástroje pokročili natolik, že jejich soft už není potřeba :-D https://cc.cz/nastroje-ceskeho-startupu-avocode-vyuzivala-i-tesla-ted-ale-skoncil-prestaly-uz-davat-smysl/
    JARDABEREZA
    JARDABEREZA --- ---
    BLAMAZ: Když se podíváš na VSCode editor, tak tam byly některé velmi oblíbené pluginy. Např. obarvení závorek a odsazení. Používalo to dost lidí (statisíce). Takže to potom prostě dali do základu a už to není potřeba jako plugin. A takových je víc: https://www.roboleary.net/2021/11/06/vscode-you-dont-need-that-extension2.html Možná tudy mohla vést cesta.

    8000 nezní jako velké číslo, ale Photoshop ti 8001 vrstev prostě odmítne otevřít :-D A z toho skupina/artboard se počítá jako dvě.
    DAVVID
    DAVVID --- ---
    BLAMAZ: jn tohle me obcas vytaci u jinych aplikaci...
    nicmene koukam ze tlacitko "go to main component" je i v pravym properties panelu a jeho pozice se vicemene nemeni tak mrkni jestli neni utilita na zkratky co by umoznila namapovat konkretni souradnice monitoru na presunuti kurzoru a kliknuti...

    na macu to jde urcite s better touch tool, tam si vytvoris skoro jakykoliv makro... na pc netusim. (tahle utilitka je za me must have) ... muzes premapovat debilni zkratky co maji appky svyma zkratkama, vytvaret si zkratky na gesta trackpadu, zarovnavat okna, apod...)
    folivora.ai - Great Tools for your Mac!
    https://folivora.ai/
    KULHY
    KULHY --- ---
    UV_CAT: Zkusenost nemam, ale casto sklonovana je v tomhle kontextu Anima.

    Anima: Design to code | High-fidelity prototypes
    https://www.animaapp.com/
    Kliknutím sem můžete změnit nastavení reklam