This month's Learning Lab LIVE session explored one of Lectora's most powerful productivity features: library objects. We demonstrated how reusable components can dramatically accelerate course development while maintaining brand consistency across your team.
What Are Library Objects?
Library objects are templatized elements or components that can be reused across Lectora projects. Think of them as your persistent clipboard, building blocks you create once and use repeatedly. They serve two critical purposes:
Speed up development: No need to rebuild the same interactions, layouts, and components from scratch for every course.
Ensure brand consistency: Maintain cohesive branding and design across all your organization's learning content.
In Lectora Online, library objects are shared across your entire team, making them particularly powerful for collaboration. In Lectora Desktop, they're available within your local environment.
The Atomic Design Framework
To understand how to effectively structure library objects, we introduced atomic design, a methodology created by Brad Frost that borrows concepts from chemistry to explain interface systems.
The Five Stages
Atoms: The foundational building blocks that can't be broken down further without losing functionality. In our demo, this included elements like form labels, input fields, and buttons, as well as an HTML extension for custom fonts.
Molecules: Simple groups of UI elements functioning together as a unit. Example: a search bar combining a label, text input field, and button into one functional component.
Organisms: More complex components composed of groups of molecules, atoms, or other organisms. Our demo included a navigation theme that combined multiple molecules (navigation buttons) with other elements to create a cohesive header system.
Templates: Page-level objects that place components into layouts and establish content structure. These are the skeletons of your pages, placeholders showing where content will go (without actual content yet).
Pages: Templates populated with representative placeholder content that demonstrates what the final layout could look like with real information.
This hierarchy helps you think systematically about which components to create and how they build upon each other.
Building the Fig Tree Corporate System
We demonstrated this approach by creating a complete component library called "Fig Tree Corporate" (named after the font used throughout). The system included:
Theme Elements (Molecules)
- Custom font integration via HTML extension
- Navigation buttons styled consistently
- Background colors and brand elements
- Combined into a unified "Fig Tree Theme" library object
Page Layouts (Templates)
- Title slide layout
- Objectives page
- 50-50 split layout (image and content side by side)
- Three-column comparison layout
Interactive Components (Molecules/Organisms)
- Tabbed click-to-reveal with forced sequential viewing
- Image hotspots with pop-up content boxes
- 5-topic click-to-reveal with button states and progress tracking
- Content carousel with forward/backward navigation and completion tracking
- Video with sync events that pauses mid-playback for knowledge checks
- Knowledge check question formats
- Quiz pages with multiple question types
Each component was designed to work independently while maintaining visual consistency with the overall system.
The Development Workflow
The most efficient approach to building library objects involves these steps:
1. Build Everything in One File
Rather than creating components in isolation, build a complete example course that showcases all your layouts, interactions, and components working together. This lets you:
- See how elements work cohesively
- Ensure visual consistency before breaking things apart
- Test interactions and functionality in context
In this case, we started with one of Lectora’s built-in course starter templates and modified it heavily to match our own cohesive branding and style.
2. Extract Components as Library Objects
Once you're satisfied with your design system, extract components by right-clicking and selecting "Save as Library Object." Organize them into folders (like our "Fig Tree Corporate" folder) for easy access.
Key considerations:
- Be sure to save everything you’ll need to have the component look and work correctly
- Consider saving both full pages and individual components for flexibility
- Name objects descriptively so team members understand their purpose
3. Create a Base Template
After extracting library objects, save your basic page layouts as a template (File > Save Options > Save Project as Template). This gives your team a starting point for new courses that already includes your base structure and styling.
4. Build Courses Quickly
With library objects and templates in place, creating new courses becomes remarkably fast. We demonstrated rebuilding the entire example course in just a few minutes by:
- Starting with the Fig Tree Corporate template
- Inserting the theme library object at the project level
- Adding page layouts and interactions from the library as needed
What Gets Imported
When you insert a library object, Lectora brings in everything needed to make it functional:
- All visual elements and styling
- Associated variables
- Actions and triggers
- Dependencies and references
This means complex interactions work immediately after insertion; you just need to customize the content to match your course topic.
Team Collaboration Benefits
Library objects become even more powerful when used across teams:
Consistency at scale: Everyone uses the same branded components, maintaining visual coherence across hundreds of courses.
Faster onboarding: New team members can build professional courses immediately using established library objects without needing advanced Lectora skills.
Centralized updates: While library objects don't update dynamically across courses, centralized source files make it easier to maintain and distribute updated versions.
Reduced redundancy: Team members stop reinventing the wheel, spending time on content and instructional design rather than rebuilding common interactions.
Popular Interactions from the Demo
We polled the audience about which interactions they'd most like to see built in detail. The overwhelming winner (two-thirds of respondents) was the content carousel, the component that allows learners to navigate through multiple content cards using forward and backward arrows.
This interaction includes several thoughtful features:
- Bidirectional navigation (forward and backward)
- Progress tracking showing current position
- Completion logic that only enables next page navigation after viewing all cards
- Visual consistency with the overall design system
We’ll show how to build this interaction in a future Learning Lab LIVE, so stay tuned for that.
Key Takeaways
Start with atomic thinking. Breaking your design system into atoms, molecules, and organisms creates a logical structure that scales easily.
Build collaboratively first. Create your initial component library with one person or a small team to ensure cohesion before distributing to larger teams.
Balance flexibility and structure. Save both complete pages and individual components. Some developers prefer ready-made layouts, while others prefer to assemble their own.
Test accessibility. While we didn't have time to fully validate accessibility during the session, it's critical to test components with screen readers and keyboard navigation before sharing with teams.
Organize deliberately. Use clear naming conventions and folder structures in your library so team members can quickly find what they need.
Templates accelerate everything. Combining base templates with library objects means new courses start with proper structure and styling already in place.
Keeping these things in mind will help you build a cohesive system that will help you develop courses at a faster pace with more consistency.
Want to see recordings from previous Learning Lab LIVE sessions? Check out our archive, or connect with us to discuss how library objects could streamline your team's Lectora development workflow.
