Skip to main content


  1. If a screen in a complex flow has multiple entry points and conditions it’s impossible to prototype in Figma.




  2. Axure RP allows for setting variables say “From Home dashboard” and using IF else statements, to manage complex prototypes. I would love this feature in Figma. Axure RP, UX Pin and Framer allows for this, but I would prefer to just use Figma for “complex” prototypes too.




Is anyone using a plugin or workaround to help solve this?, etc.

Did you check JustinMind and UXPin? It have conditional logic and much other features relatetd to variables (if / than / else / string/ number/ global…)


Hi! I looked into them but not much. I need to spend more time on them…


I am receiving some job offers, and what has surprised me is that both requested Axure and investigating the platform and I could not understand why they worked with that tool because at first glance it seems a platform only for wireframe or that looks complicated to prototype in high resolution.


But doing a little more research, I saw something that surprised me: prototyping programming.


image


I imagine Figma and we could start exploring all this potential.



  • “If the input text is “piano”, then switch to variant 2 of the submit component.”

  • “If you click on an icon it takes you to this page but shows a modal, if you click on another, it takes you to the same page (we avoid repeating it) and shows you another modal.”


docs.axure.com

This is seriously needed. I’m torn between continuing to use Axure and moving everything to Figma. The design experience of Axure sucks; yet the prototyping is just so powerful. Figma’s already grown so much, and if the team were to take this on this software would become a cut beyond the rest.


I also did that but I could not import the Figma files into justinmind at all. It seems Justinmind is a very outdated app.


If Figma needs resources to get the top 10 highest voted community features done faster, we (the community) would be happy to help. Figure out how much would it cost to hire extra resources, then create a crowdfunding campaign. I would be totally happy to chip in $100 just to get such important features done by end of the year.


I recently have been thinking about the logistics of advanced prototyping, and the unfortunate divide between design apps and prototyping apps. I came here to make a post about expanding Figma into the advanced prototyping territory and found this one.


Design apps are very product design forward which I like, and also afford some prototyping, and prototyping apps continue to add features to afford straight-up design processes as well. But, you don’t really see a lot of folks talking about UXPin or Axure as their primary design tool. Coming from Sketch a few years ago (and having used XD for one project because I had to), while obviously not perfect Figma is just smarter and imho better with its conventions and methods and I think justified in why it is the conversation in product design tools.


I’ve been using ProtoPie for the past two years for advanced prototyping, and with its formulas, variables, conditional logic, functions, etc, we can build almost anything. Although its interaction model is great, it definitely needs work. Before that I tried UXPin, Justinmind, Protor.]io, and Framer (that one’s over-reliant on React but if you’re working on a product team with your devs and a React code base then maybe that makes sense).


BUT, I’ve been thinking that it is just bonkers to need two tools to accomplish this kind of output. The notion (and reality) of managing two sets of assets in an iterative process is just wrong (not to mention lack of parity of features upon import). I kept thinking that doing even half of what we’re doing in ProtoPie within Figma makes a lot more sense. So yes, conditions, variables, scroll events, detecting state or value change… please let’s move in that direction. I, for one, would love to completely ditch using another tool and I think we’d all agree.


As many others here I’ve been looking at “complementary” tools for Figma, to get a “real” prototyping toolset.


I only started using Figma about a year ago, and it’s not until recently that I’ve started evaluating moving all my development UI/UX and prototyping needs over to Figma 100%.


However, as most have pointed out… Figma is great and awesome for the design process… now it needs to focus on more robust (“real”) prototyping, with states, conditions, basic elements e.g. input fields like text, password etc, dropdown etc.


As @jerimy_brown said: “If y…] Figma get’s this functionality they could easily corner the market.” 👌


One hundred percent! If the Figma team can shift focus to creating better and more advanced prototyping (to better reflect real world scenarios, without X number of extra screens, overlays and other “hacks”), then I don’t see anything stopping Figma from dominating as the go to tool for both designers and developers 🙌


Agree completely with this


Hey, one way to do awesome conditionals, is to use ProtoPie (https://protopie.io). It has had full support for conditionals, along with a lot of different event triggers (e.g. page load and exit) for years. In addition, its prototypes can use smartphone sensors to trigger actions. I’ve built a couple of Augmented Reality prototypes in ProtoPie - you just connect the tilt/acceleration sensor so it scrolls your layers, and you can pretty much duplicate Pokemon Go. ProtoPie is used a lot for game prototyping for this reason, as well as automotive UX/UI design - you can connect the prototype to actual hardware, even robot boards.


ProtoPie has OK Figma imports - not as good as one would wish. But if you have to do interaction, it blows Axure out of the water.


Also, you can do string comparisons. So it is possible to create a real password login test, where users type in a password, and it has to be a specific password.


The last Figma update had some really nice “must haves”, e.g. individual border control, better auto layout and absolute positioning (still missing grid here though 😉 ) etc… But now it’s time for some more robust prototyping 💯 🙌 🥳


Thanks again to the Figma team for all the great work so far! 🤩


For me,



  1. having one component interaction able to trigger other component changes dynamically

  2. screen entry and exit triggers

  3. Delays and loops in components


Would get to 90% of what I need. Smartphone sensor support, and some 3D support (e.g. WebXR) would be 100%.


so true. I’m 200% happy with where Figma’s going now based on the super solid set of new features/enablements made by the team following ConFig 2022 - this gives me huge hope that Figma will probably not end up like Adobe XD (which we all know what happened… in the beginning everything was rosy and we thought Adobe for once finally started making a product that’s actually snappy, sleek and user-led, but later…)


Still, this… conditions, logic, variables, when these things are made available to users in the right way, that’s the thing that truly sets a powerful, fast and capable prototyping tool apart from a bunch of self-claimed ones. And honestly, I don’t think many working designers out there faced with tasks, deadlines and expectations would say they have the extra time to try out yet another self-claimed prototyping tool then be disappointed yet again.


@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:


Crafting Stateful Styles with State Machines by David Khourshid | CSSConf BP 2019|Crafting Stateful Styles with State Machines by David Khourshid | CSSConf BP 2019



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:

Marvel Blog – 2 Jul 18

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:

docs.unrealengine.com


Streamline your game dev workflow with visual scripting in Unity | Unity GDC Showcase 2021|Streamline your game dev workflow with visual scripting in Unity | Unity GDC Showcase 2021


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.


needs this please!!


would make life 100xs easier with this!


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


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