Here is my long list of bugs, features and enhancements

[adithyaappu]

Let me know if you want these as separate issues in Github. I thought it is better to add one or few at a time, than overwhelming with a lot of issues. Maybe this can be used as a place to decide whether to take a suggestion from this list.

Bugs

• [x] #115
• [x] #143
• [ ] [3] Some font sizes mess up with vertical alignment of text inside a widget. To reproduce: Add an iOS toggle, W=24, H=24, Font Size=14. Now the text slightly below the center.
• [ ] #116
  • If I duplicate an object (original), which will be created at a space slightly bottom right (First Copy).
  • Then I will move this to align horizontal with the original. If I press the Ctrl+D again, the new copy (Second Copy) gets created again at slightly bottom right.
  • But move the second copy also to align horizontally with original and first copy, then pressing Ctrl+D creates a new copy (third copy) which is already horizontally aligned, and respects the spacing.
  • This behavious is expected with the second copy itself.
• [ ] #139
• [x] #142
• [x] #140
• [ ] #129
• [ ] [9] Additional scroll bar is present at right most edge, in Firefox

Basic Features

• [x] #141
• [x] [11] While designing I think the most commonly used shortcut is 'Alt' for duplicating the selected element. Photoshop started it, Adobe use it everywhere and even almost all the design softwares adopted the same shortcut, even Figma. So this is must need feature. #111
• [x] #174
• [x] [13] An option to hide elements temporarily (usually an eye icon), is a must needed basic feature. This combined with lack of cycle selection makes working very difficult.
• [ ] [14] HSB or HSL sliders. In my personal opinion, HSB or HSL should be the default way of choosing color, in every design tool. It's so convenient and intuitive to work with. This will be one very good feature to have.
• [x] [15] In simulation, option to hide the QR code. This will help to focus more on the screen.
• [ ] [16] When there are multiple objects stacked and have same border, or the bottom object is smaller than the top object, selecting the bottom object is very difficult. Usually this is addressed by something called cycled selection. You hold the Ctrl key and then click. When this is done, first click will select the first object, and second click, while holding the Ctrl key, will select the bottom object. this can be continued for more number of objects, if present. Right now the only solution is to select the object from left sidebar. (Selection of element inside a group is different from this.)
• [ ] [17] Ability to input fractional numbers in border thickness.
• [x] [18] Option to create 'Grid Layout' overlay, for a screen. A lot of designers prefer 8 point grid or 10 point grid. This along with snapping is usually very helpful to speed up the deisgn.
• [ ] [19] Ability to choose or change screen size presets, even after creating the first screen.
• [ ] [20] Unable to reduce screen size than preset value, neither by dragging nor by entering values.
• [ ] [21] Clip overflowing contents in a screen. If contents of a screen overflows the screen boundary, an option to clip and hide the overflowing elements can be given.

Advanced Features

• [ ] [22] Ability to make a new design of widget based on an available widget. This may involve coding, but helps to customise the widget a lot. Having this as an option to create variants will change the entire idea. (See next point)
• [ ] [23] QUX already have basic things to create component variants. I noticed that, 'Normal' and 'Hover' design properties get carried over in custom components. If this can be extended so that the user can add different design properties and define that set od properties with a name, you have a variant. If an option can be given to choose the type of component, which will give the same functionality of the curresponding widget.
• [ ] [24] I know there is no vector support, but some alternatives are necessary. May be a tool which will insert circle widget or line widget is needed. This is a major limitation, and could be a core reason designers hesitating to use QUX. May be the lack of vector support is the major limitation, if you look QUX as a design tool.
• [ ] [25] Another commonly used design feature is placing of borders. There are instances in which you want to align border inside, center or outside the edge of the element. Again I know there is not vector support. So it will be difficult to implement.
• [ ] [26] Modify the zoom speed depending on the scroll speet. (rate dependant)

Enhancements

Widgets

• [ ] [27] Since QUX is heavily dependent on widgets, I suggest showing the widgets in a window of widget that can be kept open, or as different tools, so that one click can be avoided. QUX does not actively announce or project the most powerful part of the tool.
• [ ] [28] My default intuition to insert a widget is to drag it. I think it is better to insert the widget only when the user start dragging. Clicking should just select the widget. This can be utilised to enable basic editing. (see next point)
• [x] [29] When trying to change the color of some part of a widget, there is no live update. Means I have to close the color selection dialogue box to see the update. This is very difficult to work with. The 'Text Label' already have live update of color, just by selecting of clicking a color, without closing the window. This is a highly needed feature to fine tune colors.
• [ ] [30] Different ways to group and show widgets. Right now, for example, different button designs in different styles are spread into different tabs/sections. One way to see all buttons is type button in search box. Wither this can be added as a dropdown menu which drops when the user clicks the search box, or an option to different grouping of main tab.
• [ ] [31] A simple way to modify commonly adjusted basic properties of widgets. For example option to change corner radius of Toggle widget. May be clicking the widget in the 'Widgets dialogue box' can show up adjustable properties on the right side, before the 'Import' button. Then users can import it after modification. If they don't want to modify, they can simply drag and drop. (Main logic is to give the users a clarity that widgets can be customised.)

Widget Options

• [ ] [32] After opening the 'Options' dialogue box of a widget, clicking on one of the option to edit should preselect the entire text. So that user can just click and type the option, and avoid selecting.
• [ ] [33] Pressing TAB should take the cursor to next option and preselect that also. switching to next option works sometimes, but not always.
• [ ] [34] Drag to reorder the added options, in 'Options' dialogue box.

