Setting Up Your Figma Design File for High Quality Code

A well-structured design file helps Locofy generate good quality code.

This guide provides actionable tips to optimize your design files, making them developer-friendly and easier to implement. Following these best practices can help reduce time spent on debugging, refactoring, and communication.

Signs of a Poorly Structured Design

One quick way to check if your designs are well-structured is to see how well they adapt to different screen sizes. Try reducing the width of your design and observe if the elements inside adjust accordingly.

If they are not responsive, it’s a sign of structural issues. Here are some common problems to look out for:

• Poor Grouping → Makes it hard to select and align elements, leading to inconsistent gaps and constraints.
• No Auto Layout → Without Auto Layout, elements must be manually adjusted, making it difficult to maintain consistency, spacing, and responsiveness across different screen sizes.
• Fixed Width & Height → Elements with fixed sizes cannot adjust to different screen sizes, breaking responsiveness.
• Overlapping Elements → Elements overlap due to improper spacing and alignment.
• Redundant Frames → Unnecessary layers that add complexity without any visual contribution.
• Missing Constraints → Absolute elements without proper constraints can cause the layout to break when the frame size changes.

Steps to Optimise Your Designs

1. Group Your Layers

This is the starting & most important step of your optimisation process. It establishes relationship between elements & allows you to apply further properties correctly such as Auto Layout and consistent gaps for cleaner, responsive code.

Which Elements Should Be Grouped Together?

• Group elements that move together.
  Example: A button and its text should be grouped so they stay aligned.
• Each section of your design should have its own group.
  Example: The navigation bar, footer, or card components should each be in their own group.
• Avoid grouping unrelated elements.
  Example: A button should not be in the same group as a random image on the page.

Steps to Clean Up Your Layers

1. Group related elements for easier selection and alignment.

   • Select related elements (e.g., header, footer, buttons, cards).
   • Right-click and select Group or use ⌃ + G (⌘ + G on Mac).

2. Remove unnecessary layers to keep your file clean.

   • Right-click on unused layers and select Delete or press Delete on your keyboard.

3. Use Frames instead of Groups for better organisation.

   • Select the elements you want to contain in a frame.
   • Press ⌃ + ⌥ + G (⌘ + ⌥ + G on Mac) to convert a group into a frame.

2. Apply Auto Layout

Auto Layout helps your design stay responsive by automatically adjusting spacing, alignment, and positioning when elements change in size. Instead of manually moving things, Auto Layout does the work for you.

• Direction & Wrap → Align elements vertically or horizontally. Enable Wrap to move items to a new row when they don’t fit.
• Sizing → Choose between Hug Contents, Fixed, or Fill Container to control how elements resize.
• Min-Max Width & Height → Set size limits to prevent elements from becoming too small or too large.

How to Apply Auto Layout

1. Select the elements you want to organise.
2. Add Auto Layout → Click the Auto Layout button in the right panel or use ⇧ + A .
3. Set Direction → Choose horizontal or vertical; enable Wrap if needed.
4. Adjust spacing & alignment in the right panel.
5. Choose the right resize setting:
   • Hug Contents → Stays as small as possible, expanding only when needed.
   • Fixed Width/Height → Remains the same size regardless of content.
   • Fill Container → Expands to fit available space.

Tip: For Wrap to work properly, set a minimum width for elements. This prevents them from shrinking too much and ensures they break into a new row when needed.

3. Ensure Consistent Gaps & Alignment

Maintaining consistent spacing and alignment is crucial for a clean and professional design. Auto Layout helps maintain the uniformity.
Avoid manually aligning items and instead use Auto Layout to align elements for better precision.

Maintain Consistent Gaps & Padding

• Set a uniform gap between elements.
• Apply padding inside frames to keep elements properly spaced from the edges.
• Use consistent spacing values (e.g., 8px, 16px, 24px) to create a structured layout.

Align Elements Properly

• Use Auto Layout alignment settings (left, center, right, top, middle, bottom) to ensure elements are positioned correctly.
• Set “Fill Container” when elements need to stretch and align within their frame.

Tip: Wherever possible, use gaps instead of padding for better responsiveness.

4. Use Background Images Instead of Absolute Ones

Using fill or background images keeps your design flexible and responsive, unlike absolute images that remain fixed in size and position.

This approach ensures images scale properly without distortion and align consistently within frames.

Steps to Apply an Image as a Fill

1. Select a frame or shape where you want to add an image.
2. In the right panel, go to the Fill section and click the “+” icon.
3. Click on the color preview, then switch to Image in the Fill settings.
4. Adjust the object fit mode (e.g., "Fill," "Fit," or "Tile") for the best result.
5. Delete any absolute images that were manually placed to keep your layers clean.

Tip: If you need to ensure the entire image is visible without being cut off, use "Fit" mode instead by going back to the Fill settings and changing "Fill" to "Fit." Adjust scaling based on your design needs.

5. Use Strokes for Dividers & Separators

Strokes are a cleaner and more efficient way to create dividers instead of using rectangles or lines. They keep your design lightweight and does not generate unnecessary code.

Steps to Apply Strokes to Create Borders

1. Select the element where you want the divider (e.g., a section, card, or menu item).
2. In the right panel, find the Stroke section and click "+" to add a stroke.
3. Set the Stroke Position to Bottom to create a divider effect.
4. Match the stroke color to your existing divider rectangle for a seamless look.
5. Delete the original rectangle used as a divider to simplify your layers.

Tip: For a softer effect, set the stroke opacity slightly lower (e.g., 50–70%).

6. Use Paragraph Spacing Instead of Extra Lines

Using paragraph spacing ensures clear separation between text blocks without unnecessary line breaks.

Steps to Set Correct Spacing

1. Select the text box containing your paragraph.
2. In the right panel, find the Text section.
3. Look for the Paragraph Spacing option—represented by an "A" icon with two horizontal lines (one above and one below).
4. Enter a spacing value (e.g., 8px, 12px, or 16px) to control the gap between paragraphs.
5. Adjust Line Height (Leading) to improve readability (typically 120%–150% of the font size).

Tip: Use separate text blocks when different styles are needed. For example, a headline is usually bold and larger, while a subtitle is smaller and lighter. Keeping them separate makes adjustments easier.

7. Create Figma Components for Reusable Elements

Figma Components help maintain consistency and reduce redundancy by allowing you to reuse UI elements across multiple screens. Instead of manually updating each instance, you can edit the main component, and all linked elements will update automatically.

We recommend applying Auto Layout to your elements before converting them into a Figma component so they can be responsive when you reuse them in different designs.

Steps to Create & Use Figma Components

1. Select a UI element (e.g., button, card, navbar) that you want to reuse.
2. Right-click and select "Create Component" or use ⌃ + ⌥ + K (⌘ + ⌥ + K on Mac).
3. Find your component in the Assets panel and drag it onto your design to reuse it.
4. Customize instances without affecting the main component (e.g., changing text or colors).

Tip: Apply Auto Layout before converting elements into components to make them responsive when reused in different designs.

8. Clear Layer Naming

Naming layers properly in Figma keeps your design organised and ensures cleaner class and component names when exporting to code.

Steps to Rename Layers

1. Click on a layer in the Layers Panel.
2. Right-click and select "Rename" or double-click the layer name to edit it.
3. Use a descriptive name (e.g., "header-logo" instead of "Rectangle 1").
4. Follow a consistent naming format, such as component-name/element-name (e.g., "button/primary").

Detailed Video Walkthrough

This video covers all the steps above and additional tips to optimise your designs for high-quality code generation with Locofy.