Sketch App - Modern UI Design

Navigate sketches efficiently using ready-made documents, templates, and symbol reuse for material design tasks. Master window and tab management, and keyboard shortcuts to zoom, pan, and present.

Master selecting layers and groups in sketch by single or double clicking, entering edit mode with return, and using command, shift, and drag to multi-select and lock layers.

Learn to structure sketch documents with pages and boards, manage groups and artboards, resize content to fit, and export artboards as graphics with configurable order.

Organize layers and groups, filter by name, and manage art boards and vectors. Use shortcuts to group (cmd+g), ungroup (shift+cmd+g), and perform vector boolean operations like union and subtract.

Learn how to use boolean operations in Sketch to combine vector shapes via union, subtract, and intersect, and how layer order and style inheritance affect the result while building icons.

Master working with sketch shapes, manage combined shapes with boolean operations, flatten layers for export, and preserve backups while optimizing vector points and path order for clean icons.

Master vector tools in Sketch, creating and editing vector points, adjusting handles, switching between mirrored, connected, and asymmetric modes, and refining curves with precision.

Master transforming shapes in Sketch by using the scissors and boolean operations to create and edit complex icons, while customizing toolbars, rulers, and center-based drawing.

Master advanced transformations in sketch by adjusting position with input fields and arrows, locking proportions, and using transform and rotation tools with keyboard shortcuts.

Leverage sketch alignment options, smart guides, and measuring tools to align and center groups. Distribute items evenly, group objects, align text frames, and use keyboard shortcuts for faster work.

Discover how resizing options in Sketch control how objects scale within their parent, with pins and fixed dimensions. Learn to center items and manage margins for responsive designs.

Learn to use masks in Sketch to hide or reveal images with rectangles and shapes, create groups, and explore gradient and fill options for dynamic masking.

Export assets from Sketch by balancing vector and bitmap formats and 1x to 3x scales for iOS and Android, while using presets and slice tools for efficient export.

Master mathematical operations in Sketch fields to manipulate layers with add, subtract, multiply, divide, and percentages; scale from sides, lock proportions, export assets, and set per-corner border radii.

Master vector design in Sketch by aligning to the full grid, snapping to full pixels, and exporting bitmaps with safe-for-web settings to preserve color and metadata.

Learn to create and manage symbols in Sketch, using a master symbol to update all instances, nesting symbols, overrides, and organized naming for scalable, reusable UI components.

Discover how sketch libraries let you reuse symbols from external files as a shared source of truth, enabling cross-project assets with overrides.

Design with a device-agnostic, 1x scale in Sketch to support mobile, tablet, and desktop layouts. Export reliably at 1x, 2x, and 3x while preserving vector quality.

Explore a mobile view grid approach in sketch, with 8-pixel grid increments, adjustable block sizes, snapping to grid, and layout settings including columns, rows, offset, center, and width 375 px.

Design a practical app in sketch by starting with wireframes and pen-and-paper sketches to map the user flow, then export to digital formats and prototype with envision.

Explore color theory and practical tools to choose and refine a five-color palette for your app, using color wheels, monochromatic and complementary schemes, swatches, hex values, and palette exports.

Discover how to manage colors and symbols in sketch, creating color symbols and updating instances. Explore global colors, document colors, and the color picker for nested symbols.

Select a font from Google fonts, install it, and design a type ramp with font sizes, line height, and a base size to create reusable Sketch typography.

Master typography in Sketch by organizing text fields and styles, creating white header variants with opacity for dark backgrounds, applying font weights, and using accent colors and color pickers.

Learn to design a native mobile top component in Sketch by creating a full-width rectangle, centered text, and left and right icons using groups, symbols, and icon sets.

Create a home add-ons screen in Sketch by filling a rectangle with an image, applying masks and opacity, and arranging icons, text, and layers for a polished UI.

Organize Sketch assets by grouping layers and adopting a smart naming pattern with folders and slashes, create exportable assets and nested structures, and export CSS attributes for downstream use.

Create multiple home screen states in Sketch by iterating artboards, duplicating layouts, and using symbols, text, and plugins to design responsive, color-coded alert states and avatars.

Learn to create multiple button variants in Sketch using symbol definitions, customize labels and colors, add hover and active states, convert to outlines, and manage variants with shadows and fills.

Preview Sketch layouts in real time on a mobile device with the sketch mirror app over USB or Wi-Fi, verify fonts, spacing, and colors, then share IP preview with colleagues.

Learn how to design a login screen in Sketch by building a multi-screen flow, duplicating variants, arranging symbols and groups, refining inputs, and integrating a dark keyboard template.

Learn to organize sketch projects with multiple pages and art boards for efficiency and performance, override icons and symbols, and design a home screen with a notification and navigation elements.

Explore gradients in sketch, including angular, linear, and radial types; adjust color stops with the color picker, drag handles, and preview; duplicate elements, refine borders, and reuse gradients across project.

Design a settings screen in Sketch by combining artboards and configuring icons. Build a reusable settings row symbol with headers, separators, and iOS switches.

Design a devices screen in sketch by creating reusable symbols and components, building device cards with active and empty states, and organizing a scalable grid with localization icons.

Explore the actions screen in sketch app, using shared styles, cards, and device icons to create swipeable action cards with keyboard shortcuts, borders, shadows, and material design elevation.

Duplicate the action detail screen, edit participating devices and labels, and adjust layout. Use shortcuts, symbols, and grid, then save with version history and Time Machine restore.

Create a reusable bottom menu in Sketch by building a symbol with active and inactive icon states, swapping icons, and applying a consistent style guide across multiple screens.

Design an alarm screen in Sketch App by arranging a large circular clock, radio button states, and an eight-icon weekday grid with gradients, borders, and precise spacing.

Explore the senses screen with a fresh lemon smell visualization using flower icons and an intensity scale, and design the curtains and blinds screen with a slider and descriptive labels.

Master keyboard shortcuts in sketch to speed up design, manage layers and panels, and use vector editing, masking, gradients, and guides to build lamp scenes with a bottom-focused UX.

Design the temperature settings screen by placing a temperature slider symbol as the first bedroom item, adding a centered section line, and building a rounded rectangle with a minus button.

Learn to design camera screens for a sketch app by building a four-panel cctv layout, adding a status bar, image fields, grid, timeline, and text on a path.

Port to different screens by duplicating layouts for mobile, tablet, and desktop, while handling resolutions and orientations. Enable responsive scaling, symbol pinning, fixed sizes, and grid alignment.