Design Parser

Access Token

To use Design Parser, you’ll need a Figma personal access token.

1. Open the main Figma menu and select Settings

   

   

2. Go to the Security tab and click Generate new token

   

   

3. Configure the token:
   • Enter a Token name
   • Set the expiration/active date
   • Enable all required permissions (check all relevant checkboxes)
   • Then click Generate token

   

   

4. Copy the token immediately and store it somewhere safe

   

   

You won’t be able to view or copy this token again later, so make sure you save it right away.

Design Structure

The cleaner and more structurally accurate your Figma file is, the better the generated HTML structure, Tailwind classes, and overall layout consistency will be. Before running the Design Parser, please ensure that your design file follows the guidelines below.

General Principles:

• Keep the design clean and structured.
• Remove hidden layers and unused frames.
• Avoid unnecessary Auto Layout wrappers that do not represent meaningful HTML structure.
• Ensure layout logic matches expected HTML structure.
• Maintain clear naming conventions.
• Keep layer order consistent with the visual layout.

The Design Parser translates Figma structure into HTML structure. Elements are processed based on their order in the Layers panel, so it should match the visual order on the page.

Main Frame Naming:

Name your main frame with home, landing or page name. The system uses frame names to determine which one becomes index.html.
Examples: home screen, landing page.

Layout Structure & Auto Layout Rules:

Sections and internal elements should primarily use Auto Layout.

Avoid:

• Random grouped elements.
• Absolute positioning (unless truly required).
• Deep unnecessary nesting.

Every Auto Layout wrapper becomes an HTML wrapper. Extra nesting in Figma = extra <div> in output.

Recommended Page Structure:

• Header → single frame or Auto Layout.
• Main → vertical Auto Layout consisting of sections.
  • Each section → vertical Auto Layout with vertical paddings.
  • Each section → contains a Container Auto Layout with all content.
• Footer → single frame or Auto Layout.

Figma structure should mirror expected HTML structure.

Do NOT use identical section names on the same page. The parser generates IDs based on layer names. Duplicate names may cause ID conflicts in output.
Examples: hero-section, section-features.

Sidebar Layouts:

If the page layout includes a sidebar (e.g., main content and a sidebar on the left or right), both the main content area and the sidebar must be wrapped in a single parent frame.

• Main
  • Sidebar
  • Content

Hero Sections & Background Images:

For hero and other sections with full-width background images, avoid wrapping the entire section in Auto Layout if it merges background image and content structure.

Content should be wrapped as Auto Layout, but background image should remain as a separate image layer or separate frame with image fill.

Image Handling Rules:

• If a layer or frame name contains any of the keywords “img”, “image”, “icon”, “ico”, “logo”, “bg”, or “background”, all content within that layer or frame should be used as a single element (single image, not composite layered illustrations/single merged SVG component, not multiple separate vector layers), to prevent splitting.
  Examples: insta-icon, dentist-icon, header-bg, img-services.
• Use unique name for each image for better Parser usage.
• Use high-quality images. Border radius should be applied for the Auto Layout or frame, not for image itself.
• Color overlays are allowed.
• For correct responsive behavior:
  • Wrap image in Auto Layout
  • Set image to Fill Container
  • Crop is allowed if fixed size is required
  • Image fill mode → Fill

  

  

Gradients & Overlays:

• Must match the exact size of the frame.
• Must not overflow section boundaries.
• Should not create unnecessary wrappers.
• Prefer linear gradients over radial gradients.

Radial gradients may produce inconsistent CSS output or require additional custom styling. Linear gradients are more predictable and map more cleanly to CSS/Tailwind.

Tailwind-Compatible Spacing & Typography:

For the best results, use Tailwind’s default scale for:

• Font sizes (https://tailwindcss.com/docs/font-size)
• Line heights
• Padding
• Margins
• Widths / Heights

This allows the parser to use existing Tailwind utility classes instead of generating custom inline styles.

Using non-standard values may reduce output consistency.

Markup & Styling Approach

The markup is fully based on Tailwind CSS: (https://tailwindcss.com/). In most cases, Parser relies entirely on Tailwind utility classes. In rare cases, when complex design elements are involved, Parser generates custom CSS styles. This may apply to:

• Buttons
• Shared containers
• Custom UI elements

However, in the majority of cases, Tailwind utilities are sufficient.

1. Responsive behavior - Parser performs very well with responsive layouts. It typically supports: mobile, tablet, desktop.
2. Grid layout handling - Parser accurately distributes blocks, defines widths and sets spacing between elements.
3. The cleaner and more structured the Figma file is (no unnecessary frames, hidden elements, or nested artifacts), the better the output quality.
4. Image formats - Figma allows exporting images as PNG, SVG, or JPEG. For optimal website performance, it is strongly recommended to convert images to WebP format before final deployment.

Functional Capabilities

1. Parser applies spacing correctly, positions elements properly, handles simple headers and footers very well. It automatically generates responsive functionality such as burger menus for mobile and tablet.
2. Parser performs strongly with basic navigation structures, burger menus, sliders, accordions, standard banners and hero sections.
3. If the design contains up to 15 pages, Parser also generates basic interactive functionality. Minor refinements may still be required.
4. Parser correctly:
   • detects links
   • Applies proper attributes
   • Adds hover and active states
   • Generates correct HTML list structures
5. Parser adapts accessibility features (WCAG 2.2) correctly in approximately 70% of cases.

Known Limitations

1. Parser does not recognize or generate videos and animations. These must be implemented manually.
2. Parser may occasionally ignore bold styling inside body text. This issue does not typically affect headings. Only simple text is affected.
3. Parser currently handles complex custom blocks (such elements often require custom CSS solutions) at roughly 30% accuracy.
4. Parser handles forms well overall, except checkbox inputs and radio button inputs. These currently require full manual refinement.
5. Block shadows are often not rendered accurately. In approximately 90% of cases, shadow styling needs manual adjustment (usually still using Tailwind utilities).
6. If an image includes a dark overlay created via Figma styling, Parser may ignore it: