Design 2D + 3D

Open the Design module

1. Click Design 2D+3D in the module bar, or press Ctrl+Alt+D.
2. Open the File menu of the Design page and choose New.
3. Pick Empty canvas, one of the size presets, or Custom size….
4. Save with Save as…. Design files use the extension .wdesign.

• Open… opens an existing design; Recent lists the last ones.
• Import… brings in PSD, PSB, SVG, PDF, PNG, ICO, PPTX, HTML or a prototype ZIP.

Your design is saved automatically

You never lose a design, a prototype or a storyboard: WASDEV saves the file by itself while you work.

1. Draw or change something. Three seconds after each change, the design is saved in its file.
2. A new design without a name receives a file automatically, in the folder design of the open project.
3. Close WASDEV when you want: the last changes are saved before the window closes.
4. Open WASDEV again: the last design opens by itself on the Design page.

• With no project open, new designs go to the folder WASDEV Designs in your documents.
• WASDEV does not interrupt you: while you type a text, it waits until you finish.

Draw your first screen

1. Press F (tool Frame) and drag on the canvas to create a frame, or choose a device size.
2. Press R for a rectangle, O for an ellipse, L for a line, T for text. Draw inside the frame.
3. Press V (tool Move) and click an object to select it.
4. In the right panel, change Position, Fill, Stroke, corner radius and Effect.
5. Press I (or use Images) to place a picture.
6. Hold H (tool Hand) and drag to move around the canvas. Shift+1 zooms to fit.

• Ctrl+D duplicates, Ctrl+G groups, Ctrl+Shift+G ungroups.
• P is the pen, Shift+P the pencil, B the brush, C a comment.
• Ctrl+Z undoes, Ctrl+Shift+Z redoes. The Actions Klik view in the activity bar shows the undo history.

Organise with layers and pages

1. In the left panel, open the tab Layers: every object of the page is listed.
2. Drag a layer up or down to change what is in front.
3. Use the eye and the lock on a layer to hide or lock it (Ctrl+Shift+H, Ctrl+Shift+L).
4. Open the tab Page to add a page and move between pages.

• Ctrl+] brings forward, Ctrl+[ sends backward; with Shift added, to the front or to the back.

Use auto layout and components

1. Select several objects and press Shift+A: they become an Auto Layout group that spaces them automatically.
2. In the right panel, set the direction, the gap and the padding.
3. To reuse an element, select it and press Ctrl+Alt+Shift+K (Create component).
4. Copies of a component are instances: change the component and all instances follow. Ctrl+Alt+B detaches an instance.

• Local variables… in the File menu stores colours, numbers and texts in collections with modes (for example light and dark), and can copy them as CSS.

Add ready-made assets and templates

1. In the left panel, open the tab Asset.
2. Choose a category — 3D, Object, Shapes, Smoke, Splash, Lights, Mine or AI Medias — and drag an asset onto the canvas.

1. For a complete design, open Project Library → Templates, choose the category Design 2D+3D UI Prototype, search or browse, and click Use this template.

• Add to the open design inserts a template into your current file instead of opening a new one.

Build a prototype

1. In the top bar, switch the mode to Prototype.
2. Select the object that should react, for example a button.
3. In the right panel, under Interactions, choose the Trigger (for example a click), the Action and the Target frame.
4. Under Animations, choose the Direction, the Easing and the Duration.
5. Click Present (Shift+Space). In the player, use Restart, Device bezel, Full screen and Exit.

• Flows names several starting points; Presentation device chooses the phone or screen shown around the prototype.

Tell a story with Storyteller

1. Switch the mode to Story.
2. Under The story, fill Film title, Logline, Genre, Synopsis and Format.
3. Add your Characters.
4. Under Scenes and shots, click + Scene, then + Shot for each shot.
5. Click Build / update the storyboard to lay the shots out on the canvas.
6. Click Play the animatic to watch the sequence.

• Write / continue the story with AI asks the AI to write from your logline.
• The AI can also generate the image of each shot in the style you choose: photo, 3D animated film, anime, comic, sketch or watercolour.
• Export storyboard / screenplay… produces a storyboard PDF, a screenplay in PDF, Word or Fountain, a shot list in Excel, or an animatic in HTML or MP4.

Work in 3D

1. Switch the mode to 3D.
2. Add 3D Text, a character, or Import 3D model (.obj, .stl, .ply, .gltf, .glb).
3. Adjust the material sliders, the Light and the Ground.
4. Turn on Auto rotate or build a Scene animation with keyframes.
5. Click Save 3D image (PNG) or Save video (MP4, WebM, MOV or PNG frames).

• An image can be turned into relief, inflated or curved. Photo → full 3D object uses an optional AI model that WASDEV proposes to install.

Hand over to code with Dev mode

1. Switch the mode to Dev.
2. Click an object: Inspect shows its sizes, spacing, colours and Typography.
3. Open Code, choose CSS, Tailwind, React, Flutter or SwiftUI, and copy the generated code.
4. Click Copy as context for AI, then paste in the chat and ask the AI to build the screen.

• Mark ready for dev flags a frame as finished; Changes since ready shows what moved afterwards.
• In Design mode the AI does not write code or run commands unless your message says “code it”.

Let the AI draw

1. Open the chat (Ctrl+Alt+I) while the Design module is in front.
2. Describe the screen, for example: Design a login screen for a mobile banking app, dark theme.
3. The AI adds frames, texts and shapes on the canvas while you watch. Everything stays editable.

• /check-design runs a local check of the design without any AI.

Export the design

1. Click Export in the top bar.
2. Choose a section and a format from the list below.
3. Choose where to save and confirm.

• Images: PNG, JPG, WebP, AVIF, TIFF, BMP, ICO, ICNS or an icon pack, with the resolution in DPI.
• Vector & print: SVG, PDF, or print PDF with bleed and crop marks.
• Layers: PSD.
• UI / Code: HTML + CSS or HTML + Tailwind.
• Prototype: an interactive HTML ZIP.
• Slide show: PPTX or PDF.
• Font: TTF, OTF, WOFF, WOFF2 or a CSS kit.
• Screenshot in the top bar captures the whole design as one image.
• Keyboard Shortcuts in the File menu (Ctrl+Shift+/) lists every Design shortcut.