Design with AI using your design system – with Subframe

Name: Design with AI using your design system – with Subframe
Uploaded: 2025-06-06T20:27:19.000Z
Duration: 2 h 36 min 55 s

Introduction to the Workshop

Overview of the Workshop Series

Thanks to participants for joining the second community workshop, which exceeded sign-up expectations.

The goal is to explore the state of design systems and AI tools, focusing on practical applications rather than hype.

Format and Interaction

Acknowledgment of a large group making it challenging to maintain a conversational tone; questions can be submitted in chat.

Extended time for the session allows for thorough exploration and Q&A at the end.

Designing with AI Tools

Key Themes in Design Systems

Discussion centers around how designers can create systems using emerging AI tools, addressing common pain points faced by designers today.

Emphasis on a component-first approach that integrates existing design systems with AI capabilities, enhancing workflow efficiency.

Designer's Role in System Development

Designers are encouraged to engage more closely with code, as this proximity enhances their ability to influence system outcomes positively.

The importance of understanding both design and technology is highlighted as essential for modern designers.

Subframe: A Tool for Designers

Introduction to Subframe

Philip introduces himself as a designer and co-founder of Subframe, emphasizing its unique drag-and-drop functionality combined with coding capabilities.

Subframe aims to bridge design and development through an integrated platform that supports real-time collaboration and iteration.

Workshop Agenda

The session will cover setting up a design system within Subframe, including importing components and exporting code after designs are completed.

Live demonstrations will showcase real-world applications while addressing potential hiccups during the process as part of learning experience.

Engaging with Pain Points in Design Systems

Interactive Exercise

AI Tools and Design Systems: Integration and Evolution

Exploring Key Themes in AI and Design Systems

The discussion begins with the idea of summarizing themes using direct quotes, highlighting the integration of AI tools like ChatGPT into design workflows.

A key theme identified is how to effectively utilize AI tools to support existing design systems, emphasizing the need for a cohesive workflow.

The speaker notes that many teams struggle with inadequate support for their design systems, particularly from engineers who may not be fully engaged in building them out.

There’s a paradoxical view on design systems being both crucial and less significant due to the flexibility introduced by AI tools, which can rapidly adapt designs.

The importance of maintaining guardrails through design systems is discussed while acknowledging that AI has made software development more adaptable.

Challenges in Integrating AI with Design Workflows

The conversation shifts to how quickly designs can be iterated upon using AI, suggesting a balance between embracing system thinking and allowing for creative flexibility.

Subframe's approach involves starting with generic outputs from AI tools but emphasizes customization within a structured design layer.

Major challenges include integrating workflows where design systems and AI tools are not currently connected, raising questions about maintenance responsibilities.

Speed and iteration are highlighted as benefits of using these tools; however, designers must refine ideas post-AI generation for quality assurance.

Flexibility versus consistency in style is another critical point raised regarding when to adhere strictly to established systems or break away from them.

Practical Applications of Subframe

Subframe aims to serve real companies by integrating seamlessly into existing workflows rather than just facilitating quick side projects.

It combines features typical of both design tools and AI code generators, offering drag-and-drop functionality alongside chat-based prompts for designing interfaces.

Prototyping capabilities powered by AI are mentioned as an exciting beta feature that aligns closely with traditional coding practices while enabling designer input on React components.

Code export functionality ensures developers receive trustworthy code tied directly to their established systems rather than relying solely on generative outputs from AI models.

Collaboration features allow multiple users to work simultaneously within Subframe, enhancing teamwork across different roles in the project.

Personalization and Learning Capabilities

Subframe's unique ability lies in its capacity to learn from user interactions—ingesting context around documentation and product features as users build within it.

This personalized learning helps create an effective tool tailored specifically for each team’s needs over time.

Approaches to Design Systems Today

Subframe: A Comprehensive Design System

Overview of Subframe's Features

Subframe provides a design system component library out of the box, including standard components like sliders that save time on rebuilding.

The components are customizable and themable, allowing designers to edit designs directly within the platform.

