Patterns
The 19 patterns FrameKit recognises, how it spots them, and what each becomes in every builder.
How patterns are recognised
A layer is read by what it holds, not just what it's called. When a group matches a pattern, it becomes the builder's own component, styled the way you drew it. Where a builder has no matching component, the layers come in as drawn (shown in grey below).
Every pattern, every builder
| Pattern | Spotted by | Bricks | Elementor | Divi 5 | Oxygen 6 | Gutenberg |
|---|---|---|---|---|---|---|
| Card | an image, then a few texts and up to two buttons in one box | styled Block | Image Box or container | styled Group | styled Container | styled Group |
| Accordion | title rows with a chevron or plus icon, the open item's content below | Nestable Accordion | Accordion | Accordion | <details> Containers | core/accordion |
| Tabs | a row of short labels over a panel, the open one drawn differently | Nestable Tabs | Nested Tabs | Tabs | a group of its labels and panel | core/tabs |
| Menu | short link texts side by side in the header or footer | Nav Menu | WordPress Menu | Menu | <nav> of Text Links | core/navigation |
| Logo | a layer named logo in the header or footer | Logo | Site Logo / Title | Site Logo / Title | Container Link to home | Site Logo / Title |
| Testimonial | a quote with the name and role under it, at most one small avatar | Testimonials | Testimonial | Testimonial | a group of its parts | core/quote |
| Social icons | small icons named after networks | Social Icons | Social Icons | Social Media Follow | a group of the drawn icons | core/social-links |
| Icon list | rows of an icon before one short text | List | Icon List | Icon List | <ul> of <li> Texts | core/list |
| Icon box | a small icon, a title and copy | styled Block | Image Box | styled Group | styled Container | styled Group |
| Logo strip | 4+ small logos side by side, no text | row of images | row of images | group of images | row Container of images | row group of images |
| Stats | big numbers like "98%" over short labels | Counter | Counter | Number Counter | a group of the drawn numbers | paragraphs in a group |
| Slider | a row of photos or slides running past its box, or over dots | Carousel / Slider | Image Carousel | Slider | slides as Containers | slides side by side |
| Form | 2+ input boxes and a submit button; field types from their words | Form | Form (Pro) | Contact Form | its layers | its layers, with a note |
| Pricing plan | a name, a price like "$19" or "€49/month", 2+ short features and one button | Pricing Tables | Price Table (Pro) | Pricing Tables | styled Container | styled group |
| Call to action | a filled box with a heading, short copy and one button | styled block | Call to Action (Pro) | Call To Action | styled Container | styled group |
| Team member | a photo, a short name and role, maybe a bio and social icons | Team Members | Image Box or container | Team Member | styled Container | styled group |
| Breadcrumbs | short texts with "/" or "›" between them | Breadcrumbs | its texts | Breadcrumbs | its texts | core/breadcrumbs |
| Video | a photo with a play button on it | Video | the still image | the still image | the still image | core/video |
| Gallery | 4+ photos and nothing else | Image Gallery | container of images | group of images | Container of images | core/gallery |
Tabs and accordions
Figma only draws the open tab and the open accordion item, so the others import empty for you to fill in.