@tm_prof_rs - problem solved
How? Is there some feature update of some kind?
Agreed, this could eliminate competitors such as proto-pie.
Been using Figma for a couple of weeks and already hit the very solid brick wall of Figma’s lack of conditional logic. It is basically non-existent. But, I really like the way Figma works for creating graphical elements and its embrace of atomic design.
I think that if Figma were to develop a truly sophisticated logic engine they would have to make the support of external data sources first-class, too. This could include native support for realtime data sync with Airtable, Google Sheets, Office 365 Excel, and sophisticated GraphQL support for connection to GraphQL Endpoints like Hasura, Apollo and Dgraph (a graph database with a native GraphQL frontend).
The natural fit for conditional logic processing is the Finite State Machine and Finite State Chart. A FSM & C conditional logic engine would be an awesome, intuitive way to model atomic component states in Figma. FSMs can be represented beautifully and elegantly in visual design by hiding a lot of the underlying engine’s complexity and integration with the natural intuitiveness of atomic components in Figma.
Because FSMs and Charts can be presented as flow charts the engine could also be used to model user flows as well as atomic UI component states and interactions.
Here, David Khourshid presents FSMs for UI development:
Also, FSM and Chart logic can be applied to different UI mocks.
Here is an article on Marvel’s website about FSMs and UI design. Surprisingly Marvel has not implemented this in their own app:
1 Like
One of the things that stands out is that Figma has implemented a “micro” approach to variants, state and its limited conditional logic.
A micro implementation focuses on localised states using configuration. This gets messy very quickly when trying to configure many-to-many flows across the UI.
What is missing is a complementary “macro” implementation.
A macro implementation would focus on composition of components as nodes in a visual graph, linking the micro states together.
Both Unity and Unreal Engine use node-based graphs to visually design different types of logic flows:
3 Likes
Here is another example of using Graphs of Nodes to visualise macro flows and interactions. This is how n8n makes it easy for users to create workflows within their connection automation tool:
Notice how each Node can be configured at the micro level with detailed specifications and configuration.
Further thinking about Figma’s micro component configuration approach - it is a bit like a tightly coupled class inheritance hierarchy in object oriented programming, where instances are tightly integrated through micro level shared states.
A macro analogy in programming would be to add a paradigm of composition and message/event passing from functional programming.
Designing visual and mental user interfaces is about composing flows as much as the configuration of elements that comprise components. At some intuitive level components can become Nodes that can then be composed a lot more easily in a visual flow than just through localised configuration.
3 Likes
needs this please!!
1 Like
would make life 100xs easier with this!
1 Like
Just adding that me and all our other designers could really use this.
I’m still forced to make numerous screens just to show different paths.
I’m nodding so hard to this I feel like my head is gonna fall off
1 Like
Also, please add a feature like: if the user scrolls down more than an xxx pixel, then some component will become fixed to the page. Like the right date slider on this forum had
1 Like
Adding my voice, too, as I recently removed some screens from a design file because I was like, “Oh, I don’t need these screens because I have smart-animated switches!” but just remembered that I do need them, after all, because I need to present a dialog if the user proceeds in the workflow without enabling any switches. It would be nice to say, “on click: IF no components with name [variable] have a property of [property name] with value [property value]{ display overlay } ELSE { navigate to [screen name] }”.
Honestly, I think in most cases, getting bogged down in building the “perfect prototype” with conditional logic is not the answer, and can cost a lot in-terms of time managing the design asset over time. I always found that while using axure, at some point the complexities you would create would lead to the moment of, “I may as well build the front end.” A html prototype of sorts, but in a lot of cases, just building the html prototype using whatever framework the team is using e.g material or tailwind, the dev team can take the code and carry it forward… I can see why this might be a tricky, complex road for figma to go down, however I have no doubt that when they do decide to add some basic logic, it will be an elegant solution to the problem. I usually get around the problem of complex interactions, by building a liner journey in figma that would not work perfectly for anyone else using it, but works for the purpose of recording a video of the interaction which can be embedded in the jira ticket with loom or something similar. XD has inbuilt video recording for this purpose (or at least it did before I made the switch to figma 1.5years ago). That being said, without conditional logic it makes unmoderated testing a challenge unless it’s specific journeys with specific goals…?
2 Likes
That’s why I just want them to create something really simple. A little “conditional” widget you drag on the canvas, you can connect do it, and it just has a variable that can be changed by another one of the current canned event list / actions. When someone clicks something that goes to that if/then widget, it checks that variable and sends them on their merry way.
3 Likes
+1 This would be extremely useful to do in one application.
1 Like
OMG n8n is great! Did not know such a thing existed. Since I’m a designer n8n won’t be useful for me for now but I’m just happy to know that such a great tool is out there!
1 Like
agreed. I’ve been solely using Origami Studio for complex prototyping purposes, and it’s not because I like OS but because there are many things that only OS is able to achieve, for me as a designer who has no technical background, from a prototyping + visualization-heavy perspective. If Figma is somehow able to provide OS or sudo-OS level of logic capability and complexity it would truly be a dream-come-true for me
1 Like
I work with 15 other UX Designers at University of Phoenix. We recently switched from UXPin to Figma and knew what we were getting ourselves into.
UXPin is incredible at conditional logic via prototyping, but huge learning curve, very complicated to use, and very buggy. Three things which comes as a package with conditional logic prototyping. Most of our designers never ventured in UXPin’s IF/ELSE territory. As others have mentioned, some designers simply don’t have that kind of time with 2 week sprints.
We do a good amount of user testing where conditional logic is NEEDED. We love the ease of implementation around design systems and the stability of Figma, but oh boy do we sure miss UXPin’s prototyping logic. Being able to mock up two input fields and render different results based off input field combinations is really powerful. There are certain ways to “fake” this in Figma, but not without incredible efforts and multiple screens. The more input field selections you have, the more complicated this gets. Forget about making it a reusable component. Not worth the time and effort.
We are having to look into programs such as Proto.io or Protopie for conditional logic prototyping. The first company who can merge these two worlds (without sacrificing usability and stability) will have companies flock towards their product in droves. We just hope Figma becomes that company!
6 Likes
Dear Figma folks,
Please bring variables and conditions… my prototypes are overwhelmed with redundant screens… 
I’m using Protopie for advanced prototypes and it does a fair job, but keeping screens in two different platforms is a mess…
Please!!!
3 Likes
figma, please add this!
i’m using linux mainly and protopie can’t be used in linux even using wine. figma can be used on the web so i can finally prototype without using windows/mac if added
(sorry for bad english)
1 Like