Add a panel for adding different art-board sizes like for mobile, web or tablet

[ghost]

Expected Behavior

Add an option that will allow the user to add real device sizes like in figma

Screenshots of the Request

[Alecaddd]

@LucileDT is right, this is not an issue but a discussion.
I'll convert it.

[LucileDT]

This is a great Idea, I always struggle to find device sizes when I work on canvases, having a list containing them would be great!

[AshishS-1123]

I have started doing some work on this, and this is what I have so far.

When the user presses A to add an art-board (or through the insert menu), a popover will be displayed.
This popover will contain some sections like Desktop, Ipad and Mobile representing categories for various screen sizes. Each of these categories will contain buttons for creating Art-boards of different sizes.
This is what the popover will look like.

(Don't mind the huge icons. Though I could use some design related feedback)
A button for custom size will also be present and the items in this list can be deleted or added, though I haven't implemented it yet.
I have taken the most common screen sizes from here.

When the user selects a particular size, the popover will disappear and user will have to click the cursor somewhere on the canvas to indicate where the top left corner of the art-board should be.
After clicking, the art-board will be drawn.

In case the user selects 'Custom Size', the user can create art-board of custom size by clicking and dragging on the canvas just like other canvas items.

[Suzie97]

Displaying the popup when A is pressed obstructs the main canvas. So if the user wants to create a custom artboard, he would have to press A, close the artboard popup and then draw his artboard. Overtime this will lead to frustrations. So I think doing it like Sketch and Figma, i.e. displaying the artboard templates on the sidebar when A is presses is a nice idea. This approach works and people are used to it.

And also, in the implementation of artboard templates described above, the popup actually pops up from the headerbar, which doesn't that make much sense to me.

The popup makes the icons the main focus, the problem with that is that, there is not much visual identity and it'll be hard find icons that describe each device very well. So ultimately, the user will have to depend on text to identify what device that is and what is the size. So in my opinion, the purpose of the icon fails. An icon is supposed to describe something without text.

[ghost]

I agree

[Alecaddd]

I agree with some of the feedback regarding "forcing" the popup with the A shortcut.

I'd recommend this approach.

• The A shortcut shouldn't be touched as that is a quick action to draw a custom Artboard and guarantee and uninterrupted interaction with the Canvas.
• As suggested by @Suzie97, an option Panel should appear with the user enters the InsertMode for Artboard (this is an actual state in the code so we can easily listen to it).
• If the user clicks on one of the suggested predefined (or custom defined) Artboards from the list, the code should be smart to identify the last inserted Artboard and add the new one on the closest adjacent available space in the Canvas, and the canvas should also shift and zoom on the newly added Artboard.

What do you all think?
Thank you so much for this proposal.

[AshishS-1123]

From what I gathered from the discussion here, and from #550, this is the roadmap I need to follow for this feature-

1. Replace the Artboard option in the Insert menu with a drop-down menu with a list of screen size categories.
2. When the user clicks on a category, show him a set of predefined sizes from that category. Each item in a category should have a device name and its size. No icons.
3. Add a mechanism for adding custom sizes. (Should the user defined sizes be in their own category or can the user add custom sizes to any other categories?)
4. Automatically place the Artboard and shift the canvas focus there.

Sound okay?

[Suzie97]

From what I gathered from the discussion here, and from #550, this is the roadmap I need to follow for this feature-

1. Replace the Artboard option in the Insert menu with a drop-down menu with a list of screen size categories.

2. When the user clicks on a category, show him a set of predefined sizes from that category. Each item in a category should have a device name and its size. No icons.

3. Add a mechanism for adding custom sizes. (Should the user defined sizes be in their own category or can the user add custom sizes to any other categories?)

4. Automatically place the Artboard and shift the canvas focus there.

Sound okay?

Umm, what I understand from your comment is that you want to replace the artboard option with a drop down menu. I don't think that is the best option. In my original comment, I was talking about the artboard options to appear in the properties panel.

When the user chooses the artboard option from the insert menu, the properties sidebar will be filled with the artboard templates, and when a user chooses the template, as @Alecaddd said, the artboard should be created adjacent to the last inserted artboard and zoom in on that.

Check out this screenshot of sketch, when the artboard option is selected, the properties sidebar (which is in the right in sketch, and left in Akira by default) should display the artboard templates.

Using a drop down instead of directly using the artboard option will just slow down the process of creating a custom sized artboard.