We’re huge Figma fans here at Baggy; it’s incredibly robust, highly collaborative, and accessible to designers and developers alike, owing to its browser-based platform and comprehensive starter plan. Figma makes it super easy for us developers to inspect designs, extract assets, and review specifications, but there are definitely some things designers can do to make the handoff process even smoother and more efficient.

In this post we’ll be exploring some best practices for designing websites in Figma, so you can ensure your vision is brought to life exactly as you imagined it.

Unlike printed designs, webpages are not static – they adapt and respond to different screen sizes, devices, and user interactions. That's why it's crucial to design for both desktop and mobile viewports from the start; by showing both states in your Figma file, you help developers understand how your design should respond across different breakpoints, ensuring a consistent and intentional user experience on all devices.

File management can often be treated as an after-thought, but it really does make the design/development handoff more seamless. During the design process, we recommend:

1. Have a single Figma page, with desktop and mobile artboards side-by-side This saves a lot of time spent flicking between pages and artboards during the development stage, and makes it much easier for developers to compare how your design should behave across different screen sizes. Make sure your finalised design only contains the artboards you want to develop – leave explorations, older drafts and WIP designs in a separate file.
2. Use frames to group related content together The box model is a core foundation of web design; it’s the idea that every element on a webpage is essentially a box with content, padding, border, and margin. By grouping related elements into frames in Figma, you're mirroring this structure, which makes it much easier for developers to translate your design into clean, semantic HTML and CSS.
3. Create components for reusable content Components in Figma allow us to create reusable design elements that can be updated globally. When you turn a button, card, or navigation menu into a component, any changes you make to the master component will automatically update everywhere it's used in your design. This consistency is a win-win: it saves you time during the design process and helps developers spot patterns to build cleaner, more maintainable code.
4. Name your frames, layers and components clearly This not only makes it easier for developers to select the correct layer, but it gives us some useful terminology to use during any communications – “Should we decrease font sizes across on the Description Text layers?” is much clearer to understand than “Should we change the font size on Layer 112, and also maybe Layer 201 since these belong to the same component?”.
5. Size boxes to the bottom of the element It sounds obvious, but you’d be surprised how often we select layers or groups with excess whitespace at the bottom of the frame, making it difficult to accurately gauge the exact margin, padding or gap required between two elements. We advise combing through your designs before handoff and selecting each layer in turn, making sure its bounding box is flush with the layer’s content.

If the design is a map, then the styleguide is the key. As developers, we absolutely live by styleguides; they act as a single source of truth for typography, colours, spacing and other design elements, making it much easier to maintain visual consistency across the site.

The exact content of the styleguide will depend on your branding and goals, but as a general rule we recommend the following:

1. Include all repeatable components This includes buttons, form fields, cards, navigation menus, and any other UI elements that appear multiple times throughout your design.
2. Don’t forget about states Interactive elements such as buttons, links and form fields tend to have multiple states. At the very minimum, we recommend including the following:
   
   Buttons / Links: Hover, disabled
   Forms: ****Success, error
   Form fields: With content, without content, disabled
3. Create type styles Figma allows us to create text styles that can be defined once, and then applied to different pieces of text throughout the design. Setting your text up in this way not only saves time during design, but it also allows developers to easily translate these reusable styles into CSS code and accurately implement your design system.
   
   Remember that too many typographic styles can slow down loading speeds and make the site feel cluttered, so aim to keep your type system simple and purposeful. We recommend including desktop and mobile styles for the following:
   
   H1
   H2
   H3
   H4
   H5
   Large body text
   Regular body text
   Small body text

4. Use colour libraries Similar to text styles, Figma's colour libraries let you define a palette of colours that can be used consistently throughout your design. Name your colours semantically (eg: primary-blue, accent-orange, text-dark) rather than descriptively (eg, blue-500), as this makes it easier for developers to understand the purpose of each colour and implement them as CSS variables.

Depending on the type of site you’re designing, it may be useful to think of your webpages as groups of sections that can be reused across multiple pages. This applies particularly to the eCommerce industry, where page layouts frequently change as new marketing goals are established.

Some of the best Figma designs we’ve worked with have presented sections in the following ways:

