design: icon-picker-sezioni wireframes (3 frames)
- Frame 1: Full grid view with 8 color swatches and scrollable icon grid - Frame 2: Search filtered state (searching "book") - Frame 3: Empty state (no matching icons) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
382
design/icon-picker-sezioni.pen
Normal file
382
design/icon-picker-sezioni.pen
Normal file
@@ -0,0 +1,382 @@
|
||||
{
|
||||
"version": "2.8",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips01",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Icon Picker — Full Grid (280+ icons)",
|
||||
"theme": { "Mode": "Light" },
|
||||
"clip": true,
|
||||
"width": 320,
|
||||
"height": 480,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"padding": [12, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips02",
|
||||
"content": "COLOR",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips03",
|
||||
"name": "colorRow",
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "ellipse", "id": "ips03a", "fill": "#E53E3E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03b", "fill": "#D9730D", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03c", "fill": "#D69E2E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03d", "fill": "#38A169", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03e", "fill": "#155DFF", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03f", "fill": "#805AD5", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03g", "fill": "#319795", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips03h", "fill": "#D53F8C", "width": 24, "height": 24 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips04",
|
||||
"content": "ICON",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips05",
|
||||
"name": "searchField",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"fill": "$--background",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
|
||||
"cornerRadius": 4,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 8],
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips05a",
|
||||
"content": "🔍",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips05b",
|
||||
"content": "Search icons…",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips06",
|
||||
"name": "iconGrid",
|
||||
"width": "fill_container",
|
||||
"height": 300,
|
||||
"layout": "horizontal",
|
||||
"wrap": true,
|
||||
"gap": 4,
|
||||
"overflow": "scroll",
|
||||
"children": [
|
||||
{ "type": "frame", "id": "ig01", "width": 30, "height": 30, "cornerRadius": 4, "fill": "$--muted", "children": [{ "type": "text", "id": "igl01", "content": "📄", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig02", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl02", "content": "🔧", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig03", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl03", "content": "⚗️", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig04", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl04", "content": "🎯", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig05", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl05", "content": "🏠", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig06", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl06", "content": "⭐", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig07", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl07", "content": "📚", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "ig08", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "igl08", "content": "✈️", "fontSize": 14 }] },
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ig09",
|
||||
"content": "… 280+ icons in scrollable grid",
|
||||
"fontSize": 10,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": "fill_container",
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips07",
|
||||
"name": "doneRow",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "flex-end",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips07a",
|
||||
"content": "Done",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips10",
|
||||
"x": 360,
|
||||
"y": 0,
|
||||
"name": "Icon Picker — Search 'book' filtered",
|
||||
"theme": { "Mode": "Light" },
|
||||
"clip": true,
|
||||
"width": 320,
|
||||
"height": 340,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"padding": [12, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips11",
|
||||
"content": "COLOR",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips12",
|
||||
"name": "colorRow",
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "ellipse", "id": "ips12a", "fill": "#E53E3E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12b", "fill": "#D9730D", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12c", "fill": "#D69E2E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12d", "fill": "#38A169", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12e", "fill": "#155DFF", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12f", "fill": "#805AD5", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12g", "fill": "#319795", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips12h", "fill": "#D53F8C", "width": 24, "height": 24 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips13",
|
||||
"content": "ICON",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips14",
|
||||
"name": "searchField",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"fill": "$--background",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "#155DFF" },
|
||||
"cornerRadius": 4,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 8],
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips14a",
|
||||
"content": "🔍",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips14b",
|
||||
"content": "book",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips15",
|
||||
"name": "filteredIconGrid",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"wrap": true,
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{ "type": "frame", "id": "fg01", "width": 30, "height": 30, "cornerRadius": 4, "fill": "rgba(21,93,255,0.1)", "children": [{ "type": "text", "id": "fgl01", "content": "📖", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "fg02", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "fgl02", "content": "📕", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "fg03", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "fgl03", "content": "🔖", "fontSize": 14 }] },
|
||||
{ "type": "frame", "id": "fg04", "width": 30, "height": 30, "cornerRadius": 4, "fill": "transparent", "children": [{ "type": "text", "id": "fgl04", "content": "📚", "fontSize": 14 }] },
|
||||
{
|
||||
"type": "text",
|
||||
"id": "fg05",
|
||||
"content": "book, book-bookmark, book-open, bookmark, books",
|
||||
"fontSize": 10,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": "fill_container"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips16",
|
||||
"name": "doneRow",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "flex-end",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips16a",
|
||||
"content": "Done",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips20",
|
||||
"x": 720,
|
||||
"y": 0,
|
||||
"name": "Icon Picker — Empty State (no results)",
|
||||
"theme": { "Mode": "Light" },
|
||||
"clip": true,
|
||||
"width": 320,
|
||||
"height": 300,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"padding": [12, 12],
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips21",
|
||||
"content": "COLOR",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips22",
|
||||
"name": "colorRow",
|
||||
"layout": "horizontal",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{ "type": "ellipse", "id": "ips22a", "fill": "#E53E3E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22b", "fill": "#D9730D", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22c", "fill": "#D69E2E", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22d", "fill": "#38A169", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22e", "fill": "#155DFF", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22f", "fill": "#805AD5", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22g", "fill": "#319795", "width": 24, "height": 24 },
|
||||
{ "type": "ellipse", "id": "ips22h", "fill": "#D53F8C", "width": 24, "height": 24 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips23",
|
||||
"content": "ICON",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 400,
|
||||
"fontFamily": "IBM Plex Mono",
|
||||
"textTransform": "uppercase",
|
||||
"fill": "$--muted-foreground"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips24",
|
||||
"name": "searchField",
|
||||
"width": "fill_container",
|
||||
"height": 28,
|
||||
"fill": "$--background",
|
||||
"stroke": { "align": "inside", "thickness": 1, "fill": "#155DFF" },
|
||||
"cornerRadius": 4,
|
||||
"layout": "horizontal",
|
||||
"alignItems": "center",
|
||||
"padding": [0, 8],
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips24a",
|
||||
"content": "🔍",
|
||||
"fontSize": 12
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips24b",
|
||||
"content": "zzzznotfound",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips25",
|
||||
"name": "emptyState",
|
||||
"width": "fill_container",
|
||||
"height": 80,
|
||||
"layout": "vertical",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips25a",
|
||||
"content": "No icons found",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground",
|
||||
"textAlign": "center"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ips26",
|
||||
"name": "doneRow",
|
||||
"width": "fill_container",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "flex-end",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ips26a",
|
||||
"content": "Done",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--muted-foreground"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
Reference in New Issue
Block a user