Skip to main content

​
What Refine Does

Refine takes an existing design and makes specific changes. Instead of regenerating from scratch, it preserves what works and modifies what needs adjustment. Refine handles:
  • Visual adjustments (colors, spacing, typography)
  • Layout modifications
  • Component swaps
  • Content updates
  • State additions
  • Responsive adaptations

​
​ When Figr Uses Refine

Figr automatically engages refinement when you:
  • Ask to change something in a generated design
  • Request adjustments to specific elements
  • Want to iterate on a concept
  • Need to incorporate feedback
  • Ask for variations of an existing design
"Make the buttons larger"
"Change the header to use our blue"
"Add more whitespace between sections"
"Move the sidebar to the right"
"Make this more minimal"

​
​ Types of Refinement

  • “Make the cards have more rounded corners”
  • “Increase the contrast on the text”
  • “Use a darker background”
  • “Make the typography bolder”
  • “Stack these horizontally instead of vertically”
  • “Add a sidebar navigation”
  • “Make this a two-column layout”
  • “Move the CTA above the fold”
  • “Replace the dropdown with tabs”
    • “Use toggle switches instead of checkboxes”
  • “Add a search bar to the header”
  • “Include pagination at the bottom”
  • “Use more realistic placeholder data”
  • “Make the headlines shorter”
  • “Add helper text under the form fields”
  • “Include error messages”
  • “Show what this looks like empty”
  • “Add a loading skeleton”
  • “Design the error state”
  • “Show the hover state for cards”

​
​Getting Best Results

  • Less effective:“Make it better”
  • More effective: “Increase the font size of the section headers and add more space between the cards”
  • Clear targeting: “Change the top navigation…” “In the sidebar, make…” “The card on the right should…”
  • “Make the CTA bigger - users are missing it”; “Add more contrast - accessibility feedback”; “Simplify the form - users abandoning halfway”