Subframe serves as a source of truth for design tokens (colors, themes), enabling designers to create components efficiently while syncing code with design.

When rebuilding designs from tools like Figma, Subframe aligns with the established design system rather than trying to match screenshots exactly.

The platform is beneficial for both new projects and teams migrating from existing systems, offering incremental adoption of its features.

Bring Your Own Components (BYOC)

The BYOC feature allows users to replace default components with their own pre-built components from their codebase.

This integration enables teams to maintain their existing design systems while utilizing Subframe’s capabilities for designing interfaces.

An example highlighted is Shopify's Polaris design system, which is open-source and robust, showcasing how it can be integrated into Subframe seamlessly.

Users can recreate complex pages quickly using familiar components from their own libraries or those provided by platforms like Shopify.

AI functionality in Subframe assists in generating designs based on available components, enhancing productivity during the design process.

Future Developments and Customization

The vision includes expanding AI capabilities to work with user-defined components beyond just those included in the demo version.

Teams interested in this feature should note there is currently a waitlist due to varying complexities across different systems.

Compatibility with React and Storybook simplifies integration efforts for teams looking to adopt these features effectively.

Designers can easily switch back to design mode after making adjustments, ensuring flexibility throughout the development process.

Design System Integration and AI in Design

Importance of a Unified Design System

Emphasizes the need for a cohesive design system that serves as a single source of truth, facilitating collaboration between designers and engineers.

Highlights the structure of Subframe, which operates on layers similar to a design system, including a theme layer that manages global settings like colors and typography.

Role of Typography and Color in Design

Discusses how typography significantly influences the uniqueness of designs, noting its subtlety compared to color but its critical impact on content consumption.

Mentions additional design elements such as drop shadows that contribute to overall aesthetics.

Theme Setup and Component Utilization

Describes features for setting up themes, including importing color palettes and typography options to establish foundational design elements.

Explains how components (buttons, cards) are created from these themes and compiled into pages for development workflows.

AI's Role in Design Processes

Introduces the integration of AI into various stages of design, discussing when it is beneficial versus when designers may prefer manual control.

Shares an example where AI was used to generate an Airbnb property listing layout based on existing themes.

Limitations and Future Enhancements with AI

Acknowledges limitations in current AI capabilities regarding component updates while emphasizing ongoing efforts to improve this aspect.

AI-Driven Page Updates and Componentization in Design

AI Enhancements in Theme and Page Level Adjustments

The AI is capable of updating not only tokens but also page-level elements, enhancing the overall design experience.

While the AI can quickly adjust themes and page levels, it currently lacks the ability to modify specific component styles like button shadows.

Addressing User Queries on Component Integration

A user inquired about integrating components from commercial solutions like Prime Faces; the speaker confirmed that importing custom design systems is feasible.

Importing existing coded pages is challenging due to complex logic and nested components, making direct imports impractical.

Challenges with Existing Pages and Componentization

The discussion highlights the difficulty of breaking down complex pages into reusable components, emphasizing a need for better componentization strategies.

The speaker suggests that by focusing on larger layout components with slots for children, recreating pages becomes easier.

Visual Changes Post-AI Update

After applying updates, subtle changes such as new colors and shadows were observed, showcasing how adjustments at different levels affect overall design.

The importance of experimenting with various design levels (component vs. page level) was emphasized to understand their impact on final output.

Creating Custom Components within Design Framework

As they transitioned to creating custom components, the speaker noted that designers often face decisions about whether to build or componentize first.

For optimal results in Subframe, starting with a page before generating individual components is recommended for better integration with AI tools.

Transitioning from Figma-like Environments to React Components

The process involves creating reusable React components while maintaining familiar styling practices akin to those used in Figma.

Understanding Component Variants and Slots in Design

Exploring Code Constraints and Component Behavior

The discussion begins with the constraints of code, particularly focusing on hover states. An example is given where a shadow effect is added on hover to simulate a pressing action.

A badge component is introduced, highlighting that adding it results in its appearance across all instances due to the design's intention for simplicity and lack of complex logic.

