Design in Figma
Code is only half the story. behsseui provides a complete and meticulously organized Figma file to streamline your design process. Every component, icon, and slice available in our CLI has its digital twin in our Figma Kit.
Why use our Figma Kit?
Our Figma kit is built to bridge the gap between designers and developers.
Parity
Ready-to-use Slices
Auto-Layout & Variables
Every component in Figma corresponds exactly to the component in the code. Same naming, same variants, same props.
Don't start from scratch. Drag and drop our Slices (Navbars, Heros, Dashboards) to prototype entire pages in minutes.
All components utilize the latest Figma features (Auto-layout, Variables for colors and spacing) ensuring your design is responsive and maintainable.
What's included?
The file is organized for easy discovery:
Foundations
Atomic Components
Icon Library
Slices
Typography, color palettes, and spacing systems (matching our CSS variables).
Buttons, Inputs, Badges, Cards, etc., with all their states (hover, focus, disabled).
Our complete set of vector icons, ready to use.
The power user section. Assemblies of components to create complex interfaces (Dashboards, Landing pages) instantly.
How to get started
Publish as a Library (Optional)
Start Designing
If you are working in a team, we recommend publishing the file as a "Team Library" to access it across all your design projects.
Switch to the "Assets" tab in Figma and start dragging components or Slices onto your canvas.
For Developers
During the Handoff process (design to code), work is simplified:
If a designer uses a Card component with the outline variant in Figma, the developer knows exactly what to pull from the CLI:
This removes the guesswork and ensures the final product looks exactly like the mockup.