Design Tools and AI-Assisted Workflows Questions

Approach overview

I set up a single, consistent grid system in the design file and adapt it per breakpoint so components snap and scale predictably across desktop, tablet, and mobile.

Column systems, gutters, margins

• Desktop: 12-column grid (good for complex layouts). Example: page width 1200px, columns 12, gutter 24px, side margins 96px.
• Tablet: 8-column grid, gutter 20px, margins 48px.
• Mobile: 4-column grid, gutter 16px, margins 16–20px.
• Use column span rules (e.g., hero uses 12/12, content uses 8/12 centered) so components can be reused across breakpoints.

Baseline grid

• Use an 8px baseline (or 4px for denser systems). Snap type, component heights, padding and vertical rhythm to that baseline so lines of text and stacked components align across widths.

Implementing in Figma (practical steps)

• Add Layout Grids per frame: set columns, gutter, margin. Create separate frames for each breakpoint (Desktop/Tablet/Mobile).
• Use Constraints + Auto Layout: components set to left/right/center constraints so they reflow. Use Auto Layout for internal spacing that follows baseline multiples.
• Export grid tokens into the design system (grid-gutter, grid-columns, grid-margin) so developers implement CSS variables.

Consistency across breakpoints

• Define mapping rules: 12→8→4 column correspondence, column spans translate (e.g., 6/12 desktop → 4/8 tablet → 2/4 mobile).
• Test common components (cards, nav, forms) in each breakpoint to ensure alignment and consistent spacing.

This ensures predictable responsive behavior, easier handoff, and visual rhythm across screens.

Situation: At my previous company we had grown from two to six product teams. Designs lived in scattered Sketch files and handoff relied on screenshots and CSS snippets, causing inconsistencies and long dev handoff cycles.

Task: I was asked to standardize UI assets and reduce implementation drift—goal: cut design-to-dev rework by 50% and speed up delivery.

Action:

• Researched Figma Libraries + design tokens, comparing collaboration, versioning, performance, and dev integrations. Presented pros/cons and ROI to design and engineering leads.
• Ran a 4-week pilot: migrated one product module to Figma Library + tokens, created shared components, documented token mapping for colors/spacing/typography, and integrated tokens with the dev team’s CSS variables.
• Led two hands-on workshops (designers + engineers) and produced a migration playbook: file structure, naming conventions, and step-by-step component migration checklist.
• Set up a feedback loop and weekly syncs during rollout.

Result: Adoption across all teams in 8 weeks. Measured outcomes: 60% fewer implementation inconsistencies reported in QA, average dev handoff time dropped from 6 days to 2.5 days, and time to create new UI screens decreased by ~30%. The shared library also improved design parity and sped up onboarding for new designers.

Approach (high-level)

Start by mapping conditional flows in a decision table: inputs, variables (isReturningUser, selectedPlan), triggers, and outcomes. Build core screens, then layer components and states. Plan test scenarios and instrumentation (what to observe).

Implementation by tool

• Framer (recommended): Use Overrides/Code components to store state and variables (React useState). Implement conditional navigation in code — e.g., if isReturningUser then render OfferScreen; else onboarding. Pros: high-fidelity interactions, easy variable handling, URL params for sharing. Cons: needs JS familiarity.

• ProtoPie: Use Variables and Logic blocks (if/else, expressions). Wire sensors and interactions visually; good for mobile gestures and complex conditional paths without code. Limitation: less polished visual design workflow; hand-off to developers requires clear spec export.

• Adobe XD: Use Component States + Auto-Animate + Plugins (e.g., XD Variables plugin) to simulate simple branching. Native conditional logic is limited; workarounds use overlays and duplicate artboards. Best for quick demos with limited branching.

• Figma: Use Interactive Components + Variants and Smart Animate. For complex variables, combine with FigJam/branching via multiple frames or use plugins (Figmotion) or integrate with Framer for logic. Figma is strongest for UI iteration and hand-off but weak for runtime stateful logic.

When to choose code prototype

Choose code-based (React/Next.js, small staging app) when:

• You need real data, authentication, persistent state, or complex integrations (APIs, analytics).
• You must validate edge-case logic or performance.
• Engineering hand-off requires runnable behavior.

Example scenario

