Learn the LWC lifecycle from idea to built component. Learn design thinking, how to use visual mockups, tools to help build, and comprehensive testing strategies for high-quality components.
Dreamforce passes are going fast. Don’t miss the most valuable event in business. Register now.
Register to join Dreamforce in San Francisco, or stream it free on Salesforce+.
Dreamforce is almost here and passes are going fast. Don’t miss your last chance to save $400 by September 26.
Sessions
Explore Dreamforce 2025 sessions.
Browse 1,600+ sessions from 2025 by role, topic, or industry and get inspired for the innovation coming to Dreamforce 2026.
How to Design and Build Better Lightning Web Components
Required equipment: Salesforce Events Mobile App required. Please bring your headphones and use Live Session Audio to hear audio and view captions.
, Developer Advocate, Salesforce
Role: Developer
Product: Agentforce 360 Platform
Session Level: Intermediate
Session Type: Theater
Session Summary: This session focused on designing and building better Lightning Web Components, emphasizing the importance of ideation, design, build and testing phases. The speaker shared insights from their experience creating a custom timeline component, addressing limitations in existing solutions like restricted time spans, limited object support, and the importance of configurability. Leveraging tools such as the D3.js library, Lightning Design System, and Figma for prototyping, the session highlighted how thoughtful planning and prototyping can resolve inconsistencies and improve the user experience for both end-users and administrators. Additionally, the session introduced Salesforce's Agentforce Vibes, a new VS Code extension with AI capabilities, to streamline development workflows, enforce coding standards, and improve code quality through automation and testing tools like Prettier, Jest, and Salesforce’s accessibility library.
Key Takeaways:
• Prototyping with tools like Figma and adhering to the Lightning Design System ensures consistency and usability, preventing costly redesigns during development.
• Effective research during the ideation phase, including leveraging the IdeaExchange, AppExchange, and GitHub, prevents duplication of effort and identifies the best tools and libraries for component creation.
• Salesforce's Agentforce Vibes and other automation tools, such as Prettier and Jest, enable developers to maintain coding standards, ensure accessibility, and integrate AI assistance for efficient and high-quality component development.
Session Summary Feedback: Report a Concern
Available Now on Salesforce+: Watch now
