diff --git a/docs/design-system/figma-design-to-code-plugin/annotation-glossary.md b/docs/design-system/figma-design-to-code-plugin/annotation-glossary.md new file mode 100644 index 0000000..5be8323 --- /dev/null +++ b/docs/design-system/figma-design-to-code-plugin/annotation-glossary.md @@ -0,0 +1,319 @@ +--- +id: annotation-glossary +title: Annotation Glossary for the Design to Code Plugin +sidebar_label: Annotation Glossary +last_update: { author: "Mansi Raj" } +--- + +--- + +Annotations are labels you attach to layers in your Figma design so the plugin knows what each layer is — a button, a checkbox, a text field, a table row, and so on. The plugin uses these labels to turn your design into working code, so the better the annotations, the better the generated app. + +You don't have to annotate everything by hand. When you run the plugin, an AI model reads your design and applies annotations for you as a first pass. Your job is to review its work — check each label, correct anything that looks wrong, and fill in anything it missed. This guide is your reference for that review: use it to confirm the AI picked the right label for each element, and to look up the correct label when you need to make a change. + +The Review Annotations panel lists every layer alongside the label the AI assigned. Check **Needs review** to filter down to layers the AI flagged as low-confidence: + +
+ Review Annotations panel listing Figma layers with their AI-assigned labels, such as page_header and button + + Review Annotations panel filtered to Needs review, showing layers flagged with a low-confidence warning icon +
+ +You don't need to know anything about code to use this guide. For each element on your screen, look through the list below, find the one that visually matches, and apply that annotation to the smallest layer that fully covers the element. If something on your design doesn't clearly match anything here, it's fine to skip it — un-annotated layers are just treated as plain containers. + +**A quick rule of thumb:** annotate by what the component is, not by what the layer is called in Figma. A layer might be named "Card 3" but actually be a checkbox — it should still be annotated as **Checkbox**. + +Contents + +1. [Inputs & Controls](#inputs--controls) +2. [Navigation](#navigation) +3. [Layout & Content](#layout--content) +4. [Media & Misc](#media--misc) +5. [Common mistakes](#common-mistakes) + +## Inputs & Controls + +### Button + +A clickable action element. Includes labelled buttons AND icon-only buttons. + +- **Tag the outer clickable frame.** + - **Bare text link with no wrapper frame** (header/footer link) — tag the TEXT node itself. No Button label child needed. + - **Bare icon with no wrapper frame** (standalone icon-only button) — tag the icon node itself. No Button icon child needed. +- **Never a raster image inside.** If the visual is a photo/illustration, it's not a button — leave it or tag as **Image**. +- **At most one text node.** Two texts (title + subtitle) means it's not a button — probably a card. + +Children to tag inside: + +| Child | When | +| ------------ | -------------------------------------------------------- | +| Button label | TEXT — the button's caption. Skip for icon-only buttons. | +| Button icon | Vector icon inside the button. | + +### Checkbox + +- Annotate **every** visible checkbox — including "unchecked" states. + +| Child | Required | What | +| ---------------- | -------- | ---------------------------------------------------------------- | +| Checkbox label | Yes | TEXT beside the box. | +| Checkbox control | Yes | The checkbox control — the square area (with or without a tick). | +| Checkbox icon | No | The tick glyph, if it's a separate node inside the plate. | + +### Toggle + +- Tag **only the pill control**, not a wider row that pairs it with a label. +- The label beside a toggle is free-floating text — leave it un-annotated. + +| Child | When | +| ----------- | ------------------------------- | +| Toggle icon | Optional icon inside the thumb. | + +### Text field + +Single- or multi-line text input. + +- Tag the **outer wrapper frame** that visually bundles the input box together with its label and any supporting text — the whole text-field component. If there is no wrapper and the input box is standalone, tag the input box frame itself. + +| Child | Required | What | +| ---------------------- | -------- | ----------------------------------------------------- | +| Text field input | Yes | The FRAME that visually is the input box. | +| Top label | No | Text ABOVE the input, as a separate element. | +| Floating label | No | Text sitting ON/INSIDE the border. | +| Text field placeholder | No | Hint / current value text inside the box (TEXT only). | +| Helper text | No | Helper text below the input (TEXT only). | +| Text field icon | No | Leading or trailing icon in or beside the input. | + +### Dropdown + +Select / combobox. **Only tag as Dropdown if a chevron icon is visible.** No chevron — tag as **Text field** instead. + +| Child | What | +| ------------------------- | ----------------------------------------- | +| Dropdown input | The FRAME that visually is the input box. | +| Dropdown label (top) | Label ABOVE the input. | +| Dropdown label (floating) | Label inside/overlapping the input. | +| Dropdown placeholder | "Select…" hint inside the box. | + +### Date picker + +Text field with a calendar affordance. + +| Child | What | +| ----------------- | -------------------- | +| Date picker label | The floating label. | +| Date picker input | The input box FRAME. | + +### Search + +Text input **prefixed with a magnifying-glass icon**. + +| Child | What | +| ------------------ | ------------------------ | +| Search placeholder | Placeholder text inside. | + +### Radio group + +Group of radio circles where exactly one is selected. Each option is **just a circle + one label**. + +- If options look like cards (border, fill, shadow, extra text), it's **not** a Radio group — use **Card list** instead. + +| Child | Required | What | +| --------------------- | -------- | ---------------------------------------------------- | +| Radio item | Yes | Every unselected option (frame with circle + label). | +| Radio item (selected) | No | The one selected option. | +| Radio circle | Yes | The visible ○ / ● circle inside an item. | +| Radio label | Yes | The TEXT label inside an item. | + +### Slider + +Track with one or two draggable thumbs. No children to annotate. + +### Progress bar + +A horizontal filled bar showing percent (loading, progress). **Not** for stepper tracks or numbered steps. + +### Segmented button + +Horizontally joined toggle segments acting as a single picker (like a filter chip strip). + +- Use for **tab-shaped wizards / steppers** — a strip of tab-like steps that progress through a flow. +- Use for **tab strips whose header row has non-tab siblings** — e.g. the strip sits alongside a page title, action buttons, or search inside the same frame (not just a content pane). +- If the strip is a pure tab bar with only a content pane as its sibling, use **Tab** instead. + +| Child | Required | What | +| ----------------------- | -------- | ------------------------------------------------------------ | +| Segment item | Yes | Every unselected segment. | +| Segment item (selected) | No | The selected segment (exactly one). | +| Segment label | No | TEXT inside a segment (add on all segments if using labels). | +| Segment icon | No | Icon inside a segment (add on all segments if using icons). | + +## Navigation + +### Page header *(web)* + +The top strip of the page containing logo/title + nav + actions/avatar. + +- **Exactly one** per section. +- After tagging the header, keep annotating buttons, search, avatar, etc. **inside** it — treat the interior as normal. + +### Tab *(web)* + +Horizontal strip of tab headers where one is active. + +- Tag the **narrow strip-only** frame. +- **Never** tag a frame that wraps both the tab strip AND the content area below. +- If the strip sits inside a header alongside a title or action button (no content frame as its sibling), use **Segmented button** instead. + +| Child | Required | What | +| ------------------- | -------- | ----------------------------- | +| Tab item | Yes | Every unselected tab. | +| Tab item (selected) | No | The active tab (exactly one). | +| Tab label | No | Tab caption TEXT. | +| Tab icon | No | Icon inside a tab. | + +### Tab content pane *(web)* + +The pane content shown below the tab strip. Tag the outermost container that holds all the pane content, even if it contains other tagged widgets inside. + +### Bottom nav *(mobile)* + +Mobile bottom bar — persistent strip of icon/label tabs at the bottom. + +| Child | Required | What | +| -------------------------- | -------- | -------------------------- | +| Bottom nav item | Yes | Every unselected tab cell. | +| Bottom nav item (selected) | No | The active tab cell. | +| Bottom nav item label | No | Tab TEXT. | +| Bottom nav item icon | No | Tab icon. | + +### Bottom nav wrapper *(mobile)* + +The outer FRAME around a Bottom nav that gives it its floating look (extra padding, rounded outer corners, shadow). + +:::warning +**Required for floating bottom bars.** If the Bottom nav visually floats above the content — rounded corners, drop shadow, side insets — you must annotate this wrapper. Without it, the bar renders flush against the screen edges and loses the floating appearance. +::: + +Skip only when the bar sits fully flush with the screen edges (no wrapper, no insets, no shadow). + +### Left nav (rail) *(web)* + +**Narrow** vertical nav — icons stacked above labels, everything center-aligned. + +### Left nav (drawer) *(web)* + +**Wide** vertical nav — icons beside labels, items left-aligned. + +Both share children: + +| Child | Required | What | +| ----------------------- | -------- | ---------------------------------------- | +| Nav item | Yes | Every unselected nav entry. | +| Nav item (selected) | No | The active nav entry. | +| Nav item label | No | TEXT inside an item. | +| Nav item icon | No | Icon inside an item. | +| Nav logo | No | Brand logo at the top. | +| Nav button | No | Standalone action button inside the nav. | +| Nav button label / icon | No | Its label / icon. | + +### Breadcrumb *(web)* + +Chain of clickable path segments joined by `>`, `/`, or arrows. + +| Child | What | +| ---------------- | ------------------------ | +| Breadcrumb item | Container for one crumb. | +| Breadcrumb label | TEXT inside a crumb. | +| Breadcrumb icon | Icon inside a crumb. | + +## Layout & Content + +### Data table *(web)* + +A grid: header row + data rows + optional pagination/search. + +**When to tag the root frame as Data table:** only when that frame's children are **just** the header, rows, and optional pagination/search. If the frame also holds a detail panel, edit form, empty-state art, action bar, or ANY other content, **don't tag the root** — annotate only the inner nodes below and the tooling assembles the table from them. + +| Child | Repeats | What | +| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | +| Table column header | Yes | Each column header cell. Tag the frame OR a bare TEXT header. Skip checkbox headers. | +| Table select-all header | No | The "select all" header cell (top-left, if present). | +| Table row | Yes | Each data row frame. | +| Table cell | Yes | Every plain text data cell. If it's an avatar+text cell, ALSO tag the avatar inside as Table cell avatar (first row only). | +| Table cell avatar | No | Avatar image inside an avatar+label cell — **first row only**. | +| Table cell (badge) | Yes | Cell containing a colored badge/chip. Use instead of Table cell. | +| Table cell (button) | Yes | Cell containing an action button. Use instead of Table cell. | +| Table cell (toggle) | Yes | Cell containing a toggle. Use instead of Table cell. | +| Table pagination | No | The pagination control frame. | + +:::tip +Wrap the header row and data rows in a single, meaningfully named parent frame (e.g. "Data Table") instead of leaving them as loose siblings. See [Semantic Grouping](./design-guidelines.md#semantic-grouping) in the design guidelines for why this matters. +::: + +### List + +**Vertical** list — items stacked top-to-bottom. + +- Tag the **outer wrapper frame** that contains all the items. Every direct child frame is treated as one repeating item automatically — no per-item annotation needed. +- Use when the wrapper has 3+ equal-width child frames stacked vertically. + +:::tip +Group the repeating item frames under one meaningfully named parent frame rather than leaving them as loose siblings. See [Semantic Grouping](./design-guidelines.md#semantic-grouping) in the design guidelines for why this matters. +::: + +### Card list + +**Horizontal / grid** list — items laid out left-to-right, may wrap. + +- Tag the **outer wrapper frame** that contains all the cards. Every direct child frame is treated as one repeating card automatically — no per-card annotation needed. +- Use when the wrapper has 2+ equal-height child frames arranged horizontally or in a grid. + +:::tip +Group the repeating card frames under one meaningfully named parent frame rather than leaving them as loose siblings. See [Semantic Grouping](./design-guidelines.md#semantic-grouping) in the design guidelines for why this matters. +::: + +### Form + +Container grouping input widgets (Text field, Dropdown, etc.). No children — the inner widgets are annotated independently. + +## Media & Misc + +### Icon + +Standalone icon glyph (vector shapes). + +- Tag the **smallest frame/group/instance** that contains all vectors of the glyph. +- **Never** tag an individual vector when it has vector siblings that are part of the same glyph. + +### Image + +Standalone raster/bitmap image (photo, illustration). + +- Use when the node is visibly a photo or lossy bitmap, not a clean vector glyph. Use for hero sections also. + +### Avatar + +User avatar — a **circular** frame containing at most a monogram or icon. + +- Tag the smallest circular avatar disc. +- **Never** tag a wider "user chip" that includes the name TEXT. + +| Child | What | +| ----------- | ------------------------------------- | +| Avatar text | Single monogram TEXT inside the disc. | +| Avatar icon | Icon inside the disc. | + +### Divider + +Thin horizontal or vertical rule separating content. No children. + +## Common mistakes + +- **Tagging a card as Button** — a card has multiple text nodes (title + description). Only tag as Button if there's one text (or none, for icon-only). +- **Tagging a container that includes extra content** — e.g., annotating the whole Data table / List / Tab wrapper when it also has a header, action bar, or unrelated frames alongside. Tag only the inner nodes in that case. +- **Tagging a user chip as Avatar** — Avatar is only the circular avatar disc. The name beside it stays un-annotated. +- **Tagging a bitmap as Icon or Button icon** — those are for vectors only. Photos/illustrations go under Image. +- **Skipping some checkboxes / text fields** — always tag EVERY visible instance of the same widget type on screen. Don't tag one and skip another. +- **Confusing Tab with Segmented button** — if the strip has a large content pane as a sibling below/beside it, it's Tab. If it's a compact filter strip inside a header with no content pane, it's Segmented button. +- **Missing Text field input** — the input box FRAME is mandatory on every Text field. Never tag a TEXT node as Text field input. diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/frame-naming-diagram.svg b/docs/design-system/figma-design-to-code-plugin/assets/img/frame-naming-diagram.svg new file mode 100644 index 0000000..64d1455 --- /dev/null +++ b/docs/design-system/figma-design-to-code-plugin/assets/img/frame-naming-diagram.svg @@ -0,0 +1,42 @@ + + + + Incorrect + Correct + + + + + 1Header + ✕ + + + $Section! + ✕ + + + 2ndRow + ✕ + + + Starts with a number or symbol — + breaks CSS class/id naming rules + + + + + header + ✓ + + + section + ✓ + + + second-row + ✓ + + + Starts with a letter; hyphen/underscore + used for spaces + diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/hidden-elements-page-bounds-diagram.svg b/docs/design-system/figma-design-to-code-plugin/assets/img/hidden-elements-page-bounds-diagram.svg new file mode 100644 index 0000000..e7711b3 --- /dev/null +++ b/docs/design-system/figma-design-to-code-plugin/assets/img/hidden-elements-page-bounds-diagram.svg @@ -0,0 +1,123 @@ + + + + Incorrect + Correct + + + + Page bounds + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + List items below the page bounds + are hidden and fail to export + + + + Page bounds (increased) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Increasing the page height includes + every list item for export + diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/images-as-fills-diagram.svg b/docs/design-system/figma-design-to-code-plugin/assets/img/images-as-fills-diagram.svg new file mode 100644 index 0000000..7e22837 --- /dev/null +++ b/docs/design-system/figma-design-to-code-plugin/assets/img/images-as-fills-diagram.svg @@ -0,0 +1,37 @@ + + + + + Incorrect + + + + Frame + + + Image (Component) + + + + + + + + + Extra component layer wraps the image + + + Correct + + + + Frame — Fill: Image + + + + + + + + Image applied directly as the frame's fill + diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-needs-review.png b/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-needs-review.png new file mode 100644 index 0000000..034bfa1 Binary files /dev/null and b/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-needs-review.png differ diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-panel.png b/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-panel.png new file mode 100644 index 0000000..fe0a8be Binary files /dev/null and b/docs/design-system/figma-design-to-code-plugin/assets/img/review-annotations-panel.png differ diff --git a/docs/design-system/figma-design-to-code-plugin/assets/img/semantic-grouping-diagram.svg b/docs/design-system/figma-design-to-code-plugin/assets/img/semantic-grouping-diagram.svg new file mode 100644 index 0000000..64a366f --- /dev/null +++ b/docs/design-system/figma-design-to-code-plugin/assets/img/semantic-grouping-diagram.svg @@ -0,0 +1,48 @@ + + + + Incorrect + Correct + + + + + Screen (frame) + + + + flat siblings + + + Header Row + + + Cell Row + + + Footer (unrelated) + + Header Row and Cell Row sit as flat siblings + alongside an unrelated Footer — no semantic unit + + + + Screen (frame) + + + + Data Table + + + Header Row + + + Cell Row + + + + Footer + + A new Data Table frame groups the related rows; + Footer remains a sibling outside it + diff --git a/docs/design-system/figma-design-to-code-plugin/design-guidelines.md b/docs/design-system/figma-design-to-code-plugin/design-guidelines.md index ead5f00..83ea76d 100644 --- a/docs/design-system/figma-design-to-code-plugin/design-guidelines.md +++ b/docs/design-system/figma-design-to-code-plugin/design-guidelines.md @@ -1,101 +1,78 @@ --- -id: design-guidelines -title: Creating Design to Code-Friendly Designs in Figma -sidebar_label: Design Guideline -last_update: { author: "WaveMaker" } +id: design-guidelines +title: Creating Design to Code-Friendly Designs in Figma +sidebar_label: Design Guideline +last_update: { author: "Pronoy Roy" } --- --- -When designing in Figma for the WaveMaker Design to Code plugin, following these guidelines will help ensure that the generated code accurately reflects the design. Keeping these points in mind will lead to an expected output with minimal adjustments in the development phase. +When designing in Figma for the WaveMaker Design to Code plugin, following these guidelines will help ensure that the generated code accurately reflects the design, reducing the number of manual adjustments needed in the development phase. ## Proper Use of Auto Layout -Auto Layout organizes elements into responsive hierarchies, ensuring better behavior during conversion. This is especially important in complex designs. To simplify this process, try Figma’s [Suggest Auto Layout](https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design#suggest) feature. - -The image below shows where to find Figma Auto Layout. If it's not there, search the help menu for Auto Layout and select Add Auto Layout. +Auto Layout organizes elements into responsive hierarchies, ensuring better behavior during conversion. This is especially important in complex designs. To simplify this process, try Figma's [Suggest Auto Layout](https://help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design#suggest) feature. If Auto Layout isn't already applied, you can find it in the Figma toolbar shown below, or by searching the help menu for "Auto Layout." ![finding auto layout in figma canvas](./assets/img/find_autolayout.png) -Below are some of the suggestions on using auto layout. +Below are some suggestions on using auto layout: -- When a child element needs to match the width of its parent frame, set its width to "Fill". Example: In the image below, the Text Field width is set to "Fill," ensuring it occupies the entire width of the parent frame (blue border). +- When a child element needs to match the width of its parent frame, set its width to "Fill." Fixed widths are treated as fixed sizes and will not adjust to different screen sizes. For any extra space around the element, use the padding feature in Figma. ![fill width example](./assets/img/form_fill_width.png) -Fixed widths are treated as fixed sizes and will not adjust to different screen sizes. - -For any extra space around the element, please use the padding feature from figma. - -- For certain elements on a page, height and width are dynamically calculated based on the screen resolution. This applies to components like navigation bars, containers holding lists of cards, etc. Since these containers adapt to screen size, the gap between their child elements cannot be fixed and should be set to **Auto** instead. The image below illustrates this scenario. +- For elements whose height and width are dynamically calculated based on screen resolution (such as navigation bars or containers holding lists of cards), set the gap between child elements to **Auto** instead of a fixed value. A fixed gap will be treated as intentional spacing and maintained regardless of screen size when converting to code. ![gap auto width example](./assets/img/auto_exmpl.png) -A fixed gap will be considered as intentional spacing and will be maintained regardless of screen size when converting to code. - -- If the parent frame has only one child frame, set the child layout to either center-center or top-center. This ensures proper alignment and structure. The examples below highlight child frames (pink border) aligned in the center within parent frames (blue border). - -![examples of single child alignment inside frame with auto layout](./assets/img/one_child.png) - -![prefered alignments for single child frames](./assets/img/alignment_center_top.png) - -## Preserve UI Kit Component Structure and Naming - -Avoid modifying the structure or name of components in a UI kit, as these changes can lead to issues during code generation. If a component’s structure is altered, the plugin may still recognize it, but the corresponding code will not be generated. - -## Instance Properties - -Ensure instance properties are applied at the correct level in the tree structure, not just at the top level. -For example, in the first image below, the background color is applied at the topmost layer of the Tab Component instance. However, in the original UI kit, it should be applied at the second layer (State Layer), as shown in the second image. - -![example of incorrect application of instance property](./assets/img/properties_wrong_border.png) - -![example of correct application of instance property](./assets/img/properties_right_border.png) +- The use of hug, fill, min and max width and height is highly encouraged as they will make your design and code outputs truly responsive. ## Avoid Unnecessary Children -Minimize nested frames or groups whenever possible. For example: Instead of adding a rectangle inside a frame for background image, directly apply it to the frame itself. +Minimize nested frames or groups whenever possible. For example, instead of adding a rectangle inside a frame to hold a background image, apply the image directly to the frame's Fill property. + +**Incorrect** — a separate rectangle inside the frame holds the background image: ![example of unnecessary child element](./assets/img/nested_child_wrong.png) -![example of how to avoid unnecessary child element](./assets/img/nested_child_right.png) +**Correct** — the background image is applied directly to the frame's Fill property: -In the first image above, notice the Fill property of the frame—no background is applied directly to it. Instead, a separate rectangle inside the frame holds the background image, which is incorrect.In the second image, the Fill property of the selected frame directly contains the background image, which is the correct approach. This ensures a cleaner structure and proper rendering in the generated code. +![example of how to avoid unnecessary child element](./assets/img/nested_child_right.png) As a rule of thumb, if you're creating a unit solely to add a single property, try applying that property to the parent element instead. ## Images as Fills -Do not turn images into components. Instead, use images as fills inside frames or rectangles. - -## Vectors for Icons Only - -Use vectors exclusively for icons and avoid using them for other design elements. If you are using vectors, ensure they are flattened into a single shape to prevent rendering issues. - -## Logos +Do not turn images into components. Unlike components, images aren't reused as repeatable units, so wrapping them as components misleads the plugin's understanding of what's actually repeatable and results in unnecessary frames being generated. Instead, use images as fills inside frames or rectangles. -Use images or SVGs for logos. Include the word logo in the name. If logos are components, ensure the component name also contains the word logo. - -This is important because WaveMaker projects store logos in a separate folder, and including "logo" in the name ensures they are correctly identified and placed. It also helps with better file management and organization within the project. +![diagram comparing an image wrapped as a component versus an image applied as a frame fill](./assets/img/images-as-fills-diagram.svg) ## Color Management -Use colors from local variables or local styles. Do not apply colors without first defining them in local variables or styles. +WaveMaker Design to Code strictly follows the designer's intent, and this principle extends directly to how colors are handled in the generated code. If a designer defines a color as a local variable and applies it consistently across the design, particularly within components, that variable is preserved and translated into a corresponding CSS variable in the final code. + +However, if a designer applies a color's hex code directly to a layer instead of referencing a variable, the generated code will reflect that hex code as a literal value rather than a variable. In this case, none of the benefits of using variables carry over to the output. -Always use the variables provided in the UI Kit to maintain consistency. If needed, you can modify colors in the Variables pane, ensuring a well-structured and cohesive theme. +This has two practical implications. First, supporting multiple themes (such as light and dark mode) will only work correctly for colors that were defined and applied as variables; hardcoded hex values will not respond to theme changes. Second, if you later want to update your design's color palette, colors defined as variables can be updated in a couple of clicks from the styles workspace, while hardcoded hex values must be located and replaced manually, layer by layer. ![example correct way of using colors](./assets/img/proper_use_color.png) ## Figma API Issue with Hidden Elements -If a vector, image, or logo exceeds the defined page bounds, Figma may fail to export the “hidden” element as an SVG. To resolve this, increase the page height in Figma to include the element. +If a vector, image, or logo exceeds the defined page bounds, Figma may fail to export the "hidden" element as a picture. To resolve this, increase the page height in Figma to include the element. You do not need to fix the height of the screen to show scrollability — the prototype feature of Figma works well in such a scenario. + +![diagram comparing an element clipped by page bounds versus page bounds increased to fully contain the element](./assets/img/hidden-elements-page-bounds-diagram.svg) ## Frame Naming -Avoid naming frames with numbers or special characters at the beginning. These names are used for CSS classes and ids, and CSS naming rules must be followed. For example, start frame names with letters, use hyphen `-` or underscore `_` for spaces, etc. [Learn more about CSS naming conventions](https://medium.com/free-code-camp/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849) +Naming frames clearly and descriptively helps both users and the AI/LLM recognize components and sections more accurately, which leads to better code output. Avoid naming frames with numbers or special characters at the beginning, since these names are used for CSS classes and ids, and CSS naming rules must be followed. Start frame names with letters, and use a hyphen `-` or underscore `_` for spaces. [Learn more about CSS naming conventions](https://medium.com/free-code-camp/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849). + +![diagram comparing frame names that break CSS naming rules versus valid frame names](./assets/img/frame-naming-diagram.svg) + +## Semantic Grouping -## Avoid Wrap Property in Auto Layout +When a section contains repeatable or related elements, group them under a meaningfully named parent frame rather than leaving them as loose siblings. For example, if you have a data table header row and one or more data table cell rows, wrap them together in a parent frame named something like "Data Table." This gives the AI/LLM a clear semantic unit to recognize instead of a flat list of unrelated rows. -Avoid using the Wrap property in Figma's Auto Layout. While it is supported, it can lead to inconsistent and inaccurate sizing. This happens because the Wrap property requires the parent element to have a fixed width, which prevents it from dynamically adjusting based on different screen resolutions. +This isn't strictly necessary, and the plugin can often still generate usable code without it. But semantic grouping goes a long way toward improving code quality, since it helps the plugin correctly infer the relationship between elements and generate more accurate, better-structured components. It's a small extra step in the design phase that can save significant time during development. -By following these guidelines, designers can ensure that Design to Code accurately translates their Figma designs into WaveMaker-compatible code, reducing the need for manual adjustments. +![diagram comparing loose sibling rows versus rows grouped under a meaningfully named parent frame](./assets/img/semantic-grouping-diagram.svg) diff --git a/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx b/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx index 18fc625..bd69818 100644 --- a/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx +++ b/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx @@ -13,16 +13,134 @@ WaveMaker announces the release of WaveMaker AI 1.0.0 Beta. This release is inte For details about the technology stack upgrades, refer to [Technology Stack](/tech-stack). +## 1.0.0-BETA-RC7 + +*Release date: 27 July 2026* + + + + + - ### Cancel a running conversation in AI chat + + You can now cancel an AI chat conversation while it's in progress, letting the agent finish whatever it's currently doing — generating a response, running a tool, or delegating to a sub-agent — before stopping. + + - ### Edit a previously sent prompt in AI chat + + You can now edit a prompt you've already sent in an AI chat conversation and resubmit it, replacing all messages, agent actions, and file changes made after that point, along with any images or chat suggestions carried over from the original prompt. + + + + #### Design to Code Release Notes + +
+ + - ### All Design Systems are Welcome + + A brand-new Annotation Flow brings code generation to any design system by leveraing AI for component detection. + + - ### Smarter Variants + + More design tokens, more flexibility, more customisation across component variants. + + - ### Sync, Don't Duplicate + + Add new pages to an existing project instead of spinning up a new project each time. + + - ### Truly Flexible Hug & Fill + + Real flexbox behaviour at every level, with no more hard-coded 100% width or height. See [Design Guidelines](../../../design-system/figma-design-to-code-plugin/design-guidelines#proper-use-of-auto-layout) + + - ### Wizards Stay Together + + Prototype-linked wizard pages are automatically merged into a single wizard. + + - ### Native SVGs + + SVG is now a first-class citizen across all widgets, with no font-icon workarounds needed. + + - ### Better Mobile Fonts + + Full support for `.woff2` and `.ttf` fonts on mobile builds. + + - ### A Brand New UI + + A redesigned plugin interface delivers a cleaner, faster experience. + + + + + + - ### Fill sizing (`width=fill` / `height=fill`) for auto-layout children + + Auto Layout now supports `width=fill` and `height=fill` in addition to fixed values like px and %, letting a component occupy the available space within its parent container instead of sizing to content (`hug`). + + This Fill sizing, previously available only for containers, is now supported for all components placed inside Auto Layout containers, making it easier to build responsive, flexible layouts. Currently available in Angular. + + + + ### Section-level reads and edits for large project files + + Large files can now be read and edited in sections using offset and limit, instead of the whole file. Edits are checked only against that section, so unrelated changes elsewhere don't block them, giving faster edits with less token usage. + + + + + + - ### Form field show property ignored via script + + Fixed the form field's `show` property not taking effect when updated from script. + + - ### Stale data shown during pagination load + + Fixed pagination briefly displaying the previous page's data alongside the loading spinner before the next page's data renders. + + - ### Accordion pane onload event not triggering + + Fixed the accordion pane's onload event not firing when its content type is set to inline. + + + + + + - ### Wizard pages not rendered in Autocode project preview + + Fixed an issue where Wizard pages failed to appear in the preview of Autocode projects. + + - ### Autocode sync call errors not handled + + Fixed Autocode sync call errors not being handled on both the backend and the frontend. + + - ### Autocode project landing on an Invalid Page on Launch in case of Wizards + + Fixed Autocode projects landing on an invalid page on launch when the app contains Wizards. + + + + ## 1.0.0-BETA-RC6 *Release date: 13 July 2026* + + - ### Sync new pages from Design-to-Code plugin into existing projects + + The Design-to-Code plugin now supports a Sync flow that lets you add new pages to any existing WaveMaker project directly from the plugin. + + - ### SVG generation and Icon URL support in Design-to-Code plugin + + Icons used in Figma designs are now exported as SVGs. This enhancement improves icon rendering by enabling support for icons outside the design system and produces outputs that more closely match the original design. + + - ### Restore conversation to a previous checkpoint in AI chat You can now restore an AI chat conversation to any previously saved checkpoint, permanently removing all messages, agent interactions, tool executions, and changes made after that point so you can continue from the selected state. + + - ### Code Review agent + + Introducing the WaveMaker Code Review Agent — a dedicated AI agent that audits your WaveMaker project files against best practices and surfaces violations as structured, actionable tables. It is report-only — it never edits or rewrites your files. Currently, the agent specializes only in identifying issues related to HTML and CSS files. @@ -58,6 +176,16 @@ For details about the technology stack upgrades, refer to [Technology Stack](/te + + + - ### Google Fonts not resolving on mobile + + Fixed a font resolution edge case on mobile by updating `font.json` with the correct PostScript names. + + - ### Nested wizard support + + Fixed wizard page generation to correctly handle nested wizards. The tool now scans each page's markup for `wm-wizard` elements and their direct `wm-wizardstep` children, capturing each step's name, title, and inner content, and walks up the DOM to detect whether a wizard is nested inside another wizard's step. Only top-level (non-nested) wizards get their own host page — nested wizards are now merged into their parent instead. + diff --git a/sidebar/sidebars/designSystemSidebar.js b/sidebar/sidebars/designSystemSidebar.js index ea0a8e3..78963f5 100644 --- a/sidebar/sidebars/designSystemSidebar.js +++ b/sidebar/sidebars/designSystemSidebar.js @@ -15,6 +15,7 @@ export default [ items: [ 'design-system/figma-design-to-code-plugin/working-with-design-to-code-plugin', 'design-system/figma-design-to-code-plugin/design-guidelines', + 'design-system/figma-design-to-code-plugin/annotation-glossary', 'design-system/figma-design-to-code-plugin/figma-cheat-sheet', ], },