{"id":69,"date":"2026-08-27T19:41:20","date_gmt":"2026-08-27T19:41:20","guid":{"rendered":"http:\/\/ucdreams-tools.local\/artboard\/"},"modified":"2026-10-08T22:57:36","modified_gmt":"2026-10-08T22:57:36","slug":"artboard","status":"publish","type":"page","link":"https:\/\/ucdreams.com\/tools\/artboard\/","title":{"rendered":"Free Artboard Online Studio &#038; Graphic Design Canvas"},"content":{"rendered":"<section class=\"wp-block-group tools-hero tool-hero is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:70px;padding-bottom:40px\">\n<p class=\"has-text-align-center section-kicker wp-block-paragraph\">Vector Artboard Online<\/p>\n<h1 class=\"wp-block-heading has-text-align-center hero-title\">Free Artboard Online Studio &amp; Graphic Design Canvas<\/h1>\n<p class=\"has-text-align-center hero-descr wp-block-paragraph\">Professional free artboard online graphic design studio. Design vector assets, UI mockups, social banners, and multi-page layouts directly in your browser with nested frames, pen tool, and instant export.<\/p>\n<\/section>\n<section class=\"wp-block-group tool-area is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-bottom:60px\">\n<div class=\"ab-app ab-is-home\" id=\"ab-app\">\n<div class=\"figma-continuous-studio\"><!-- Top App Chrome & Tab Bar --><\/p>\n<div class=\"figma-chrome-topbar\">\n<div class=\"figma-brand-badge\"><span class=\"figma-logo-icon\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/span><span class=\"figma-logo-text\">Artboard<\/span><\/div>\n<p><!-- Open File Tabs Bar --><\/p>\n<div class=\"figma-file-tabs\" id=\"figma-file-tabs\"><button type=\"button\" class=\"figma-file-tab active\" data-tab-type=\"home\" id=\"tab-btn-home\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg><span class=\"figma-tab-title\">Home<\/span><\/button><button type=\"button\" class=\"figma-add-tab-btn\" id=\"figma-add-tab\" title=\"Create new design file\"><svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/button><\/div>\n<p><!-- Top Right Studio Actions --><\/p>\n<div class=\"figma-chrome-right\">\n<div class=\"ab-tgroup view figma-editor-only\"><button type=\"button\" class=\"ab-btn icon\" id=\"ab-zoom-out\" title=\"Zoom out (\u2212)\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/button><button type=\"button\" class=\"ab-btn text\" id=\"ab-zoom-fit\" title=\"Fit to screen (Shift+1)\">100%<\/button><button type=\"button\" class=\"ab-btn icon\" id=\"ab-zoom-in\" title=\"Zoom in (\uff0b)\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/button><\/div>\n<div class=\"ab-tgroup export figma-editor-only\"><button type=\"button\" class=\"ab-btn secondary\" id=\"ab-save-file\" title=\"Save .artboard project file\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z\"\/><polyline points=\"17 21 17 13 7 13 7 21\"\/><polyline points=\"7 3 7 8 15 8\"\/><\/svg><span>Save<\/span><\/button><\/div>\n<p><button type=\"button\" class=\"figma-top-btn\" id=\"ab-fullscreen\" title=\"Toggle Fullscreen (F11)\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"15 3 21 3 21 9\"\/><polyline points=\"9 21 3 21 3 15\"\/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"\/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"\/><\/svg><\/button><\/div>\n<\/div>\n<p><!-- Main Studio Container --><\/p>\n<div class=\"figma-continuous-body\"><!-- VIEW 1: Light-Mode Home \/ Projects Dashboard (shows when Home tab active) --><\/p>\n<div class=\"figma-home-view\" id=\"ab-intro\">\n<div class=\"figma-home-header\">\n<div class=\"figma-home-title-group\">\n<h2>Your Design Files<\/h2>\n<p class=\"figma-home-sub\">Manage saved projects, launch presets, or import .artboard files <\/div>\n<div class=\"figma-home-actions\">\n<div class=\"figma-search-wrap\"><span class=\"figma-search-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg><\/span><input type=\"search\" id=\"figma-search-input\" placeholder=\"Search designs...\" class=\"figma-search-input\"><\/div>\n<p><button type=\"button\" class=\"figma-btn-primary\" id=\"ab-new\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" style=\"vertical-align:middle;margin-right:4px;\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><span>New Design<\/span><\/button><button type=\"button\" class=\"figma-btn-secondary\" id=\"ab-resume\" hidden><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"vertical-align:middle;margin-right:4px;\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"\/><\/svg><span>Resume Last<\/span><\/button><label class=\"figma-btn-secondary\" id=\"ab-open-label\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-right:4px;\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/><\/svg><span>Import File<\/span><input type=\"file\" id=\"ab-open-file\" accept=\".artboard,.ucdimg,.json\" hidden><\/label><\/div>\n<\/div>\n<p><!-- Quick Presets Row --><\/p>\n<div class=\"figma-preset-row\"><span class=\"figma-preset-label\">Quick Start:<\/span><button type=\"button\" class=\"figma-preset-chip\" data-w=\"1080\" data-h=\"1080\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"vertical-align:middle;margin-right:4px;\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/><\/svg> Instagram (1080\u00d71080)<\/button><button type=\"button\" class=\"figma-preset-chip\" data-w=\"1080\" data-h=\"1920\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"vertical-align:middle;margin-right:4px;\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"3\"\/><polygon points=\"10 10 15 13 10 16\" fill=\"currentColor\"\/><\/svg> Story (1080\u00d71920)<\/button><button type=\"button\" class=\"figma-preset-chip\" data-w=\"1280\" data-h=\"720\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"vertical-align:middle;margin-right:4px;\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33z\"\/><polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" fill=\"currentColor\"\/><\/svg> YouTube (1280\u00d7720)<\/button><button type=\"button\" class=\"figma-preset-chip\" data-w=\"1440\" data-h=\"900\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"vertical-align:middle;margin-right:4px;\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg> Desktop (1440\u00d7900)<\/button><\/div>\n<p><!-- Saved Projects Grid Container --><\/p>\n<div class=\"ab-recent-projects\" id=\"ab-recent-projects\"><!-- Dynamically rendered light-mode project cards grid --><\/div>\n<\/div>\n<p><!-- VIEW 2: Direct Editor Studio (shows when Design File tab active) --><\/p>\n<div class=\"ab-editor\" id=\"ab-editor\" hidden><!-- Mobile Dedicated Top Subbar (Layers, History\/Zoom, Save, Design) --><\/p>\n<div class=\"ab-mobile-subbar\" id=\"ab-mobile-subbar\"><button type=\"button\" class=\"ab-mobile-subbar-btn\" id=\"ab-toggle-left-drawer\" title=\"Toggle Pages &amp; Layers\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg><span>Layers<\/span><\/button><\/p>\n<div class=\"ab-mobile-subbar-center\"><button type=\"button\" class=\"ab-mobile-subbar-icon-btn\" id=\"ab-mobile-undo\" title=\"Undo (Ctrl+Z)\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"1 4 1 10 7 10\"\/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"\/><\/svg><\/button><button type=\"button\" class=\"ab-mobile-subbar-icon-btn\" id=\"ab-mobile-redo\" title=\"Redo (Ctrl+Y)\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><path d=\"M20.49 15a9 9 0 1 1-2.13-9.36L23 10\"\/><\/svg><\/button><button type=\"button\" class=\"ab-mobile-subbar-icon-btn\" id=\"ab-mobile-zoom\" title=\"Reset Zoom\">100%<\/button><\/div>\n<div class=\"ab-mobile-subbar-right\"><button type=\"button\" class=\"ab-mobile-subbar-btn\" id=\"ab-mobile-save\" title=\"Save .artboard project\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z\"\/><polyline points=\"17 21 17 13 7 13 7 21\"\/><polyline points=\"7 3 7 8 15 8\"\/><\/svg><span>Save<\/span><\/button><button type=\"button\" class=\"ab-mobile-subbar-btn\" id=\"ab-toggle-right-drawer\" title=\"Toggle Design &amp; Export\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"4\" y1=\"21\" x2=\"4\" y2=\"14\"\/><line x1=\"4\" y1=\"10\" x2=\"4\" y2=\"3\"\/><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"3\"\/><line x1=\"20\" y1=\"21\" x2=\"20\" y2=\"16\"\/><line x1=\"20\" y1=\"12\" x2=\"20\" y2=\"3\"\/><line x1=\"1\" y1=\"14\" x2=\"7\" y2=\"14\"\/><line x1=\"9\" y1=\"8\" x2=\"15\" y2=\"8\"\/><line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"\/><\/svg><span>Design<\/span><\/button><\/div>\n<\/div>\n<p><!-- Main Canvas Workspace: Left (Pages & Layers) | Canvas with Floating Bottom Island | Right (Properties) --><\/p>\n<div class=\"ab-main\"><!-- Mobile Backdrop Overlay --><\/p>\n<div class=\"ab-drawer-backdrop\" id=\"ab-drawer-backdrop\"><\/div>\n<p><!-- Left Sidebar: Pages section above Layers (Figma Style) --><\/p>\n<div class=\"ab-layers\" id=\"ab-layers\"><!-- Pages Section Above Layers --><\/p>\n<div class=\"ab-pages-section\" id=\"ab-pages-section\">\n<div class=\"ab-panel-head\"><span>Pages<\/span><\/p>\n<div style=\"display:flex;align-items:center;gap:4px;\"><button type=\"button\" class=\"ab-btn-plus\" id=\"ab-add-page\" title=\"Add new page\"><svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/button><button type=\"button\" class=\"ab-drawer-close-btn\" id=\"ab-close-left-drawer\" title=\"Close\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button><\/div>\n<\/div>\n<div class=\"ab-pages-list\" id=\"ab-pages-list\"><!-- Dynamically rendered page rows --><\/div>\n<\/div>\n<p><!-- Layers Section Below Pages --><\/p>\n<div class=\"ab-layers-section\">\n<div class=\"ab-panel-head\"><span>Layers<\/span><\/div>\n<div class=\"ab-layers-list\" id=\"ab-layers-list\"><\/div>\n<\/div>\n<\/div>\n<p><!-- Center: Canvas Viewport with Floating Bottom Tool Island --><\/p>\n<div class=\"ab-canvas-wrap\" id=\"ab-canvas-wrap\"><canvas id=\"ab-canvas\"><\/canvas><!-- Figma-Style Floating Bottom Dock Island --><\/p>\n<div class=\"ab-bottom-dock\" id=\"ab-bottom-dock\"><!-- 1. Selection \/ Move Tool (V) --><button type=\"button\" class=\"ab-dock-btn ab-tool active\" data-tool=\"select\" id=\"ab-tool-select\" title=\"Move \/ Select (V)\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\"><path d=\"M3 3l7 18 3-7 7-3L3 3z\"\/><\/svg><\/button><!-- 2. Frame Tool (F \/ A) with Presets Dropdown --><\/p>\n<div class=\"ab-dock-dropdown-wrap\" id=\"ab-frame-tool-wrap\"><button type=\"button\" class=\"ab-dock-btn ab-tool\" data-tool=\"frame\" id=\"ab-tool-frame\" title=\"Frame (F or A)\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 3v18M19 3v18M3 5h18M3 19h18\"\/><\/svg><\/button><button type=\"button\" class=\"ab-dock-caret-btn\" id=\"ab-frame-preset-btn\" title=\"Frame Presets (Phone, Tablet, Desktop, Social)\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/button><\/p>\n<div class=\"ab-dropdown-popover ab-frame-popover ab-pop-upwards\" id=\"ab-frame-preset-popover\" hidden>\n<div class=\"ab-pop-section-title\">Popular Devices &amp; Social<\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1440\" data-h=\"900\" data-name=\"Desktop (1440\u00d7900)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/><\/svg><\/span><span class=\"ab-sh-name\">Desktop<\/span><span class=\"ab-sh-key\">1440\u00d7900<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1280\" data-h=\"800\" data-name=\"MacBook (1280\u00d7800)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"1\"\/><path d=\"M2 19h20\"\/><\/svg><\/span><span class=\"ab-sh-name\">MacBook<\/span><span class=\"ab-sh-key\">1280\u00d7800<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"393\" data-h=\"852\" data-name=\"iPhone 15 \/ 16 (393\u00d7852)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"6\" y=\"2\" width=\"12\" height=\"20\" rx=\"3\"\/><circle cx=\"12\" cy=\"18\" r=\"1\"\/><\/svg><\/span><span class=\"ab-sh-name\">iPhone<\/span><span class=\"ab-sh-key\">393\u00d7852<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"820\" data-h=\"1180\" data-name=\"iPad Air (820\u00d71180)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/><circle cx=\"12\" cy=\"18\" r=\"0.8\"\/><\/svg><\/span><span class=\"ab-sh-name\">iPad<\/span><span class=\"ab-sh-key\">820\u00d71180<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1080\" data-h=\"1080\" data-name=\"Instagram Post (1080\u00d71080)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/><\/svg><\/span><span class=\"ab-sh-name\">Instagram<\/span><span class=\"ab-sh-key\">1080\u00d71080<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1080\" data-h=\"1920\" data-name=\"Story \/ Reel (1080\u00d71920)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"3\"\/><polygon points=\"10 10 15 13 10 16\" fill=\"currentColor\"\/><\/svg><\/span><span class=\"ab-sh-name\">Story<\/span><span class=\"ab-sh-key\">1080\u00d71920<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1280\" data-h=\"720\" data-name=\"YouTube (1280\u00d7720)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33z\"\/><polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" fill=\"currentColor\"\/><\/svg><\/span><span class=\"ab-sh-name\">YouTube<\/span><span class=\"ab-sh-key\">1280\u00d7720<\/span><\/div>\n<div class=\"ab-frame-preset-item\" data-w=\"1200\" data-h=\"675\" data-name=\"Twitter \/ X (1200\u00d7675)\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"currentColor\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg><\/span><span class=\"ab-sh-name\">Twitter \/ X<\/span><span class=\"ab-sh-key\">1200\u00d7675<\/span><\/div>\n<\/div>\n<\/div>\n<p><!-- 3. Shape Split-Button & Popover --><\/p>\n<div class=\"ab-dock-dropdown-wrap\" id=\"ab-shape-tool-wrap\"><button type=\"button\" class=\"ab-dock-btn ab-tool ab-shape-btn\" id=\"ab-shape-btn\" data-tool=\"rect\" title=\"Rectangle (R)\"><span class=\"ico\" id=\"ab-shape-active-icon\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"\/><\/svg><\/span><\/button><button type=\"button\" class=\"ab-dock-caret-btn\" id=\"ab-shape-caret-btn\" title=\"Shapes (R, O, A, L)\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/button><\/p>\n<div class=\"ab-dropdown-popover ab-shape-popover ab-pop-upwards\" id=\"ab-shape-popover\" hidden>\n<div class=\"ab-shape-opt active\" data-shape=\"rect\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"\/><\/svg><\/span><span class=\"ab-sh-name\">Rectangle<\/span><span class=\"ab-sh-key\">R<\/span><\/div>\n<div class=\"ab-shape-opt\" data-shape=\"ellipse\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg><\/span><span class=\"ab-sh-name\">Circle \/ Ellipse<\/span><span class=\"ab-sh-key\">O<\/span><\/div>\n<div class=\"ab-shape-opt\" data-shape=\"arrow\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/span><span class=\"ab-sh-name\">Arrow<\/span><span class=\"ab-sh-key\">\u21e7L<\/span><\/div>\n<div class=\"ab-shape-opt\" data-shape=\"triangle\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 3l10 18H2z\"\/><\/svg><\/span><span class=\"ab-sh-name\">Triangle<\/span><span class=\"ab-sh-key\">\u21e7T<\/span><\/div>\n<div class=\"ab-shape-opt\" data-shape=\"star\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg><\/span><span class=\"ab-sh-name\">Star<\/span><span class=\"ab-sh-key\">S<\/span><\/div>\n<div class=\"ab-shape-opt\" data-shape=\"line\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"4\" y1=\"20\" x2=\"20\" y2=\"4\"\/><\/svg><\/span><span class=\"ab-sh-name\">Line<\/span><span class=\"ab-sh-key\">L<\/span><\/div>\n<\/div>\n<\/div>\n<p><!-- 4. Vector Tools (Pen & Pencil) Split-Button & Popover --><\/p>\n<div class=\"ab-dock-dropdown-wrap\" id=\"ab-pen-tool-wrap\"><button type=\"button\" class=\"ab-dock-btn ab-tool\" data-tool=\"pen\" id=\"ab-tool-pen\" title=\"Pen Tool (P)\"><span class=\"ico\" id=\"ab-pen-active-svg\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg><\/span><\/button><button type=\"button\" class=\"ab-dock-caret-btn\" id=\"ab-pen-caret-btn\" title=\"Vector tools (P, Shift+P)\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg><\/button><\/p>\n<div class=\"ab-dropdown-popover ab-pen-popover ab-pop-upwards\" id=\"ab-pen-popover\" hidden>\n<div class=\"ab-pop-section-title\">Vector Tool<\/div>\n<div class=\"ab-pen-opt active\" data-tool-opt=\"pen\" id=\"ab-opt-pen\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg><\/span><span class=\"ab-sh-name\">Pen<\/span><span class=\"ab-sh-key\">P<\/span><\/div>\n<div class=\"ab-pen-opt\" data-tool-opt=\"pencil\" id=\"ab-opt-pencil\"><span class=\"ab-sh-ico\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"\/><path d=\"M15 5l4 4\"\/><\/svg><\/span><span class=\"ab-sh-name\">Pencil (Freehand)<\/span><span class=\"ab-sh-key\">\u21e7P<\/span><\/div>\n<div class=\"ab-pop-divider\"><\/div>\n<div class=\"ab-pop-section-title\">Stroke Thickness<\/div>\n<div class=\"ab-pen-thickness-row\" id=\"ab-pen-thickness-row\"><button type=\"button\" class=\"ab-pen-thick-btn\" data-thick=\"1\">1px<\/button><button type=\"button\" class=\"ab-pen-thick-btn active\" data-thick=\"2\">2px<\/button><button type=\"button\" class=\"ab-pen-thick-btn\" data-thick=\"4\">4px<\/button><button type=\"button\" class=\"ab-pen-thick-btn\" data-thick=\"8\">8px<\/button><button type=\"button\" class=\"ab-pen-thick-btn\" data-thick=\"16\">16px<\/button><\/p>\n<div class=\"ab-pen-thick-custom-wrap\"><input type=\"number\" id=\"ab-pen-thick-input\" class=\"ab-pen-thick-input\" min=\"1\" max=\"100\" value=\"2\" title=\"Custom thickness\"><\/div>\n<\/div>\n<div class=\"ab-pop-divider\"><\/div>\n<div class=\"ab-pop-section-title\">Stroke Color<\/div>\n<div class=\"ab-pen-colors-row\" id=\"ab-pen-colors-row\"><button type=\"button\" class=\"ab-pen-color-dot active\" data-color=\"#111827\" style=\"background:#111827;\" title=\"Black\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#ffffff\" style=\"background:#ffffff;border:1px solid #d1d5db;\" title=\"White\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#0d99ff\" style=\"background:#0d99ff;\" title=\"Figma Blue\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#ef4444\" style=\"background:#ef4444;\" title=\"Red\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#10b981\" style=\"background:#10b981;\" title=\"Green\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#8b5cf6\" style=\"background:#8b5cf6;\" title=\"Purple\"><\/button><button type=\"button\" class=\"ab-pen-color-dot\" data-color=\"#f59e0b\" style=\"background:#f59e0b;\" title=\"Amber\"><\/button><label class=\"ab-pen-color-picker-label\" title=\"Custom color\"><input type=\"color\" id=\"ab-pen-custom-color\" value=\"#111827\" class=\"ab-pen-color-picker-input\"><span class=\"ab-pen-color-picker-icon\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a10 10 0 0 0 0 20v-2a8 8 0 0 1 0-16V2z\" fill=\"currentColor\"\/><\/svg><\/span><\/label><\/div>\n<\/div>\n<\/div>\n<p><!-- 5. Text Tool (T) --><button type=\"button\" class=\"ab-dock-btn ab-tool\" data-tool=\"text\" id=\"ab-tool-text\" title=\"Text (T)\"><span class=\"ico\" style=\"font-weight:700;font-size:15px;\">T<\/span><\/button><!-- 6. Image \/ Vector Import (I) --><button type=\"button\" class=\"ab-dock-btn ab-tool\" data-tool=\"image\" id=\"ab-tool-image\" title=\"Image \/ Vector (I)\"><svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><path d=\"M21 15l-5-5L5 21\"\/><\/svg><\/button><input type=\"file\" id=\"ab-image-input\" accept=\"image\/*,.svg\" hidden><!-- Divider --><\/p>\n<div class=\"ab-dock-divider\"><\/div>\n<p><!-- 8. Hand \/ Pan Tool (H \/ Space) --><button type=\"button\" class=\"ab-dock-btn ab-tool\" data-tool=\"hand\" id=\"ab-tool-hand\" title=\"Hand \/ Pan (H or hold Space)\"><svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 11V6a2 2 0 0 0-4 0v4\"\/><path d=\"M14 10V4a2 2 0 0 0-4 0v6\"\/><path d=\"M10 10.5V6a2 2 0 0 0-4 0v8\"\/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.83l1.76 1.77V14\"\/><\/svg><\/button><\/div>\n<\/div>\n<p><!-- Right: Properties Panel --><\/p>\n<div class=\"ab-props\" id=\"ab-props\">\n<div class=\"ab-panel-head\">\n<h3>Design<\/h3>\n<p><button type=\"button\" class=\"ab-drawer-close-btn\" id=\"ab-close-right-drawer\" title=\"Close Design Panel\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button><\/div>\n<div class=\"ab-props-body\" id=\"ab-props-body\"> Select an object or frame to inspect &amp; edit properties <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- Hidden Image Replacement File Input --><!-- Hidden Image Replacement File Input --><input type=\"file\" id=\"ab-replace-img-input\" accept=\"image\/*\" hidden><!-- Figma-Style Floating Image Studio Popover --><\/p>\n<div class=\"ab-figma-img-popover\" id=\"ab-figma-img-popover\" hidden>\n<div class=\"ab-fip-header\" id=\"ab-fip-header\">\n<div class=\"ab-fip-tabs\"><button type=\"button\" class=\"ab-fip-tab active\" data-tab=\"custom\">Custom<\/button><button type=\"button\" class=\"ab-fip-tab\" data-tab=\"libraries\">Libraries<\/button><\/div>\n<div class=\"ab-fip-actions\"><button type=\"button\" class=\"ab-fip-btn icon\" id=\"ab-fip-add\" title=\"Add style\">+<\/button><button type=\"button\" class=\"ab-fip-btn icon\" id=\"ab-fip-close\" title=\"Close (Esc)\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button><\/div>\n<\/div>\n<div class=\"ab-fip-modes-bar\">\n<div class=\"ab-fip-mode-icons\"><button type=\"button\" class=\"ab-fip-mode-btn active\" data-mode=\"fill\" title=\"Fill\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><\/svg><\/button><button type=\"button\" class=\"ab-fip-mode-btn\" data-mode=\"fit\" title=\"Fit\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"19\"\/><line x1=\"16\" y1=\"5\" x2=\"16\" y2=\"19\"\/><\/svg><\/button><button type=\"button\" class=\"ab-fip-mode-btn\" data-mode=\"crop\" title=\"Crop\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 2v14a2 2 0 002 2h14\"\/><path d=\"M18 22V8a2 2 0 00-2-2H2\"\/><\/svg><\/button><button type=\"button\" class=\"ab-fip-mode-btn\" data-mode=\"tile\" title=\"Tile\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg><\/button><\/div>\n<div class=\"ab-fip-opacity-drop\"><button type=\"button\" class=\"ab-fip-btn icon\" title=\"Blend mode &#038; Opacity\"><svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z\"\/><\/svg><\/button><\/div>\n<\/div>\n<p><!-- Mode Select & Rotate Row --><\/p>\n<div class=\"ab-fip-row\"><select class=\"ab-fip-select\" id=\"ab-fip-mode-select\"><option value=\"fill\">Fill<\/option><option value=\"fit\">Fit<\/option><option value=\"crop\">Crop<\/option><option value=\"tile\">Tile<\/option><\/select><button type=\"button\" class=\"ab-fip-icon-btn\" id=\"ab-fip-rotate-cw\" title=\"Rotate 90\u00b0\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><path d=\"M20.49 15a9 9 0 1 1-2.13-9.36L23 10\"\/><\/svg><\/button><\/div>\n<p><!-- Preview Container with Checkered Background --><\/p>\n<div class=\"ab-fip-preview-wrap\"><canvas class=\"ab-fip-preview-canvas\" id=\"ab-fip-preview-canvas\" width=\"220\" height=\"130\"><\/canvas><\/div>\n<p><!-- Figma 7 Adjustments --><\/p>\n<div class=\"ab-fip-adjustments\">\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Exposure<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-exposure\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Contrast<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-contrast\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Saturation<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-saturation\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Temperature<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-temperature\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Tint<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-tint\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Highlights<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-highlights\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<div class=\"ab-fip-adj-row\"><span class=\"ab-fip-adj-name\">Shadows<\/span><\/p>\n<div class=\"ab-fip-slider-track\">\n<div class=\"ab-fip-slider-center-dot\"><\/div>\n<p><input type=\"range\" class=\"ab-fip-slider\" id=\"ab-fip-shadows\" min=\"-100\" max=\"100\" value=\"0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- Figma On-Canvas Interactive Crop Overlay --><\/p>\n<div class=\"ab-canvas-crop-overlay\" id=\"ab-canvas-crop-overlay\" hidden><!-- Dimmed backdrop mask outside crop box --><\/p>\n<div class=\"ab-crop-mask-top\" id=\"ab-crop-mask-top\"><\/div>\n<div class=\"ab-crop-mask-bottom\" id=\"ab-crop-mask-bottom\"><\/div>\n<div class=\"ab-crop-mask-left\" id=\"ab-crop-mask-left\"><\/div>\n<div class=\"ab-crop-mask-right\" id=\"ab-crop-mask-right\"><\/div>\n<p><!-- Active Crop Box --><\/p>\n<div class=\"ab-canvas-crop-box\" id=\"ab-canvas-crop-box\"><!-- Dimension Badge --><\/p>\n<div class=\"ab-crop-dim-badge\" id=\"ab-crop-dim-badge\">2567 \u00d7 1222<\/div>\n<p><!-- 4 Corner L-Brackets (Figma style) --><\/p>\n<div class=\"ab-crop-l-handle corner-tl\" data-handle=\"tl\"><\/div>\n<div class=\"ab-crop-l-handle corner-tr\" data-handle=\"tr\"><\/div>\n<div class=\"ab-crop-l-handle corner-br\" data-handle=\"br\"><\/div>\n<div class=\"ab-crop-l-handle corner-bl\" data-handle=\"bl\"><\/div>\n<p><!-- 4 Edge Midpoint Handles --><\/p>\n<div class=\"ab-crop-mid-handle edge-t\" data-handle=\"t\"><\/div>\n<div class=\"ab-crop-mid-handle edge-r\" data-handle=\"r\"><\/div>\n<div class=\"ab-crop-mid-handle edge-b\" data-handle=\"b\"><\/div>\n<div class=\"ab-crop-mid-handle edge-l\" data-handle=\"l\"><\/div>\n<\/div>\n<\/div>\n<p><!-- Floating Crop Tool Pill at the bottom center --><\/p>\n<div class=\"ab-figma-crop-bar\" id=\"ab-figma-crop-bar\" hidden>\n<div class=\"ab-fcb-pill\"><select class=\"ab-fcb-select\" id=\"ab-fcb-mode-select\"><option value=\"crop\">Crop<\/option><option value=\"fill\">Fill<\/option><option value=\"fit\">Fit<\/option><option value=\"tile\">Tile<\/option><\/select><\/p>\n<div class=\"ab-fcb-divider\"><\/div>\n<div class=\"ab-fcb-slider-wrap\" title=\"Scale image inside crop\"><input type=\"range\" class=\"ab-fcb-zoom-slider\" id=\"ab-fcb-zoom-slider\" min=\"100\" max=\"400\" value=\"100\"><\/div>\n<div class=\"ab-fcb-divider\"><\/div>\n<p><button type=\"button\" class=\"ab-fcb-btn\" id=\"ab-fcb-cancel\">Cancel<\/button><button type=\"button\" class=\"ab-fcb-btn apply\" id=\"ab-fcb-done\" title=\"Apply Crop (Enter)\"><svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/button><\/div>\n<\/div>\n<\/div>\n<\/section>\n<section class=\"wp-block-group seo-content-section is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"seo-header-block\">\n<p class=\"section-kicker\">CANVAS DESIGNER<\/p>\n<h2 class=\"section-heading\">Why Choose UCDreams Artboard?<\/h2>\n<p class=\"seo-section-subtitle\">Design vector graphics, social media posts, and framed artboards with Figma-grade speed<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-features-grid\">\n<div class=\"seo-feature-card\">\n<div class=\"seo-feature-icon\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"#C5453E\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n            <\/div>\n<h3 class=\"seo-feature-title\">Lightning Fast<\/h3>\n<p class=\"seo-feature-desc\">Powered by modern browser WebAssembly &amp; HTML5. Instant vector rendering with zero queue times.<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-feature-card\">\n<div class=\"seo-feature-icon\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"#C5453E\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>\n            <\/div>\n<h3 class=\"seo-feature-title\">100% Private &amp; Secure<\/h3>\n<p class=\"seo-feature-desc\">Your files never leave your device. All calculations run locally in your browser memory.<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-feature-card\">\n<div class=\"seo-feature-icon\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"#C5453E\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18.178 8c5.096 0 5.096 8 0 8-2.678 0-4.678-4-6.178-4s-3.5 4-6.178 4c-5.096 0-5.096-8 0-8 2.678 0 4.678 4 6.178 4s3.5-4 6.178-4z\"\/><\/svg>\n            <\/div>\n<h3 class=\"seo-feature-title\">Free &amp; Unlimited<\/h3>\n<p class=\"seo-feature-desc\">No registration, no daily limits, no hidden fees, and zero forced watermarks on exports.<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-feature-card\">\n<div class=\"seo-feature-icon\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"#C5453E\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\n            <\/div>\n<h3 class=\"seo-feature-title\">Works Everywhere<\/h3>\n<p class=\"seo-feature-desc\">Fully responsive on desktop, laptop, iPhone, Android, and tablets on all modern browsers.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<div class=\"seo-header-block\">\n<p class=\"section-kicker\">3 EASY STEPS<\/p>\n<h2 class=\"section-heading\">How to Create Graphic Designs Using Artboard Online<\/h2>\n<\/p>\n<\/div>\n<div class=\"seo-steps-wrap\">\n<div class=\"seo-step-card\">\n            <span class=\"seo-step-number\">01<\/span><\/p>\n<h3 class=\"seo-step-title\">Select or Drop File<\/h3>\n<p class=\"seo-step-desc\">Choose canvas dimensions or social media preset.<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-step-card\">\n            <span class=\"seo-step-number\">02<\/span><\/p>\n<h3 class=\"seo-step-title\">Design in Browser<\/h3>\n<p class=\"seo-step-desc\">Add frames, shapes, pen paths, text, images, and visual clip masks.<\/p>\n<\/p>\n<\/div>\n<div class=\"seo-step-card\">\n            <span class=\"seo-step-number\">03<\/span><\/p>\n<h3 class=\"seo-step-title\">Download Result<\/h3>\n<p class=\"seo-step-desc\">Export your graphic design asset as PNG, SVG, PDF, or JPEG.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<div class=\"seo-faq-list\">\n<details class=\"seo-faq-item\">\n<summary class=\"seo-faq-summary\">What is Artboard Online and what can I design with it?<\/summary>\n<div class=\"seo-faq-body\">Artboard Online is a free in-browser vector graphics editor and design studio. You can create social media posts, UI mockups, vector illustrations, logo drafts, marketing flyers, and multi-page canvases with precision layer controls.<\/div>\n<\/details>\n<details class=\"seo-faq-item\">\n<summary class=\"seo-faq-summary\">Is this artboard online editor completely free without login?<\/summary>\n<div class=\"seo-faq-body\">Yes! UCDreams Artboard Online is 100% free with no account creation, credit cards, or watermarks. All your work renders locally in your browser with maximum privacy and speed.<\/div>\n<\/details>\n<details class=\"seo-faq-item\">\n<summary class=\"seo-faq-summary\">Can I export vector SVG, PDF, and high-res PNG from the online artboard?<\/summary>\n<div class=\"seo-faq-body\">Yes! You can export your artboards and individual layers as high-resolution PNG, JPEG, scalable vector SVG, or print-ready PDF formats at 1x, 2x, or 3x resolutions.<\/div>\n<\/details>\n<details class=\"seo-faq-item\">\n<summary class=\"seo-faq-summary\">Can I create vector designs with nested clipping frames?<\/summary>\n<div class=\"seo-faq-body\">Yes! Artboard features full frame clipping, vector pen bezier curves, layer masks, and SVG\/PDF export.<\/div>\n<\/details>\n<\/div>\n<\/section>\n<section class=\"wp-block-group tools-area related-area is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-bottom:80px\">\n<p class=\"section-kicker wp-block-paragraph\">Design Tools<\/p>\n<h2 class=\"wp-block-heading section-heading\">More Design Tools<\/h2>\n<div class=\"wp-block-group tools-grid is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group tool-card is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"icon-box\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><path d=\"M21 15l-5-5L5 21\"><\/path><\/svg><\/div>\n<h4 class=\"wp-block-heading tool-title\"><a href=\"\/artboard\/\">Artboard<\/a><\/h4>\n<p class=\"tool-tag wp-block-paragraph\">Design<\/p>\n<p class=\"tool-descr wp-block-paragraph\">Figma-style design editor with frames, pen tool, and vector shapes.<\/p>\n<\/p>\n<\/div>\n<div class=\"wp-block-group tool-card is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"icon-box\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><path d=\"M21 15l-5-5L5 21\"><\/path><\/svg><\/div>\n<h4 class=\"wp-block-heading tool-title\"><a href=\"\/image-editor\/\">Image Editor<\/a><\/h4>\n<p class=\"tool-tag wp-block-paragraph\">Image<\/p>\n<p class=\"tool-descr wp-block-paragraph\">Crop, remove backgrounds, add text &amp; stickers \u2014 a browser Photoshop.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Vector Artboard Online Free Artboard Online Studio &amp; Graphic Design Canvas Professional free artboard online graphic design studio. Design vector assets, UI mockups, social banners, and multi-page layouts directly in your browser with nested frames, pen tool, and instant export. Artboard Home 100% Save Your Design Files Manage saved projects, launch presets, or import .artboard [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rank_math_title":"Free Graphic Design Artboard & Canvas Editor | UCDreams","rank_math_description":"Create vector graphics, visual assets, social posts, and framed artboards online for free. Browser canvas graphic design editor with clip layers.","rank_math_focus_keyword":"graphic design artboard editor","rank_math_robots":null,"rank_math_canonical_url":"","rank_math_facebook_title":"Free Graphic Design Artboard & Canvas Editor | UCDreams","rank_math_facebook_description":"Create vector graphics, visual assets, social posts, and framed artboards online for free. Browser canvas graphic design editor with clip layers.","rank_math_twitter_title":"Free Graphic Design Artboard & Canvas Editor | UCDreams","rank_math_twitter_description":"Create vector graphics, visual assets, social posts, and framed artboards online for free. Browser canvas graphic design editor with clip layers.","rank_math_twitter_card_type":"summary_large_image","footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":33,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/pages\/69\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/ucdreams.com\/tools\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}