Components — Findit Figma
The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components page, on three boards; every page frame holds instances of them. Each component set has a short description, shown when you hover it in the Assets panel.
Using components
Section titled “Using components”- Add one: drag it from the Assets panel (
Alt/Option + I) onto a frame. - Change a variant: select an instance and pick the variant in the right sidebar (for example Header → Breakpoint: Phone/Open).
- Override content: double-click into an instance and change its text or image. Overrides stay when the main component changes. Many components also have text properties (Title, Price, Location…) you can edit straight from the right sidebar.
- Edit for everyone: right-click an instance → Go to main component, and edit it there.
- Break the link: Detach instance (
Ctrl/Cmd + Alt/Option + B) when one place needs something the component can’t do. The copy stops following the main component.
The hover, open, loading, success and error variants document how the interface reacts. Use them to show states in a presentation, or connect them with Prototype → While hovering / On click to click through the design.
Sections
Section titled “Sections”
| Component | Variants |
|---|---|
| Logo | — the Findit logo, as vectors |
| Header | Breakpoint: Desktop, Tablet, Tablet/Open, Phone, Phone/Open — the open ones show the menu |
| Menu | State: Default, Hover, Active — one menu item |
| Hamburger | State: Open, Close |
| Footer | Breakpoint: Desktop, Tablet, Phone — call to action, contact details, links, newsletter form, social links |
| Hero Video | State: Default, Play — the video on the home page |
| Main Image | Slide: Default, Image 01, Image 03, Image 04, Image 05 — the property gallery |
| Faq | Breakpoint: Desktop, Tablet, Phone — questions and answers with a photo |
| Testimonial | Layout: Default, Phone — the moving rows of testimonials, the carousel on phones |
To put your logo everywhere, edit the Logo component once.
Cards & Elements
Section titled “Cards & Elements”
| Component | Variants |
|---|---|
| Button | Style: Primary, Secondary, White, Shadow — each with its Hover state |
| Tab | State: Default, Hover, Active — category tabs and filter chips |
| Submit Button | State: Default, Hover, Pressed, Loading, Disabled, Success, Error |
| Arrow | Direction: Right, Left — each with its Hover state |
| Form Submit Label | State: Default, Active — a radio option of the “Add property” form |
| Label | Width: Fit, Fill — the section label |
| Icon Text | Style: Fit, Fill, With Background, With Shadow |
| Star | Rating: 1 to 5 stars |
| Property Card | Type: Complete, Simple — each with its Hover state |
| Property Nav | Breakpoint: Desktop, Tablet, Tablet Open, Phone, Phone Open — the property filter card |
| City | State: Default, Hover |
| Benefit | Breakpoint: Desktop, Tablet, Phone |
| Step Horizontal | Breakpoint: Desktop, Tablet, Phone — the three steps on Home |
| Step | State: Default, 50% Opacity — one step of the About process |
| Timeline | Layout: Default, Mobile — one year of the About history |
| Feature List | Unit: With Unit, No Unit — a row of the property details |
| Accordions | State: Open, Close |
| Agent | State: Default, Hover |
| Team Card | Layout: Default, Mobile |
| Post Card | Layout: Default, Simple |
| Testimonial Card | — one testimonial |
Property List Section
Section titled “Property List Section”| Component | Variants |
|---|---|
| Properties | Filter: All, Apartments, Condos, Houses, Villas — for Desktop, Tablet and Phone |
The Icons page holds the 24 icons used in the design as components (Icon/bed, Icon/map-pin, …), from
Phosphor Icons (MIT licence), coloured with the Black style. Drag one from the Assets
panel, or install the free Phosphor plugin from the Figma Community for the full set in every weight.
Adding your own
Section titled “Adding your own”Build new components next to the existing ones, on the matching board of the Components page, and use the colour and text styles (Colours and text styles) instead of raw values — that keeps your additions rebrandable with the rest.