Before
After

Inspiration

The world of design is intricate, with countless layers to manage. We envisioned NexLayer as a solution to simplify and enhance design workflows in Figma. By harnessing the lightning-fast LLM capabilities of SambaNova, specifically Meta-Llama-3.1-8B-Instruct and Llama-3.2-11B-Vision-Instruct models, we sought to bring unparalleled AI speed and intelligence directly to designers’ fingertips. This innovation allows designers to focus on creativity rather than tedious tasks, revolutionizing how layers are managed and analysed in real-time.

What it does

NexLayer is an AI-powered Figma plugin that revolutionizes layer management with:

Intelligent Layer Renaming: Automatically generates standardized, context-aware names for layers, even for nested and complex designs.
Design Insights: Provides detailed descriptions of layer content, including typography, colors, and visual flow, using advanced multimodal AI.
Enhanced Productivity: Simplifies layer organization and analysis, empowering designers to work more efficiently.

How We Built It

SambaNova's Meta-Llama-3.1-8B-Instruct & Llama-3.2-11B-Vision-Instruct Models: Lightning-fast LLMs used for generating intelligent, real-time layer management suggestions and context-based renaming.
Deno.js: A secure and efficient runtime for our server-side operations, ensuring seamless API handling.
Figma Plugin API: Integrated with Figma's API to interact with layers and provide design-specific insights directly within the platform.
Nanostores: A lightweight and efficient state management library to handle dynamic updates in the plugin interface effortlessly.
Preact: A fast and optimized UI framework for building an intuitive, user-friendly design experience in the plugin.
OpenAI SDK: Combined with SambaNova's LLMs for seamless AI-driven interactions.

By combining these tools, we created a robust, scalable, and highly intuitive solution tailored to designers' needs.

Challenges we ran into

Multimodal Model Integration: Combining visual and contextual capabilities required careful API design and workflow synchronization.
Nested Layer Processing: Managing deeply nested layers without impacting performance was a significant challenge.
Real-time Feedback: Balancing fast AI responses with smooth user experiences required optimization of API calls and inference speeds.

Accomplishments that we're proud of

Successfully integrated Meta-Llama-3.1-8B-Instruct and Llama-3.2-11B-Vision-Instruct models to deliver intelligent design insights in near real-time.
Developed a user-friendly Figma plugin that enhances productivity and simplifies complex design workflows.
Optimized batch processing for seamless handling of large and nested layer structures.
Delivered a polished and fully functional plugin within the hackathon timeline.

What we learned

The immense power of combining Meta-Llama and Vision-Instruct models for creative applications.
Efficient methods for processing and analyzing multimodal data in real-time.
The importance of balancing AI-powered automation with intuitive user experiences.

What's next for NexLayer

Expanded Multimodal Features: Further integrate text and visual analysis to provide deeper insights and recommendations.
User-driven Enhancements: Incorporate feedback from designers to continuously improve and add new features.
Marketplace Launch: Publish NexLayer on the Figma Plugin Marketplace for global accessibility.
Advanced AI Integration: Introduce smart grouping, design recommendations, and trend analysis powered by SambaNova's cutting-edge AI models.
Chat with Figma✨: Plan to integrate cutting-edge AI models into Figma directly, to bring development and design together in one place (it's totally another project).