Figma to website: what a developer needs from your design

The screens

• Every page, in its final state. Mark clearly which frames are final and which are drafts.
• A mobile version of each page. If you can only do some, do the home page and the most complex ones, and tell the developer how you'd like the rest to behave.
• A tablet layout if it matters to you. If not, say so, and the developer will adapt the desktop design.

The design system

• Fonts, with the licence or a link to where they come from. A font you can't legally use on the web is a problem to find early.
• Colours, text sizes and spacing used consistently, ideally as shared styles instead of one-off values.
• Buttons, form fields, cards and other repeated parts designed once and reused.

States and behaviour

• Hover, focus, active and disabled states for buttons and links.
• Form errors and success messages.
• Empty and loading states, such as a search with no results.
• Any animation or interaction, described in a sentence or shown as a short clip.

Assets and content

• Icons and logos as SVG files.
• Photos in a good size, with permission to use them.
• Real text where possible. Placeholder text hides problems like long headings that don't fit.
• A list of pages, and how they link together.

Sharing the file

Share a view link with inspect access so the developer can read exact sizes and spacing. Name your pages and layers clearly, and keep one file for the project instead of several copies. Keep it open for questions, because a quick reply saves days.

What the developer will check with you

A designer works at one screen width. A website lives at hundreds. I'll usually ask how the design should behave between your frames, what happens to long text, and which parts should be editable if the site is in WordPress. It's much cheaper to settle those before the build.

Common handoff problems, and how to avoid them

• The design only shows one screen size, so nobody knows how it should behave on a phone. Add at least a mobile version of the main pages.
• Fonts that aren't licensed for websites. Check this before the build, not at launch.
• Text that is perfectly short in the design but much longer in real life. Test your layout with real copy.
• Components drawn slightly differently on every page. Reuse the same component so the developer can too.
• Missing states, such as what a form does when something is wrong.

A checklist you can paste into your message

• Link to the Figma file with inspect access.
• Which frames are final.
• Mobile versions, or how you'd like pages to adapt.
• Fonts and where to get them.
• Logo and icon files as SVG.
• Final text and images, or who is providing them.
• Your deadline.