Design Element Association Across Multiple Artboards
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Design tools lack flexibility in managing repeated design elements across multiple user interface screens, requiring tedious and error-prone updates when changes are needed, as reusable design elements must be generated upfront and cannot be applied after elements are copied and pasted.
Innovation Solution
A computer-implemented method and system that allows designers to initiate an isolation session, associating and modifying design elements across multiple artboards, enabling universal modification of design elements while maintaining individual customization, by using a design element association data structure to link elements and mirror changes within an isolation session.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If reusable design elements are generated upfront, then design consistency across multiple screens is improved, but flexibility to modify elements independently is lost and elements cannot be applied after copy-paste
Solution Approach 1:
The system dynamically switches between two modes: isolation session mode where modifications are mirrored across all instances of a design element, and normal mode where instances can be modified independently. This dynamic behavior allows the system to adapt to different design needs at different times, resolving the contradiction between consistency and flexibility.
Solution Approach 2:
The system changes the operational parameter of design elements from static (either consistently updated or independently modified) to dynamic (controllable through isolation sessions). By introducing the isolation session parameter, designers can toggle between consistent updates and independent modifications based on current needs.
2Adaptability or versatility
If design elements are copied and pasted across multiple screens, then design flexibility is improved, but update efficiency deteriorates due to repetitive manual changes
Solution Approach 1:
The system performs preliminary action by automatically creating associations between copied design elements at the moment of copy-paste. This preliminary association setup enables future bulk updates without requiring manual intervention, thus improving update efficiency while preserving design flexibility.
Solution Approach 2:
The system provides feedback by tracking and mirroring modifications across all associated design element instances. When a designer modifies an element in isolation session, the system automatically applies the same modification to all linked instances, providing immediate feedback and eliminating repetitive manual updates.
3Productivity
If reusable design elements are used, then update efficiency is improved, but the ability to apply elements after copy-paste is lost
Solution Approach 1:
The system performs preliminary action by automatically establishing associations between design elements during copy-paste operations. This preliminary association enables the elements to function as reusable design elements later, even though they were initially copied individually, thus improving update efficiency without losing late application capability.
Solution Approach 2:
The system introduces an intermediary mechanism (isolation session) that bridges between individually copied elements and reusable design elements. The isolation session acts as a mediator that enables bulk updates across copied elements without requiring them to be pre-defined as reusable elements, thus maintaining adaptability while improving productivity.
4Area of stationary object
If multiple artboards are displayed simultaneously, then design overview is improved, but focus on specific elements deteriorates
Solution Approach 1:
The system extracts and isolates specific artboards containing the selected design element and its instances into an isolation session. This extraction removes distracting elements from the view, allowing designers to focus on the specific element being modified while maintaining the ability to see multiple artboards in the background if needed.
Data Source
AI summary
Systems and methods for design element association and modification are provided. An example method for editing elements in multiple artboards includes receiving an isolation session-initiation user input that identifies a first design element arrangement on a first artboard in a workspace on a user interface. The method also includes, responsive to receiving the isolation session-initiation user input, identifying a second artboard in the workspace based on the second artboard including a second design element arrangement that is associated with the first design element arrangement, and updating the user interface to display the first artboard and the second artboard within an isolation session. As an example updating the user interface may include displaying the first design element arrangement and the second design element arrangement using a first style, and displaying other portions of the first artboard and the second artboard using a second style.