Code Block Elements for Collaborative UI Canvas Prototyping

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Software design tools face challenges in integrating functional and aesthetic aspects while managing legal requirements, making it difficult to track multiple objectives and requirements in application user interfaces.

Innovation Solution

An integrated graphic design system (IGDS) that enables the creation and use of code block elements, allowing for the rendering of executable program code on a canvas, which can alter the canvas or other elements, call plugins, and facilitate collaborative coding sessions.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If designers use traditional software design tools to create user interfaces, then they can achieve functional and aesthetic design objectives, but it becomes difficult to track multiple objectives and requirements simultaneously

Engineering Contradiction:

ImproveAbility to track multiple objectives and requirementsVSAvoidComplexity of managing design objectives

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent segments the design system into distinct components: code block elements that represent specific functional requirements, visual canvas elements for aesthetic design, and a tracking mechanism that monitors multiple objectives separately. This segmentation allows designers to track each objective independently while maintaining overall system coherence.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent introduces an intermediary tracking system that mediates between the visual design canvas and the underlying code block elements. This intermediary layer maintains a registry of objectives and requirements, allowing designers to track multiple goals simultaneously without directly managing the complexity of all design elements.

Inventive Principle:

Principle #24Intermediary (Mediator)

2Productivity

If developers manually share and demonstrate code in collaborative sessions, then they can facilitate coding collaboration, but it time-consuming and inefficient

Engineering Contradiction:

ImproveEfficiency of code sharing and demonstrationVSAvoidTime spent on manual code sharing

Core Design Contradiction:

ProductivityVSLoss of time

Solution Approach 1:

The patent implements automatic copying functionality where code block elements can be replicated and reused across different parts of the design canvas. When a code block is created or modified, the system automatically updates all instances, eliminating manual code copying and reducing time loss in collaborative sessions.

Inventive Principle:

Principle #26Copying

Solution Approach 2:

The patent enables preliminary action by allowing developers to pre-define code block elements with common functionality before collaborative sessions begin. These pre-configured code blocks can be quickly shared and demonstrated during collaboration, reducing the time needed to manually create and explain code during meetings.

Inventive Principle:

Principle #10Preliminary action

Data Source

PatentUS12524213B2Code block element for integrated graphic design system

Publication Date: 2026.01.13 FIGMA INC

AI summary

A computing system or application that enables generation and use of code block elements. A code block element refers to a graphic element that is rendered on a canvas to include content in the form of program code. In examples, the text content of the code block element can include syntax and other formatting that is in accordance with a selected programming language.