I am just learning how to use inkscape. And I am confused about whether I should draw related images all into one svg, and then export them separately, or I should actually be saving them into multiple svg?

If I draw them in one svg, for example, button with up, down, and disabled state:


Then its much easier for me to compare them, for example, the size, colors, etc.

However, I find it very hard to do align them properly for exporting. For the example above, the whole button consist of the grey color area, and also a transparent area, and I find it hard to align the position of them, as I would want the grey box to be in relative position to the transparent box. I also find it easy to loose track of the transparent bounding box for exporting into bitmaps.

Is there a better way? or I should be using 3 svg for this case?

Welcome aboard!

Some hints:
You can change to outlines only display mode (by pressing Ctrl+5 twice on the numpad) and select transparet objects easily.
There is an align and distribute panel (Shift+Ctrl+A) for positioning.
Also you can set up a grid in the document's properties panel (Shift+Ctrl+D) and snap nodes to it if you like.

Keeping your work organised, you may try to group the objects making up one image together (Ctrl+G after they are selected).
Speaking of such portions, your second one's blurred shadow goes over the transparent area's bounding box, which possibly needs some correction.

On the original problem:
if those are grouped together into three objects,
you can clone them (Alt+D), and put the clones above eachother somewhere, and move each to a separate layer (Shift+Ctrl+L for the layer's tab to make new layers, Shift+PgUP/PgDown to move objects from one layer to another).
You can set the page area around that part of the screen, and then for each export switch a different layer's visibility on.

Another aproach would be keeping your buttons in svg format with no need of exporting.
Here is an example solution:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Button.html

Good luck!

Another approach would be to put each image onto a separate layer, then show/hide layers before exporting. That way you can set the canvas size to be the right dimensions for the button and export using the "Page" option at the top of the dialog, ensuring that all the images are the same size.

Thanks! The outline mode really made it easy. And also the grids and snapping to grids.

I can't use the buttons in svg format though as I am exporting it for libgdx's skin.

Thanks a lot for the help!