Custom Components
Structuring Components

Sample component

We recommend that your define the type of each prop and also configure the default values for the optimal experience.

This is a sample of a component having all the types of props.

import { FunctionComponent } from "react";
import styles from "./HotelCard.module.css";
 
export enum Rating {
  One = 1,
  Two = 2,
  Three = 3,
  Four = 4,
  Five = 5
}
 
export type HotelCardType = {
  image?: string;
  hotelType?: string;
  hotelName?: string;
  price?: string;
  showVideoIcon?: boolean;
  rating?: Rating;
  reviews?: number;
  callToAction?: React.ReactNode;
  onVideoIconClick?: () => void;
};
 
const HotelCard: FunctionComponent<HotelCardType> = ({
  image = "/image4@2x.png",
  hotelType = "Hotel Type",
  hotelName = "Hotel Name",
  price = "0",
  showVideoIcon,
  rating = Rating.Five,
  reviews = 0,
  callToAction,
  onVideoIconClick
}) => {
  return (
    <div className={styles.hotelCard}>
      <img className={styles.imageIcon} alt="" src={image} />
      <div className={styles.stayDetails}>
        <div className={styles.stayDetailsRows}>
          <div className={styles.hoteltype}>{hotelType}</div>
          <b className={styles.hotelname}>{hotelName}</b>
          <div className={styles.price}>{price}</div>
        </div>
        {showVideoIcon && (
          <img className={styles.videoIcon} alt="" src="/video.svg" onClick={onVideoIconClick}/>
        )}
      </div>
      <div className={styles.rating}>
        <div className={styles.vectorParent}>
          <img className={styles.vectorIcon} alt="" src="/vector.svg" />
          <div className={styles.rating1}>{rating}</div>
        </div>
        <div className={styles.reviews}>{reviews " reviews"} </div>
      </div>
      {callToAction}
    </div>
  );
};
 
export default HotelCard;

How to setup Components in Figma

To ensure seamless collaboration between designers and developers, it's essential to maintain a consistent structure when mapping properties and components from code to Figma. Here's a comprehensive guide on how to achieve this:

For optimal mapping between code and Figma:

  • Ensure that the names of props and components in the code and Figma are identical.
  • This consistency helps team members easily understand and map properties between design and development.

Mapping of Code and Figma properties

1. String or Number Props

Code Mapping: In code, text properties are usually represented as strings or numbers.
Figma Mapping: Use the Text property in Figma to correctly pass the value (Example: title/price).

2. Boolean Props

Code Mapping: Boolean properties in code often represent conditional rendering.
Figma Mapping: Use the Boolean property in Figma to toggle the visibility of layers, matching the conditional

logic used in the code (Example: showIcon).

3. Children Props

Code Mapping: In code, we use a children prop to allow custom content in a component.
Figma Mapping: Use the Instance Swap property in Figma to replace inner content (Example children/icon).

4. Union or Enum Props

Code Mapping: We represent different states or structures of a component using enums or union props.
Figma Mapping: Use the Variant property in Figma to define different states of a component (Example size).

5. Function Props

Code Mapping: Function props in code, such as onClick or onChange are used to handle user interactions.
Figma Mapping: In Figma, these can be represented by prototype actions. Use the Prototype Tab to add

interaction to mirror the function properties in the code..

By following this guide, your Figma designs will be closely aligned with your codebase, facilitating better collaboration and reducing potential errors while using custom components.

Structuring Components

Different Component Structures

We support the following types of component definitions.

1. Default Component Export

const CustomComponent = () => {
  return <div />;
};
 
export default CustomComponent;

2. Named Component Export

export const CustomComponent = () => <div />;

3. Un-named Component Export

export default () => <div />;

Here the component name will be the same as the file name if the component name is not defined.
Example: For file with path src/components/CustomComponent.tsx, the component name is CustomComponent

4. Class Component

import { Component } from 'react';
 
export default class CustomComponent extends Component {
  render() {
    return <div />;
  }
}

5. Normal Function Component

export function CustomComponent() {
  return <div />
}

6. Named Function Component

const CustomComponent = () => {
  return <div />;
};
 
export { CustomComponent };

7. Memoized Component

import { memo } from 'react';
 
const CustomComponent = () => <div/>;
 
export default memo(CustomComponent);

