Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Quick Overview

Framer allows designers to connect Vector Sets, like Phosphor or Vex, directly to CMS collections, enabling icons and other visual properties to be driven dynamically by content variables, which simplifies content management and scales visual consistency across dynamic pages.

Key Points: Vector Sets (Phosphor, Vex) can be added as a field type within a Framer CMS collection structure. The tutorial demonstrates adding a 'Vector Set' field type, choosing between available sets like 'Project' or 'Framer Academy' (Phosphor), or 'Vex' set. After defining the field, each CMS item (e.g., blog posts) can be assigned a specific icon from the linked Vector Set. When the CMS list renders on a page, the assigned icon is displayed, and its properties (like color or width) can be linked to other CMS variables, such as a dedicated 'Color' field. Selecting an item in the CMS list (like 'Plugin API 3.0') and setting its 'Icon' property to a variable like 'Vex' ensures the icon updates dynamically when the CMS content changes. This dynamic connection allows visual elements like icons to be controlled entirely by the CMS data, improving scalability and consistency for lists and dynamic content layouts.

Context: This video tutorial, presented by Justin Jones (Education at Framer), focuses on advanced integration between Framer's Content Management System (CMS) and its Vector assets, specifically showing how to use Vector Sets (like Phosphor and Vex) as dynamic fields within CMS collections. This technique allows designers to control visual elements, such as icons, based on the specific content of each CMS entry, thereby increasing design scalability and reducing manual updates.

Detailed Analysis

The tutorial explains how to leverage Vector Sets within the Framer CMS to make icons dynamic. First, in the CMS 'Edit Fields' tab for a 'Blog' collection, the user adds a new field by clicking the plus icon. They select 'Vector Set' as the field type and choose an available set, such as 'Vex', which is then linked to the CMS collection. Once the field is defined, navigating to a specific CMS item, like 'Plugin API 3.0', allows the user to assign a specific icon from the 'Vex' set (e.g., 'storefront') to that item's 'Icon' property. Crucially, the user then sets this icon property to be driven by a CMS variable by clicking 'Set Variable' and selecting the newly created Vector Set field. This action causes the displayed icon on the design canvas (which is sourcing data from the CMS list) to automatically change based on the data in the CMS entry, such as switching from the default icon to the assigned 'storefront' icon when viewing the 'Plugin API 3.0' entry. Furthermore, other visual properties of the icon, like Color or Width, can also be linked to other CMS fields (like a designated 'Color' field), offering comprehensive control over dynamic visual styling across all CMS-driven elements.