Component States & Hover - Adobe XD November Release 2019 | Adobe Creative Cloud

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 80

  • @andrewkiminhwan
    @andrewkiminhwan 4 роки тому +1

    Hats off to Adobe, such a powerful prototyping tool. Developers have little to imagine now

  • @jonasboardwalker
    @jonasboardwalker 5 років тому +1

    I use XD from the very beginning, and it’s really nice to see how this product grows and get more and more features and all of them are very useful. It’s not like Adobe Photoshop which I’ve started to use when it already existed for many years and already had a lot of functionality, so it’s almost impossible to learn it 100% cause it will simply take ages

  • @rjosori
    @rjosori 5 років тому +28

    I absolutely love this! The only other feature that I'm yearning for is the ability to embed videos and/or animated GIFs. Please provide us with that feature.

    • @thegroove2000
      @thegroove2000 5 років тому +4

      and to implement an export kit to a fully working website.

  • @MyoDest
    @MyoDest 5 років тому +13

    I'm playing with component states right now and found out it does't play nice with component instances which are different size or otherwise changed from the master component. For example you want to have a prototype master compoment button that you want to use with different texts across your project which would result in buttons of different sizes(widths). With static component and good responsive resize settings you are covered, but if you add states in to the mix it doesn't work. If you for example have a change in border color of your button background for hover state then it ancors all parameters of the background rectangle including size, so when you use it in your instance and change your button width and text of your button, it only reflects for the default state and the hover state keeps the master element text and background rectangle size. Maybe an option to choose what exactly should be linked or what not between states would be nice.

    • @raghavherle8641
      @raghavherle8641 3 роки тому

      true that !! I'm struggling with the same thing new Figma beta does is better now, I hope xd can catch up quickly

  • @porwinii
    @porwinii 5 років тому +1

    Finally it's going to be more understable for users. I'm so excited about this feature!

  • @kirstyplz
    @kirstyplz 5 років тому +6

    Awesome! Next step would be the ability to make a component a trigger to change another component's state within the same artboard. For example, a switch to change light/dark mode. The less artboards the better!

    • @Duesi2024
      @Duesi2024 5 років тому

      true, would be an awesome feature

    • @Rafael-dj-c
      @Rafael-dj-c 5 років тому

      Yea I think auto animate could use some sort of timeline as well so that less artboards are needed to make something work.

    • @ursusss
      @ursusss 5 років тому

      You guys should try Justinmind for that. It does wonders

  • @ManoliTsigonakis
    @ManoliTsigonakis 5 років тому +1

    best tutorial ive seen for component states so far. great video!!

  • @schizification
    @schizification 5 років тому +3

    Great update, but at least for me, it's very helpful to keep "time" as an interaction trigger for a component rather than an artboard option only.

  • @meaganleflar2
    @meaganleflar2 3 роки тому

    When you "style it out" at 5:16, what shortcut are you using?

  • @GadgetsGearCoffee
    @GadgetsGearCoffee 5 років тому +1

    When creating a DEV link, I'm not seeing any of the component states (like hover or clicking on the item and having a drop down appear) showing up anywhere so the component seems to only be for the client and not the devs? so we still need to have all this on a style guide page?

  • @helderof
    @helderof 5 років тому +7

    Good! But testing this feature i found a important thing: renaming a button and resizing it in a instanced asset, for example, is not changing it in your other states... that's sad :(

    • @andrewchan5461
      @andrewchan5461 4 роки тому

      was wondering if you found a workaround to this?

  • @PavlovYuri
    @PavlovYuri 5 років тому +1

    These are great features! But how to document these states for transfer to developers? How to explain their logic of work? This would add the ability to automatically document the interface that is present in Axure! Or at least an automatically generated artboard with all the states of all components.

  • @jheyerlein
    @jheyerlein 4 роки тому

    Best feature ever!!! I am not sure if its possible but it would be aaaamaaazing to have time trigger on the states - eg for search bar blinking - its a pain to duplicate Startpages only for a blinking there.

  • @danielyavari
    @danielyavari 5 років тому +6

    This is awesome!! Any news about the smart layouts?

  • @growwithdesign
    @growwithdesign 5 років тому +3

    Can we change states "on time", instead of just on hover or on tap? This will be really helpful to show status updates on a page. Or to show 'toasts' if someone here is familiar with android.

  • @pseudomonarchiadaemonum4566
    @pseudomonarchiadaemonum4566 5 років тому +2

    Love this! Thanks for constantly upping your game with Adobe xD!

  • @creativecreator4599
    @creativecreator4599 2 роки тому

    Great tutorial, thanks!

  • @thomasjoli-coeur6037
    @thomasjoli-coeur6037 4 роки тому

    I've noticed a little lag delay in transition between the default and pointer cursor cursor in :hover🤔

  • @dontaskwhatkindofmusic
    @dontaskwhatkindofmusic 4 роки тому

    when I resize or move stuff in the hover state - sometimes it moves or resizes it in the default state too. and sometimes it doesn't and I can't figure out why it does sometimes and doesn't other times

  • @growwithdesign
    @growwithdesign 5 років тому

    From default state when i go to active state - I want both artboard (mega menu overlay) AND new state (menu item highlighted with an underline) to be selected. Right now, the capability is only for - artboard OR state. We need AND capability too.

  • @kevinlorca7069
    @kevinlorca7069 5 років тому

    #AdobeXD #UXDesign There's a bug when you have two different and separated components the hover effect only works on the bigger component. Imagine a map, with regions and circles inside each region. Each region and each circle have their own hover effects, when you hover on a region, the region is highlighted, but when you hover over a circle the hover effect doesn't work. Have in mind both components are separated and ungrouped. Please fix this soon, and thanks for the new features!

  • @HughMcQ
    @HughMcQ 5 років тому +2

    Only thing I can't replicate is the drag and drop action she uses to change the colour of the state. Any ideas?

    • @seungminlee5013
      @seungminlee5013 5 років тому

      Also it confuses me.

    • @HughMcQ
      @HughMcQ 5 років тому

      @@seungminlee5013 Think she presses 'i' to bring up the eyedropper.

  • @ivanwicaksana
    @ivanwicaksana 5 років тому

    I wish we can create component inside a component, and link the children component to state of parent component. is that make sense?

  • @stevenlewis9234
    @stevenlewis9234 5 років тому

    Video support would be good. Even animated GIFs for starters.

  • @Duesi2024
    @Duesi2024 5 років тому +4

    I just started with Adobe XD and find it pretty intuitive and awesome. Does these animations will be exported in html/css (for example with the Addon Fireblade)? (and if it does, does it also export between several Artboards?

  • @raghavherle8641
    @raghavherle8641 3 роки тому

    I think Figma made this tab bit better with their latest release. having different states tucked away in the inspector panel kinda feels cumbersome and unnatural. you can't see it all at one glance especially for things like the Material design input field for example. and things start to fall apart if you start adding objects to any states or original master. makes you wanna pull your hair out. Figma handles it pretty neatly.

  • @antoine257
    @antoine257 3 роки тому

    Can you create draggable sliders using the component state method?

  • @stamatiostentsos4957
    @stamatiostentsos4957 3 роки тому

    The fill color just snaps between the default state and hover state even though I have ease-in-out and 1 second duration. The shape changes as as expected between states. What am I doing wrong?

  • @talhairfan8521
    @talhairfan8521 3 роки тому

    why this feature is not showing in my adobe xd i have tried a lot but it just add the object in the component panel then no hover state or anything else.

  • @lowbonnet72
    @lowbonnet72 5 років тому

    Nice to have this working in one file, but here is a bad bug for you: Show the behaviour of hover component when created in one file and copy past it in another file - which should work perfectly. But it is not - it is way too buggy, I just can't get it to work in the other file. Even updating a component in the other file is not working when using hover component - it remains blue and asks me to update the component - which is does not. Please add beta to the XD logo, this freaks me out and cost me hours of tryal on error.

  • @amtechtube5056
    @amtechtube5056 5 років тому

    that was awesome and this is what i m looking for? Thanks Adobe and Great Job

  • @datmanUK
    @datmanUK 4 роки тому

    So if you resize a button will the hover state also resize?

  • @QuantumKayos
    @QuantumKayos 3 роки тому

    but u can hover on a touch screen, why is it toggle only...

  • @nicodishiznit
    @nicodishiznit 3 роки тому

    is it possible to do a Hover Image Cycle in Adobe XD?

  • @creativ3nergyboss633
    @creativ3nergyboss633 Рік тому

    how did you go into the state to change it?
    anyone please

  • @nikyabodigital
    @nikyabodigital 4 роки тому

    Hello creative cloud . I would like to suggest a very very important feature. the backwards compatibility :( . It's sad that we have to install reinstall or always get things updated before we can get to work.. What's worse is some client sends newer version that is not yet available in our country for some reason.. I hope for future adobe XD it needs to be backwards compatible :( . It's one of the feature that needs to be prioritize as it is the first step of everything before something can be done. hope it can be done like adobe photoshop where you can save things in certain versions or make it friendly in all version

  • @chipmunkshqip1423
    @chipmunkshqip1423 5 років тому

    Also the lastest update has a bug that crashes the app without any error

  • @chipmunkshqip1423
    @chipmunkshqip1423 5 років тому

    It is great but it is not completed. Example for prototypes I need to make a new conections for Hover

  • @David-xq7ef
    @David-xq7ef 5 років тому

    It this hover interaction only available inside a component to manage different states ?

  • @nowsheennazir3460
    @nowsheennazir3460 4 роки тому

    please tell me where i can find the component states & hover in old version of XD I can't find it anywhere

  • @pavelasafov
    @pavelasafov 3 роки тому

    Awesome! Thanks!

  • @prielhackim
    @prielhackim 4 роки тому

    thanks. very helpful

  • @juliocsfarias
    @juliocsfarias 5 років тому

    This is very interesting. But in the browser, that white bar below the prototypes makes no sense. Ideally, a simulation without height limitation.

    • @this-sky
      @this-sky 5 років тому

      Julio Farias try the XD app for phones- save it in the adobe cloud and it should show up for full screen interactivity

    • @juliocsfarias
      @juliocsfarias 5 років тому

      @@this-sky I actually refer to the desktop browser.

  • @dikamilo
    @dikamilo 5 років тому

    This is a huge feature

  • @SergeyGuslyar
    @SergeyGuslyar 5 років тому

    I don't see how i make Pressed state for developer, but i like that I saw

  • @niraj_nerd
    @niraj_nerd 5 років тому

    This new thing is lit

  • @imani828
    @imani828 5 років тому

    great, the comments are on!

  • @Pyrefaerie
    @Pyrefaerie 5 років тому +1

    I want animated pngs, they're cleaner than gifs and less than videos in size.

  • @qb8608
    @qb8608 5 років тому

    At last. :) Kudos.

  • @AndersJpg
    @AndersJpg 5 років тому

    i cant make it work right or wrap my head around how to work with it right. :(
    but it does looks neat

    • @Duesi2024
      @Duesi2024 5 років тому

      You need to make the selected items as "component" then u will get the menu (onto the top right side, like in this video) to set component states

  • @debimishra7325
    @debimishra7325 5 років тому +1

    Adobe XD is getting lagged in my iMac 27" :(

  • @RAJESHKT
    @RAJESHKT 4 роки тому

    This awesome.

  • @scalperdog6194
    @scalperdog6194 4 роки тому

    Thanks :)

  • @lazydas
    @lazydas 5 років тому +1

    THANK YOU LORD ALMIGHTY

  • @AndresGarcia-rh1fh
    @AndresGarcia-rh1fh 5 років тому

    Awesome!!!

  • @JacquesChueke
    @JacquesChueke 5 років тому

    I cannot toggle between states? How can I see them side by side? Dragging moves the object itself and not its different states.

  • @opeyemiajagbe
    @opeyemiajagbe 5 років тому

    Finally. Lord

  • @Po6bI4
    @Po6bI4 5 років тому

    Great!

  • @hamidrezasaleh7115
    @hamidrezasaleh7115 4 роки тому

    Those who disliked this video design on Figma 😄

  • @GodEye-96
    @GodEye-96 4 роки тому

    AS a designer, I hate this prototype mode. Now I have to do animations too? Just because these coders don't know how to style a website properly? lol F them they should be the one doing these animations, we designer already had too much work

  • @aaronabeid1866
    @aaronabeid1866 5 років тому

    YESSSSSSSSSSS!!!

  • @VoyceAtlas
    @VoyceAtlas 5 років тому

    why dont they just go ahead and combine it with an app that prints the code.

  • @mrtcnkrks
    @mrtcnkrks 5 років тому

    This is not something even new! The only new thing is the automatic hover the rest has already existed. It's easy to show the states of the buttons, switches and so on. What about drop-downs, data grids? Since component property released that was the issue. We can't show the states of the drop-down or grid. It gets crashed, Please fix it.

    • @Duesi2024
      @Duesi2024 5 років тому

      Yea, but the new update implements also, that u don't need several artboard to set an animation. But drop-downs and data grids are really missing

  • @羽·書
    @羽·書 5 років тому

    千呼万唤始出来

  • @elman_agaev
    @elman_agaev 5 років тому

    How can everybody take this app seriously if it does not have any color profile management, and you need to work on colors much more than usual because colors are not the same when exporting design? I would rather have fireworks with prototyping features than this failure.

  • @wabseer1038
    @wabseer1038 3 роки тому

    this shit is confusing as fuck bro what is happening

  • @tonys490
    @tonys490 4 роки тому

    adobe please get rid of confusing masks ... please make animations easy...masks are a nigghtmare