Figma

Use Figma-related workflows to translate design intent into implementation (components, states, interactions) without losing UX requirements.

When to use

• Implementing UI components and layouts from approved designs
• Enumerating states (loading/empty/error) and interactions
• Turning acceptance criteria into code + tests

When not to use

• If it requires sharing restricted client information or proprietary assets that shouldn’t be shared
• If the design includes sensitive data (private links, credentials, restricted datasets)

Useful guide

• Extract the essentials: spacing, typography, colors/tokens, component states, interactions.
• Implement in slices: one component/screen at a time.
• Add basics: accessibility (labels, focus), responsiveness, error states.
• Keep diffs reviewable and align with existing UI patterns.