How to Get the Best Out of Codigma’s Figma Plugin

1) Think like a layout engine

The biggest upgrade you can make is a small mindset shift: Codigma doesn’t “guess” your design intent — it reads your structure. If your layout rules are consistent in Figma, your exported code is usually consistent too.

When exports look messy, the root cause is often one of these: mixed layout rules (Auto Layout + absolute positioning), inconsistent spacing, or layers that aren’t grouped into logical frames.

2) Auto Layout that exports well

Auto Layout is the fastest path to responsive output. It turns your design into clear rules: direction, spacing, alignment, padding, and sizing.

Essential setup (the “safe defaults”)

• Use Auto Layout for containers (even if the container currently has one child).
• Prefer padding on the parent instead of “manual” spacing with random child offsets.
• Use consistent spacing (8 / 12 / 16 / 24 / 32) so layouts feel systematic.
• Choose fill/hug intentionally: use “Fill container” for flexible items, “Hug contents” for content-sized items.
• Avoid mixed rules inside the same frame (don’t half-Auto-Layout a section and manually position the rest).

A simple structure that scales

When you’re unsure, this pattern usually exports cleanly and stays maintainable:

3) Naming and structure that keeps code readable

Clean exports aren’t only about layout — they’re also about readability. The names you choose in Figma often become the first version of your component structure.

What good naming looks like

• Name frames by purpose: Header, PricingCard, FeatureList, Sidebar.
• Name layers by role: Title, Subtitle, Icon, PrimaryButton.
• Avoid “Frame 123 / Group 9” for anything you’ll export more than once.
• Keep hierarchy shallow: too many nested groups often means the UI is over-wrapped.

4) Components, variants, and a tiny design system

If you want consistent exports across multiple screens, don’t start with screens. Start with repeatable building blocks: buttons, inputs, cards, badges, list items.

Use components for anything repeated

• Buttons (primary / secondary / disabled)
• Form elements (input, dropdown, checkbox)
• Cards (product, feature, testimonial)
• Navigation (top bar, tabs, sidebar items)

Variants help code match real UI states

Variants are great for states like default, hover, active, disabled, or size differences like sm, md, lg. When your Figma component already contains your real states, your export workflow becomes much smoother.

5) What to select in Figma (and what to avoid)

Selection matters because it defines the boundaries of what Codigma should generate. In most cases, you’ll get the cleanest result by selecting a “complete unit”.

Best selections

• A full screen frame (when the screen is stable and well-structured)
• A reusable component (button, card, modal, navbar)
• A section (hero, pricing table, feature grid) that can stand alone

Selections that often cause messy output

• Partial UI pieces (half a card, a label without its container)
• Overlapping layers that rely on manual positioning
• Hidden / “for later” layers inside the selection
• Text without proper bounds (especially when alignment depends on invisible spacing)

6) A simple export workflow you can repeat

Here’s a workflow that works well for both small components and full screens. It’s designed for speed: export, review, fix structure, export again.

1. Pick one “unit” (component, section, or full screen) and clean it first.
2. Fix layout rules: Auto Layout, padding, spacing, and fill/hug behavior.
3. Normalize naming so the output stays readable.
4. Run Codigma on that selection and review the result.
5. Iterate once: adjust the frame structure instead of “patching” in code immediately.
6. Scale up: move from components → sections → full pages.

7) Common issues and quick fixes

“My spacing looks off”

• Check if spacing is coming from padding on parent (preferred) vs random child offsets.
• Make sure frames use consistent gap values instead of mixed numbers.

“Items don’t stretch the way I expect”

• Verify Fill container vs Hug contents on the correct layers.
• Make sure the parent frame has a clear width rule (fixed, fill, or constraints).

“The exported hierarchy is too deep”

• Remove unnecessary wrapper frames that don’t add layout meaning.
• Avoid mixing groups and frames randomly — prefer frames with clear layout rules.

“The code is hard to read”

• Rename key frames and layers (Header, Card, Title, Button).
• Convert repeated UI into real components/variants before exporting again.