8. Higher-Order Component

const CustomComponent = () => <div />;
 
const Hoc = (CustomComponent) => {
  return (props) => {
    return <CustomComponent {...props} />;
  };
};
 
export default Hoc(CustomComponent);

Note: We do not support re-export at the moment so we recommend that you add the path to all the components you want to export.

Support for Props

We support a variety of props as shown below with code samples

1. String props

import { FunctionComponent } from "react";
import styles from "./Button.module.css";
 
export type ButtonType = {
  text?: string;
};
 
const Button: FunctionComponent<ButtonType> = ({ text = "text" }) => {
  return (
    <button className={styles.button}>
      <div className={styles.text}>{text}</div>
    </button>
  );
};
 
export default Button;

2. Number props

import { FunctionComponent } from "react";
import styles from "./ErrorPercentageBadge.module.css";
 
export type ErrorPercentageBadgeType = {
  percentage?: number;
};
 
const ErrorPercentageBadge: FunctionComponent<ErrorPercentageBadgeType> = ({ percentage = 0 }) => {
  return (
    <button className={styles.badge}>
      <div className={styles.percentage}>{percentage}</div>
    </button>
  );
};
 
export default ErrorPercentageBadge;

3. Boolean props

import { FunctionComponent } from "react";
import styles from "./VideoButton.module.css";
 
export type VideoButtonType = {
  showVideoIcon?: boolean;
  onVideoIconClick?: () => void;
};
 
const VideoButton: FunctionComponent<VideoButtonType> = ({ 
  showVideoIcon = true,  
  onVideoIconClick
}) => {
  return (
    <button className={styles.stayDetails} onClick={onVideoIconClick}>
      {showVideoIcon && (
        <img className={styles.videoIcon} alt="" src="/video.svg" />
      )}
    </button>
  );
};
 
export default VideoButton;

4. Enum props

import { FunctionComponent } from "react";
import styles from "./Rating.module.css";
 
export enum RatingValues {
  One = 1,
  Two = 2,
  Three = 3,
  Four = 4,
  Five = 5
}
 
export type RatingType = {
  rating?: RatingValues;
};
 
const Rating: FunctionComponent<RatingType> = ({
  rating = RatingValues.Five,
}) => {
  return (
    <div className={styles.vectorParent}>
      <img className={styles.vectorIcon} alt="" src="/vector.svg" />
      <div className={styles.rating1}>{rating}</div>
    </div>
  );
};
 
export default Rating;

5. Object props

import { FunctionComponent } from "react";
import styles from "./Person.module.css";
 
type Person = {
  name: string;
  age: number;
}
 
export type Props = {
  person: Person;
};
 
const Person: FunctionComponent<Props> = ({ person }) => {
  return (
    <div>
      <div className={styles.name}>Your name: {person.name}</div>
      <div className={styles.age}>Your age: {person.age}</div>
    </div>
  );
};
 
export default Person;

6. Union props

import { FunctionComponent } from "react";
import styles from "./Gender.module.css";
 
export type Props = {
  gender: 'male' | 'female';
};
 
const Gender: FunctionComponent<Props> = ({ gender = 'male' }) => {
  return (
    <div className={styles.gender}>Your gender is {gender}</div>
  );
};
 
export default Gender;

7. Children props

import { FunctionComponent } from "react";
import styles from "./Button.module.css";
 
export type ButtonType = {
  children?: React.ReactNode;
  onButtonClick?: () => void;
};
 
const Button: FunctionComponent<ButtonType> = ({ 
  children, 
  onButtonClick 
}) => {
  return (
    <button className={styles.badge} onClick={onButtonClick}>
      {children}
    </button>
  );
};
 
export default Button;

8. Function props

import { FunctionComponent } from "react";
import styles from "./VideoButton.module.css";
 
export type VideoButtonType = {
  showVideoIcon?: boolean;
  onVideoIconClick?: () => void;
};
 
const VideoButton: FunctionComponent<VideoButtonType> = ({ 
  showVideoIcon = true,  
  onVideoIconClick
}) => {
  return (
    <button className={styles.stayDetails} onClick={onVideoIconClick}>
      {showVideoIcon && (
        <img className={styles.videoIcon} alt="" src="/video.svg" />
      )}
    </button>
  );
};
 
export default VideoButton;