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
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
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;