Blog - Page 9

A selected design card with layered shadows flowing into a CSS box-shadow code panel.

Figma Box Shadow to CSS Plugin: Export Drop and Inner Shadows

Learn how to use the Figma drop and inner shadow to CSS box shadow plugin to turn a selected layer’s visible shadows into copy-ready CSS box-shadow code.

A selected design card with a blue-violet-cyan linear gradient flowing into a CSS background code panel.

Figma Linear Gradient to CSS Plugin: Convert Fills to CSS

Learn how to use the Figma Linear Gradient to CSS plugin to turn visible solid and linear-gradient fills into copy-ready CSS background code.

A violet control hub smoothly moves a teal slider toward a warm off-white target card, with a small coral endpoint marker.

animate*AsState: Animate Values in Jetpack Compose

Animate a single Float, Color, Dp, or other value from Compose state with animate*AsState, deliberate specs, and clear guidance on when to use another API.

A teal input path enters a violet reducer hub, which produces a warm off-white state panel and a small coral one-time effect signal.

MVI and Unidirectional Data Flow in Jetpack Compose

Build predictable Compose screens with immutable UI state, explicit actions, reducer-style ViewModel updates, and a deliberate policy for one-time effects.

A violet navigation path passes through teal destination cards to a warm off-white verification panel with a small coral check marker.

Testing Navigation Compose: NavHost, Actions, and Back Stack

Test Navigation Compose with TestNavHostController, UI-driven actions, route assertions, and screen callbacks that keep destinations independently testable.

A teal object moves through three translucent violet time rings toward a warm off-white endpoint with a small coral timing marker on a deep navy background.

Testing Animations and Time in Jetpack Compose

Control Compose's test clock to verify animation end states, intermediate frames, delayed effects, and visual motion without flaky real-time waits.

A teal interactive control follows a curved violet path through a warm off-white input channel toward a small coral destination marker on a deep navy background.

Click, Type, Scroll, and Test User Interactions in Compose

Test Compose clicks, text input, IME actions, scrolling, and custom touch gestures with semantic APIs that verify real user outcomes.

A glowing teal motion path flowing through spring-like curves, a straight timeline, and violet waypoints on a deep navy background.

Spring, Tween, Keyframes, and AnimationSpec Explained

Choose the right Jetpack Compose AnimationSpec by understanding when spring, tween, and keyframes produce the intended motion.

Two layered warm off-white preview frames align around a teal interface panel, with a violet comparison halo and a small coral difference marker on a deep navy background.

Screenshot Testing for Jetpack Compose

Set up Compose Preview Screenshot Testing, create stable screenshot baselines, validate visual changes, and review image diffs with confidence.