Anatomy
- Container: Container that defines the Illustration’s boundaries. It holds the illustration nested within parent components.
- Illustration: The actual illustration inside the container. Its content constraints in Figma must always be set to Scale, to adapt to different container sizes.
Usage Guidelines
When to use this component
Use the Illustration component when you need to:
- Include decorative illustrations inside parent components while preventing detached assets.
-
Reinforce messages visually in Tiles, Cards, Empty states, or File Upload.
When not to use this component
Avoid using Illustration when:
- The content is interactive (clickable or hoverable); the parent component should handle interactivity.
- You want to use generic icons or images instead of illustrations.
Best Practices
Use the illustration within components that allow it or are prepared for it.
Do not use it as a standalone, interactive component.
Provide proper Alt attributes when using illustrations, for accessibility.
Do not use images or icons inside the illustration component.
For components, do not use sizes other than those provided, as these are designed to follow a scale that creates visual balance.
General Component Behaviors
The Illustration component is purely visual and non-interactive. Its behavior depends on the parent component.
States
This component has no interactive states. Behavior is determined by the parent component.
Sizes
The Illustration component varies only by size:
- XSmall: 80x80 px, ideal for components with minimal content and compact content.
- Small: 112x112 px, appropriate for components that require a slightly larger visual presence.
- Medium: 144x144 px, recommended for components needing moderate visual emphasis on desktop layouts.
- Large: 176x176 px, suitable for components requiring strong visual emphasis in desktop layouts.
- XLarge: 208x208 px, for components that need a single prominent illustration to reinforce messaging on larger screens.
How to use
The Illustration component is designed to be flexible and ensure that illustrations remain attached, scalable, and consistent within parent components. In Figma, there are two possible ways to use existing illustrations in the Illustration component:
1. Using an existing illustration component
If the illustration already exists as a component in the Illu Kit:
- Select the illustration component and go to the component props panel.
- Locate the “Illustration” prop. and open the dropdown menu to change its content to another one.
- Search and select the illustration you need. It will appear inside the illustration component.
2. Creating a local illustration component
If the illustration is not a component yet:
- Import or copy the illustration into your file and convert it into a local component using Figma’s “Create Component” function.
- Ensure that all illustration elements inside the frame have constraints set to Scale. This is crucial to maintain correct sizing.
- Select the illustration component and go to the component props panel.
- Locate the “Illustration” prop. and open the dropdown menu to change its content to another one.
- Search and select the illustration you need. It will appear inside the illustration component.