Akira: Mockups Concept and Behavior of left panel Creating Symbols and using Symbols

[VikSin]

Symbols/Components

Symbols UI elements that allows you to reuse elements easily across your document’s Artboards and Pages, or even multiple documents. Sketch and Xd uses the term Symbol where as Figma use the term components.

Creating and using symbols in Sketchapp

Creating Symbols in Adobe Xd

Both Sketch and Xd can create assets symbol, colors symbols, text, and all.
Figma have separate Create Component and Create Style.

Creating Component in Figma

Creating styles in figma

Left Panel When nothing is selected in canvas neither artboard nor objects

This optios will show

Mockups design Creating a symbol

Using a symbol

Inserting Symbol from insert button it involved more clicks thats why separate library button to access for redusing click step

Another way of using and modfying symbol and their properties

In Xd and Figma every time we have to switch from layer panel to asset panel and for accessing symbols . Sketch do better by having in menu.

[Alecaddd]

I love this! Thank you so much for kicking off the conversation.

Name
I personally prefer the term "Component" instead of "Symbol", as it makes more sens in terms of what it is and what it can encapsulate in it. A "Reusable Component" is also something commonly known in web development, which Akira is very much built for that.

Create a Component
The dedicated button in the Headerbar is :+1:
Would you think it would be better to move it to the right of the "Insert button"? I think it should be part of the "Creation" group, so it might work better there.

I'm not sure about the dialog as I think the program should be smart enough to identify all the custom attributes getting stored in the component.
I can see the usefulness of allowing users to select which attributes should be part of a component, in order to create font styles alongside shape styles, so maybe we could sort of offer the dialog with a preselected list of options based on what the created component has.

Components side panel
I would put it on the right panel, below the layers panel, and make it collapsible for when users don't need it.
I like the concept anyway, and the various usability options.
How do you envision a symbol getting edited? Opening a separated view, an overlay artboard, or something else?

Side note
What is that beautiful Layout Grid Panel I see in the last mockup? That's really interesting?
Would you mind opening a dedicated issue to discuss that?