Timur Dautov | Frontend Engineering Blog
#css
by Timur Dautov

Converting Figma Prototypes to CSS/HTML: Checklist

Preparation & Analysis#

  • Have access to all pages and components in Figma
  • Checked sizes, spacing, fonts, colors, and component states like hover, active, disabled, etc., validation form errors,
  • Clarified any unclear behavior, responsiveness, or interactivity with designer/team
  • Decide which components should be reused and which should be created from scratch

Visual Consistency#

  • Colors:
    • Colors should be reused from CSS variables
    • Colors should be consistent across the app
    • Colors match the design
  • Fonts: font-family, font-size, font-weight, line-height, letter-spacing, text-transform
  • Element Sizes: width, height, padding, margin, borders, border-radius, box-shadow
  • Element States: hover, active, disabled
  • Images/Icons:

Supported Browsers & Devices#

  • All necessary browsers are supported (e.g., Chrome, Firefox, Safari, Edge, IE).
  • All necessary devices are supported (e.g., desktop, tablet, mobile).

Responsive Design#

  • All necessary breakpoints are implemented (e.g., 320px, 768px, 1024px, 1440px).
  • Layout doesn't break or overflow on resize
  • Text doesn't overflow or get cut off.
  • Images/Icons are responsive.
  • No horizontal scrolling on mobile
  • Mobile menu and navigation work correctly

Form Validation Rules#

  • Required fields are clearly indicated (e.g., asterisk * or label)
  • Client-side validation is implemented (e.g., HTML5 validation or JavaScript)
  • Error messages are clear, specific, and user-friendly (e.g., “Email is required”)
  • Fields with errors are focused or highlighted for quick correction
  • Real-time validation is provided (optional, but improves UX)
  • Form does not submit with invalid or incomplete data
  • Loading State: When we submit a form, the submit button should be in a loading state and disabled from multiple submissions until HTTP request is completed.
  • Valudation Rules:
    • Input fields: required, min length, max length, pattern, etc.
    • Dates: the FROM date should be less than the TO date
    • Email: format is correct (e.g., example@domain.com), use input type="email"
    • Phone number: format is correct (e.g., +1234567890), use input type="tel"
    • Password: format is correct (e.g., at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character), use input type="password"
  • File Upload Validation:
    • File Types: allowed file types (e.g., .jpg, .png, .pdf)
    • File Size: maximum file size (e.g., 5MB)
    • File Name Restrictions: no special characters, reasonable file name length, no spaces
    • File Preview: file preview should be displayed after selection
    • File Upload: file should be uploaded to the server when the form is submitted
    • Progress Indicator: show progress indicator during file upload
    • Preview should be displayed (optional)
    • Multiple File Uploads: if allowed, should be limited by COUNT, e.g. max 5 files
    • Drag and Drop Support