1. Break sections out into individual artboards We find it’s best to separate out each section into its own artboard, and to group these by the type of content the section should convey, for example Heroes or Image & Text. Make sure to show desktop and mobile designs side-by-side, so developers can easily compare how your sections should appear and behave across different breakpoints.
2. Show variations A single section will often need to adapt to a variety of use-cases; an Image & Text section for example may have two layouts, one with the image on the left of the section and the other with the image on the right. Designing multiple variations of each section helps developers understand the flexibility required, ensuring the final build can accommodate different content scenarios without breaking the design.
3. Include a page mockup to show how sections fit together Once you've created your section artboards, you can easily drop them into a full-page mockup to show how they work together. Doing so helps developers visualise the overall user experience and ensures that transitions between sections feel cohesive and intentional.

Including finalised copy and imagery in your design helps enormously during the development process; it gives developers a very clear idea of how the site’s Content Management System (the database used to manage your site’s content) should be structured, sets the right expectation with clients, and helps to keep the project on track by minimising the number of revisions required down the line.

Unfortunately, it’s pretty common for site owners to commission designs before they know what their exact content requirements will be, forcing designers to resort to placeholder content to pad out their designs. If you find yourself in this situation, there are a few things you can do to mitigate the uncertainty of this:

1. Explore different sentence lengths When designing repeatable modules it’s very easy to fall into the trap of assuming each one will have text with similar lengths, but in reality this is rarely the case. Say you’re designing a grid filled with image and text modules – would the alignment of the grid be messed up if one of those modules had a lot more text than the others? If so, it may be worth switching to a layout that doesn’t rely on uniformity to look aesthetically pleasing.
2. Design for every content type How does your section look when the text content is replaced by a form? Or when an image is replaced with a video? What do lists, blockquotes and tables look like? Ensuring that you’ve designed all the possible components that the site owner might need helps developers build a flexible system that can handle any content scenario without requiring design revisions.

An often-overlooked aspect of web design, particularly for those more used to designing for print, is interactivity. Details as subtle as hover states and as prominent as scroll-based animations can really help immerse users in your website's world, and become a powerful tool for expressing a brand.

Figma’s prototyping tools make it easy to demonstrate how these interactive elements should behave. By creating prototypes that show hover states, click interactions, and transitions between states, you give developers a clear reference for how elements should behave, reducing ambiguity and ensuring your interactive vision is implemented accurately. Some things you may want to prototype include:

1. Button and link hover transitions These elements appear frequently across your site, so keep transitions simple to avoid bloated code and complex browser-work that slows down page load times.
2. Menu open / close transitions A common UX pattern is showing a popup when a button is clicked, for example showing an expanding nav menu when a hamburger button is clicked. This can be a great opportunity to surprise and delight users with quirky transitions.
3. Loading states When forms are submitted or content is being fetched, it's important to show users that something is happening. Loading indicators such as spinners help to prevent confusion and reduce perceived wait times.

We’ve found Figma's commenting feature invaluable for solving content-related issues with designers during the build phase, but we also recommend using it for flagging certain aspect of your design before development beings. Here are some things you may want to use comments for:

1. Sharing technical references Taking inspiration from other websites is a great way to ensure your ideas will work in practice, and sharing your inspiration prior to development helps developers accurately bring your vision to life.
2. Asking questions about technical feasibility If you're unsure whether a particular design element can be achieved within budget or technical constraints, Figma comments are a great way to illustrate any issues and collaborate on potential alternatives.
3. Explaining complex interactions Certain aspects of your design may require further clarification, such as animations that trigger on scroll, parallax effects, or multi-step form interactions. These may benefit from a detailed comment explaining the intended behaviour and timing.
4. Highlighting edge-cases Edge cases are scenarios that fall outside the typical use of a design element, such as what happens when a user's name is extremely long, or when an image fails to load. Adding comments to highlight these issues and outline potential solutions helps developers build more robust solutions that gracefully handle unexpected content or user behaviour.

Creating dev-ready designs in Figma isn't just about making things look beautiful – it's about building a bridge between design and development that ensures your vision translates seamlessly into code. By following these tips, you'll save time during the handoff process, reduce miscommunication, and empower developers to build websites that truly reflect your creative intent. Remember, great web design is a collaborative process, and these practices will help you and your development team work together more effectively.