Input

• [x] [35] While inputing in different fields, for example 'Widget' in right sidebar, pressing TAB should take the cursor to next relevant field and the number in the field should be preselected. So that I can input 'W' press TAB, the number in the 'H' box is presected, so I can directly input the required 'H' value.
• [ ] [36] I like the idea of every rectangle having built in text field. But the problem is the way to enter into text input mode. Right now if an rectangle is selected, one more click will turn on text input mode. But Text input is not a frequenly required feature. Also the chance of editing a text after inputting once is very low. So enabling text input by single click can be changed to double click. Means the input get activated only when the designer intentionally looks to activate it.
• [ ] [37] When color selection box is open, and if we enter the values manually, then expected behaviour is, 'TAB' take you to the next field, while 'ENTER', applies the values and close the window. Right now the window does not close.
• [ ] [38] When a value is being input in an input field in the right sidebar, pressing up or down arrow keys in keyboard can be configured to increase or decrease the value in the field where the cursor is present. This is commonly used to fine tune colours and transparency.

Text Label

• [ ] [39] I think the 'Auto' text sizing will work better if it is given as a switch or checkbox. The major issue is the bounding box of text will also be used for aligning purposes. Also if I set the properties of a text, I expect the settings to carry over, if I create another text label, immediately.
• [ ] [40] If I set the font size with the help of 'Auto', there is no way to see how much is the currently applied value. I guess making the 'Auto' a switch will solve this problem too.

Shortcuts

• [ ] [41] Shortcut key for 'Redo', even during the Windows 98 era, was 'Ctrl + Y'. But designers found it difficult to react both 'Ctrl' and "Y", with the same hand. So a generally used 'Redo' shortcut is 'Ctrl + Shift + Z'. Will be nice to have it. Also, if I try to do large number of undo or redo, it starts to act weirdly. I'm not sure if it is a bug. Need more testing.
• [ ] [42] Short cut keys to change layer order. Right now short cut keys are only present for 'Send Back' and 'Bring to Front'. But moving a layer/object, step by step, means making it just above or below the corresponding adjacent layer/object, is a widely used feature. Commonly used shortcuts are,
  • Bring Forward: Ctrl + ]
  • Send Backward: Ctrl + [

Mouse Related

• [x] #172
• [ ] [44] While prototyping clicking anywhere on an existing connector from an element to a screen should open up the corresponding action related content. Means designer should be able to access edit options of the particular action/transition, by clicking on the arrow. Now it is possible only by clicking the starting element.
• [ ] [45] Tool tip for align items menu. Right now there is no explanation on what are the actions available.

Design Token Related

• [ ] [46] I guess the 'Design Token' is equivalent to creating and saving a particular style, so that it can be used in multiple objects. But when I click on the settings icon corresponding to a 'Shadow Style' token, I can't see or edit the corresponding style.
• [ ] [47] Frequently one may want to know what is the particulars of an applied style/token. So clicking on the name of the style, when an object is already selected, should either show the applied properties, in a non-editable way, or show the properties with an option to update and with confirmation. Centralised style and asset management is key to any design system.

Interface Related

• [x] [48] Transparentcy adjustment using a slider is better. Usually it need to be fine tuned.
• [x] [49] In 'Widget' dialogue box, right side bar, while adjusting 'W' or 'H', an option to enable or disable scaling keeping the aspect ratio will be useful. Example: I have a 73 X 73 square, But I want it to resize it precisely to 24 X 24. Doing this with mouse is pretty difficult. So most time designers try to scale it by adjusting the 'W' and 'H'.
• [ ] [50] 'Color' option in right sidebar is confusing. If it always colors the font, then 'Font Color' can be given. I guess this comes from the CSS 'color:' option.
• [ ] [51] Visually similar colours, especially greys, can be achieved either through adjusting the hex values, or by adjusting the transparency. An indication that transparency is lower, in the colour thumbnail in the right side bar will be nice.
• [ ] [52] An option to to disable the "Model Updated" or similar toasts at the bottom left corner.
• [ ] [53] Zoom is limited to 300%. While designing mobile interface, may need higher zoom.

[adithyaappu]

Just want to add that I can add GIFs and detailed explanation of each issue, if needed. So if we can triag these issues, we can start setting up individual issues for it.

[KlausSchaefers]

Hi, this is awesome! Thanks a lot! I will start working on the list from next week on! If I have questions, I will contact you!

[KlausSchaefers]

Some font sizes mess up with vertical alignment of text inside a widget. To reproduce: Add an iOS toggle, W=24, H=24, Font Size=14. Now the text slightly below the center.

@adithyaappu: Like this?

[adithyaappu]

More like this. You can see the 'H' is not centre aligned. Most probably a preview related issue.

[adithyaappu]

@KlausSchaefers can you implement [43] When nothing is selected, clicking and draging on an object should drag the object. Now when I try to drag when nothing is selected, the object get selected, but won't get dragged.

This is bugging the hell out of me. Since this is the default behaviour even in operating systems, I repeat this every time. Which causes a lot of frustration. :|

[KlausSchaefers]

You can enable the desired behaviour in the settings. It was for a long time default. I can change this back.

[adithyaappu]

I'm so sorry. Didn't notice this. I can't find time to work on documentation. As of now, the plan is to start in November first week. First step is to correct typos and common errors, then work on a revision.

Again sorry for not paying enough attention.