In today’s fast-paced, user-centric world, delivering personalized and intuitive user interfaces is crucial. Salesforce recognizes this and has developed the Omnistudio FlexCard Designer, a powerful tool that allows users to build Lightning web components without code. In this post, we’ll dive into the FlexCard Designer and uncover its intricacies, advantages, and challenges. Whether you’re a Salesforce admin, developer, or user, understanding and leveraging this tool can enhance your ability to create dynamic and impactful interfaces.

The FlexCard Designer: A Deeper Dive

Imagine you’re a sales representative in the field, visiting a client. You need instant access to relevant customer information to tailor your pitch effectively. This is where a well-designed FlexCard comes into play. A FlexCard is like a digital business card, consolidating and presenting critical data in an easily consumable format. Let’s explore the key components of the FlexCard Designer:

1. The Header: This section provides an overview of the FlexCard, including metadata like the author, version, and status. Here, you can also perform actions like previewing, activating, or exporting the FlexCard.

2. Publish Options: Configure the FlexCard’s metadata values, such as where it can be published, API version, and description. You can even define your own custom component SVG icon, adding a personal touch to your FlexCard.
3. Canvas: Think of this as your digital canvas, where you compose your FlexCard by dragging and arranging elements. Adjust widths, clone, delete, and ensure your card’s responsiveness with the built-in viewport dropdown.
4. Build Panel: This panel is your library of building blocks. You can drag elements like fields, custom Lightning web components, and even reusable child FlexCards onto the canvas.
5. Properties Panel: Once an element is selected on the canvas, the properties panel allows you to fine-tune its configurations. For instance, if you’ve added a field element, you can choose the displayed label, data field value, and more.
6. Style Panel: Styling is key to an engaging user interface. The style panel empowers you to visually customize your FlexCard elements, from backgrounds and sizes to fonts and responsiveness. And for those with more advanced design needs, custom CSS is also an option.
7. Setup Panel: Here, you’ll find global settings for your FlexCard. Think of it as the control center where you can configure everything from data sources to session variables and permissions.
8. Preview: Real-time testing is vital to iron out any kinks in your design. With the FlexCard Designer’s preview options, you can analyze how your FlexCard looks on different devices and even simulate different scenarios with test parameters.

Maximizing the FlexCard Designer

Now that we’ve explored the key components of the FlexCard Designer, let’s dive into some actionable tips to help you create incredible FlexCards:

1. Design with Purpose: Start with a clear understanding of your users’ needs. Identify the key data points or actions they require and ensure your FlexCard design caters to those specific needs. Remember, simplicity and clarity should guide your interface decisions.

2. Leverage Conditional Styles: To add visual cues and make your FlexCards even more intuitive, consider applying conditional styles. For example, you could highlight overdue tasks with a red background or display a different color for high-priority leads.

3. Maintain Consistency: Consistency breeds familiarity and improves user experience. Establish design patterns and reusable components within your FlexCards to create a cohesive and recognizable interface.

4. Optimize for Responsiveness: With a multitude of devices and screen sizes, ensuring your FlexCards look great on all platforms is crucial. Regularly test your designs at different viewport breakpoints and make necessary adjustments to optimize responsiveness.

5. Collaborate and Seek Feedback: Design is rarely a solo endeavor. Foster a collaborative environment by seeking input from users, stakeholders, and fellow Salesforce professionals. This iterative approach will help uncover blind spots and refine your FlexCards.



The Salesforce FlexCard Designer puts powerful interface-building capabilities into the hands of non-developers. Through its intuitive drag-and-drop interface and comprehensive feature set, users can create dynamic and impactful Lightning web components. Whether you’re a seasoned Salesforce admin or just dipping your toes into the world of Salesforce, leveraging the FlexCard Designer offers you a path to elevating the user experience. Let this comprehensive guide serve as your compass as you embark on this exciting journey.

If you’ve found this content helpful or would like to talk more about implementing Omnistudio FlexCards, feel free to reach out to SOLVD here to learn more about our consulting services.

yellow cloud solvd logo

Our clients say

From my initial call with Spencer through project implementation with John and Evan, my experience with the SOLVD team was excellent. They were quick to understand our business needs, clear when explaining the reasoning behind proposed solutions, transparent when reporting on progress and timeline, and all around enjoyable to work with. Would highly recommend and looking forward to continue working with them in the future!

Veronica Wong Director of Operations at Pathstream

SOLVD was very straight forward with everything needed to complete the project. No surprises, no issues, and cost was aligned with the estimate. They made implementation easy and quick.

Matt Benzaquen Sr Manager, Sales Strategy at Instabug

As a rule, I'm pretty stingy with my recommendations. So it's a pleasure for me to recommend Solvd as a top-flight Salesforce consultancy. Solvd recently led our company's conversion to the Lightning interface and did it on time, on budget and made it easy for me and my team. I know I'll use their services again, and am confident they can do the same for you.

Tim Tuttle CFO at Relevate Health Group