• Variable: isReturningUser (boolean)
• Flow: On load check flag → if true show promo modal; if false run 3-step onboarding.
  Implement in Framer via useState + navigation overrides; in ProtoPie via variable check on component tap; in Figma/XD simulate with conditional frames.

Trade-offs & hand-off
Document logic in a decision table and annotate screens. For high-fidelity testing with conditional paths use Framer/ProtoPie; for rapid iteration and developer hand-off use Figma plus a small code prototype when behavior must be exact.

Overview — goal: deliver production-ready specs, tokens, and assets so engineers can implement UI reliably and independently while keeping a clear channel for questions.

Handoff steps

• Finalize Figma file: organize pages (Designer, Tokens, Components, Screens), freeze artboards for the sprint.
• Export design tokens: use Figma Tokens plugin to generate JSON for colors, typography, spacing, radii and export via tokens.json into the repo / design-system package.
• Spacing & grid specs: annotate primary breakpoints, 8px baseline grid, container widths, and per-screen margin/gutter values in a Handoff Notes frame. Include example margin/padding tokens (e.g., spacing-8, spacing-16).
• Component APIs: For each atom/molecule, publish a Component Spec frame listing props, states, accessibility notes, and interaction rules (label, disabled, loading, icon placement). Link to corresponding Storybook stories.
• Inspect / Dev Mode: call out exact layers and measurements using Figma Dev Mode—copy CSS values, export SVG/PNG for icons, and attach export settings (format, scale, 1x/2x/3x).
• Assets: provide optimized SVGs (cleaned, IDs namespaced), PNG fallbacks, and fonts/licensing. Commit assets to the repo or upload to design-assets folder.

Tools & plugins

• Figma Dev Mode + Figma Tokens + SVGO / IconJar + Zeplin (if used) + Storybook for implemented components.

During sprint

• Pair with engineers in a 30–60m handoff meeting covering critical screens and component props.
• Use a “handoff issue” template in Jira/GitHub with links to frames, tokens, and Storybook.
• For implementation questions: triage via Slack with a dedicated channel, escalate ambiguous behavior to a quick async Loom or 15m sync. Record decisions back into the component spec and update tokens or Figma file if needed.

Outcomes

• Single source of truth (tokens + Storybook) reduces rework, ensures visual consistency, and shortens dev queries.

Overview — goal
Create a predictable, scannable Figma file so teammates and engineers find assets quickly, reduce duplication, and make handoff reliable.

Top-level pages (examples)

• 00_Drafts — sketches, early explorations, research-driven iterations (date + initials on frames)
• 01_WIP — work-in-progress screens and prototypes for current sprint
• 02_Review — polished flows awaiting stakeholder/design review
• 03_Production — final, export-ready screens and handoff notes
• 04_Components — atomic library: Tokens, Atoms, Molecules, Templates
• 05_Releases — snapshots per release (v1.2_2026-03-01)
• 99_Archive — old iterations removed from active pages

Frames / Artboard naming
Use: <Feature> / <ScreenName> / <State> / <Variant>
Example: Checkout / Shipping / Empty — or Checkout / Shipping / Filled — or Settings / Profile / Error

Prefix in-progress screens with WIP_ when on 01_WIP:
Example: WIP_Checkout / Shipping / Empty

Components & library structure

• Page 04_Components
  • Tokens / Colors / Typography / Spacing
  • Atoms / Buttons / Icons
  • Molecules / Form-fields / Nav
  • Templates / Page-layouts
    Name components: <Component> — <Variant> / <State>
    Example: Button — Primary / Default; Input — Text / Error

Publish library versions with semantic tags (v1.3.0) and keep changelog in Releases page.

WIP vs Production separation

• Use page separation (01_WIP vs 03_Production) + filename prefixes (WIP_ / PROD_)
• Add a small visible badge component top-left of frames: Badge — WIP (orange) or Badge — PROD (green)
• Lock production frames and components; only maintainers can edit

Collaboration & version control

• Comment guideline: use @name + short context; mark resolved comments
• Before major changes: duplicate frame and append initials + date, e.g., Checkout / Shipping — JS_2026-03-02
• Weekly tidy: move outdated artboards to 99_Archive and update Release notes

This gives immediate clarity, reduces merge conflicts, and speeds handoffs to PMs and engineers.