The speaker emphasizes the importance of designers maintaining control over components, allowing engineers to build logic around them without complicating the base design.

Managing Visibility and Overrides

The concept of overrides is explained through a practical example where hiding or showing elements can be managed effectively within the component structure.

A new badge variant is discussed, showcasing how properties can be adjusted dynamically based on user interaction, such as changing colors on hover.

Advanced Use Cases and Challenges

The speaker notes potential issues when working with custom components, emphasizing that understanding these intricacies is crucial for effective implementation.

There’s an acknowledgment of ongoing improvements needed in component functionality, indicating that feedback from users can lead to better designs.

Introduction to Slots in Components

The power of slots at the component level is introduced. Slots allow for flexible content placement within components while maintaining consistent styling and behavior.

A distinction between static button placement versus using slots highlights flexibility in design and development processes.

Practical Application of Components

The application of child components demonstrates how designers can manipulate layouts by adding or removing elements without altering core functionalities.

Flexibility in visual layers through slots allows designers to manage padding, spacing, and layout while keeping essential elements intact.

Importance of Understanding Front-End Principles

Designers are encouraged to deepen their knowledge about front-end principles as this understanding enhances their ability to work effectively with code-based tools like Figma.

Iterative Design and AI Integration in Subframe

Leveraging AI for Design Consistency

The iterative process in design can be enhanced by using AI, which learns from existing designs and allows for the integration of specific elements.

A new page can be created based on current styles, suggesting a two-column layout with a chat interface on one side and an interactive map on the other.

Conceptualizing New Features

The idea of integrating a chatbot feature into platforms like Airbnb is discussed, allowing users to interactively search for places while viewing a map.

Prompt engineering is emphasized as an art form that guides AI in generating new pages based on existing designs.

System-Level Prompts and Constraints

Designers can set global themes and components that inform how pages are generated, creating flexibility within defined constraints.

Specific rules can be established through system-level prompts to ensure consistency across designs, such as maintaining background colors.

Iterative Refinement Process

The importance of refining design tokens is highlighted; designers may choose between strict adherence to rules or more flexible prompting methods.

The discussion includes how AI can assist in making bulk changes efficiently while still allowing for individual adjustments.

Enhancing User Experience Through Feedback

Continuous feedback loops allow designers to refine layouts further by comparing different page styles and iterating upon them.

AI in Design: When to Use It?

Contextual AI Usage in Design

The speaker discusses the varying contexts in which AI can be effectively utilized, emphasizing that it is beneficial for heavy lifting tasks like updating large themes or generating multiple pages.

For smaller, localized edits, such as adding zoom buttons, AI can be used inline for quick adjustments without extensive input.

The importance of contextual edits is highlighted; right-clicking allows users to ask specific questions directly related to their design needs.

Efficiency and Speed in Design

Properties within the design panel are accessible for rapid modifications, enabling designers to make changes quickly without delays.

The speaker demonstrates creating components from a library but chooses to detach them for faster customization rather than adhering strictly to the design system.

Prototyping and Code Integration

As the prototype mode is initiated, the speaker reflects on how designs evolve and emphasizes user control over when AI assistance is most useful.

A scenario is presented where a redesign could lead to significant changes while introducing new features like chat functionality alongside maps.

Limitations of Static Designs

The discussion shifts towards limitations encountered when transitioning from design to code; static elements pose challenges when trying to implement dynamic features like maps.

The integration of interactive components (e.g., accordions) illustrates some capabilities but also highlights constraints that necessitate coding knowledge.

Handoff Process Between Design and Development

The handoff process involves engineers taking static code generated from designs into their development environment without translation layers complicating the process.

Emphasis on direct code transfer ensures that styles and components match precisely with what was designed, facilitating smoother collaboration between designers and developers.

Utilizing External Tools for Enhanced Functionality

Collaboration with tools like Bolt allows seamless integration of designs into backend systems, enhancing overall functionality beyond initial prototypes.

Designing with Subframe: A Deep Dive

Integrating Components and Code

The process begins by copying a prompt that wraps existing code, providing context for components. This allows users to create new pages or modify existing ones seamlessly.

Users can run commands to sync components, ensuring the page renders as designed in Subframe, highlighting the importance of maintaining design integrity throughout development.

Emphasizes that everything done in Subframe serves as a design exploration layer before transitioning to actual code, reinforcing the concept of a single source of truth.

The updated button component demonstrates how designs in Subframe can be effectively translated into functional code, showcasing the integration between design and development tools.

Discusses setting rules within tools to guide component usage and prevent unintended modifications during development.

Prototyping Features and Real-Time Testing

Highlights the ability to export code from Subframe, which ensures all components exist locally within the user's codebase for easy access and modification.

Introduces interactive prototyping capabilities that allow users to test designs live without switching between different tools, enhancing workflow efficiency.

Mentions how platforms like Bold and Replet enable app building while Subframe focuses on design exploration, bridging the gap between conceptualization and implementation.

Describes importing libraries directly into designs through annotations, simplifying functionality integration without needing external chat-based tools for assistance.

Concludes with an emphasis on creating a cohesive design system compatible with AI tools while retaining full control over design elements.

Q&A Session Insights

Opens up for audience questions after an extensive presentation, indicating engagement with viewers and willingness to clarify complex topics discussed earlier.

Subframe and Component Integration

Overview of Subframe Functionality

The purpose of Subframe is to rebuild pages using user-defined components, allowing for adjustments in subframes afterward. It is effective for creating entire pages or small snippets.

Once components are imported into Subframe, they remain synchronized with the Storybook library through a command that engineers can run to push updates back into Subframe.

Component Editing and Design Governance

Current limitations exist where components cannot be edited as freely after being created; however, custom components can still be integrated back into the system.

There is a governance issue regarding design systems—updating components may require an official pull request (PR), emphasizing the need for careful management of component versions.

Interactive Components and Design Mode

Integrating interactive components into Subframe presents a trade-off between maintaining design mode versus rendering functional elements with logic and complexity.

Figma variables can be utilized effectively within Subframe, with plans to enable easy copying and pasting of CSS variables.

AI Integration and Learning Patterns

Users can instruct AI to create new pages with specific layouts or navigation components, which will improve as more pages are added to the project.

The AI's performance enhances significantly once around ten pages are incorporated into Subframe, allowing it to better recognize patterns in layout selection.

Customization and Future Developments

Tailwind is currently used for custom spacing variables; modifications are possible when users bring their own components.

Multiple theme modes (light/dark) are available now, but future updates may introduce side-by-side themes for enhanced customization options.

Challenges with External Components

Concerns arise about integrating random external components due to potential breaking changes; maintaining a source of truth within Subframe is prioritized.

Starting projects in Bolt before adding Subframe could lead to complications due to differing tool ranges; troubleshooting guidelines will help streamline this process.

Comparison with Other Tools

Design Systems and AI Integration

Visual IDEs and Design Tools

Discussion on local versions of design tools like Onlook and Tempo, which serve as visual IDEs that operate directly on the codebase, providing a more visual preview compared to traditional coding environments.

Emphasis on the integration of design controls within these tools, allowing for real-time adjustments without waiting for updates or relying solely on LLM calls.

The Role of Designers in Development

Acknowledgment that designers require a "sandbox" environment to experiment freely with designs, leading to messy files that can be refined later while maintaining the same codebase.

Explanation of how different teams handle design handoffs; some prefer copying entire pages into new files for developers to work from, highlighting variations in workflow efficiency.

Developer Perspectives on Code Integration

Insight into developer preferences regarding code snippets versus full page copies; some find it tedious to integrate strings manually while others appreciate the speed gained from pre-written components.

Discussion about hardcoding variables and how this affects development workflows; opinions vary among developers regarding the best approach for integrating design elements into existing codebases.

Componentization and Workflow Efficiency

Exploration of component-based workflows where larger building blocks are created for easier integration; designers can update components without altering individual div structures significantly.

Community Engagement and Feedback

Closing remarks encouraging audience feedback on future discussions or missed topics during the session, emphasizing community involvement in shaping content direction.