![](https://framerusercontent.com/images/3qpHX6Rg7x9orHPSdMSpFDaiA.png?scale-down-to=4096)
Bana.io
/
![](https://framerusercontent.com/images/3qpHX6Rg7x9orHPSdMSpFDaiA.png?scale-down-to=4096)
Bana.io
/
![](https://framerusercontent.com/images/3qpHX6Rg7x9orHPSdMSpFDaiA.png?scale-down-to=4096)
Bana.io
/
An intelligent plug-in for Figma that sparks designers’ creativity with AGI-powered inspiration
Team
Team project - Gunjan Alagh Vedanshi Mishra Arushi Kumar
Contribution
UX Design Conceptualisation Prototyping Research
Timeline
2 weeks
00. Research
![](https://framerusercontent.com/images/YzD9w1aZeHj56zkq2LVjP3vg.png)
What inspires designers?
![](https://framerusercontent.com/images/1XX9c8RSHbK7x5ksRGw8TzoDhKs.png)
01. So, we began brainstorming what the future of Figma might look like..
![](https://framerusercontent.com/images/gIji7DrS6f6O9kiG2tNTCqoYfg.png)
and what would a UX design role look like in the future
![](https://framerusercontent.com/images/xJycbJw9RXkLKCSAzsD09VppIw.png)
From talking to designers and mapping the future of design roles we understood that a large role of generative AI in designing would be to generate implicit inspiration that sparks the creativity of designers
02. Words -> Ideas -> Inspiration
![](https://framerusercontent.com/images/q731WRdlsktpDUw6fL1IMaThB2A.png)
What traditional tools can be used to ignite creativity and inspiration?
![](https://framerusercontent.com/images/YjpSlPnfCFrEbtAPKvpIPfCCfv4.png?scale-down-to=4096)
03. Origami Prototype using ChatGPT API
We created an interaction for the listening feature, which begins when the user clicks on the listening icon. The pre-written text is then displayed slowly to imitate the text-to-speech interaction.
![](https://framerusercontent.com/images/4hRKNB3qJ0DApGpQMfghfKMWsc.png)
To switch between tabs - Journey (Mind map), Analog (mood-board), and Mood (music of the theme), use this interaction. You will see a progress bar in between to indicate the loading screen as chatGPT API may take some time to load.
![](https://framerusercontent.com/images/QrtuqcT80xg40GkuSVco1dLlVq4.png)
ChatGPT creates a prompt using various user inputs, to generate a prompt that will initiate the Gen AI creation process
![](https://framerusercontent.com/images/vbLOldf2AA8dl7SSRq9fmlrzz88.png)
and lastly the sound player plays the corresponding music to the user input.
![](https://framerusercontent.com/images/umhsfRROraIa4VxBlQNlLG0CkE.png)
04. User Flow
We created a simple user flow to allow designers to quickly review their inspiration options and drag the chosen one into their workspace in Figma. Bana.io transcribes the initial product meetings from speech to text accurately, and then identifes relevant keywords to offer valuable implicit inspiration.
![](https://framerusercontent.com/images/ZgbRlAsYELKk87pFPFUSE5cZbc.png)
05. BANA.io plug-in
The goal was to design a simple user interface with some automated features so that designers can concentrate on the meeting until it's time to begin generating ideas for the designs.
![](https://framerusercontent.com/images/jgbPBJ4iimCL3EA7iyJAEd3hSy4.png?scale-down-to=4096)
06. Prototype Video
07. Validation
We conducted a test on BANA.io with six designers. Although we didn't have time to incorporate their feedback, we are currently working on advancing the project and making improvements to the design.
![](https://framerusercontent.com/images/sMBmrjhRNB3b2d2U4F1C99a02A.png)
![](https://framerusercontent.com/images/rDWIfp36FaUF5kc9yLZAKrOk8.png)
Reflections and Learnings
When designing for fellow designers, it is important to provide structure without limiting creativity.
Involving designers in co-design activities at the beginning of the process can lead to a diverse range of ideas.
It is also crucial to test frequently and at an early stage.
An intelligent plug-in for Figma that sparks designers’ creativity with AGI-powered inspiration
Team
Team project - Gunjan Alagh Vedanshi Mishra Arushi Kumar
Contribution
UX Design Conceptualisation Prototyping Research
Timeline
2 weeks
00. Research
![](https://framerusercontent.com/images/YzD9w1aZeHj56zkq2LVjP3vg.png)
What inspires designers?
![](https://framerusercontent.com/images/1XX9c8RSHbK7x5ksRGw8TzoDhKs.png)
01. So, we began brainstorming what the future of Figma might look like..
![](https://framerusercontent.com/images/gIji7DrS6f6O9kiG2tNTCqoYfg.png)
and what would a UX design role look like in the future
![](https://framerusercontent.com/images/xJycbJw9RXkLKCSAzsD09VppIw.png)
From talking to designers and mapping the future of design roles we understood that a large role of generative AI in designing would be to generate implicit inspiration that sparks the creativity of designers
02. Words -> Ideas -> Inspiration
![](https://framerusercontent.com/images/q731WRdlsktpDUw6fL1IMaThB2A.png)
What traditional tools can be used to ignite creativity and inspiration?
![](https://framerusercontent.com/images/YjpSlPnfCFrEbtAPKvpIPfCCfv4.png?scale-down-to=4096)
03. Origami Prototype using ChatGPT API
We created an interaction for the listening feature, which begins when the user clicks on the listening icon. The pre-written text is then displayed slowly to imitate the text-to-speech interaction.
![](https://framerusercontent.com/images/4hRKNB3qJ0DApGpQMfghfKMWsc.png)
To switch between tabs - Journey (Mind map), Analog (mood-board), and Mood (music of the theme), use this interaction. You will see a progress bar in between to indicate the loading screen as chatGPT API may take some time to load.
![](https://framerusercontent.com/images/QrtuqcT80xg40GkuSVco1dLlVq4.png)
ChatGPT creates a prompt using various user inputs, to generate a prompt that will initiate the Gen AI creation process
![](https://framerusercontent.com/images/vbLOldf2AA8dl7SSRq9fmlrzz88.png)
and lastly the sound player plays the corresponding music to the user input.
![](https://framerusercontent.com/images/umhsfRROraIa4VxBlQNlLG0CkE.png)
04. User Flow
We created a simple user flow to allow designers to quickly review their inspiration options and drag the chosen one into their workspace in Figma. Bana.io transcribes the initial product meetings from speech to text accurately, and then identifes relevant keywords to offer valuable implicit inspiration.
![](https://framerusercontent.com/images/ZgbRlAsYELKk87pFPFUSE5cZbc.png)
05. BANA.io plug-in
The goal was to design a simple user interface with some automated features so that designers can concentrate on the meeting until it's time to begin generating ideas for the designs.
![](https://framerusercontent.com/images/jgbPBJ4iimCL3EA7iyJAEd3hSy4.png?scale-down-to=4096)
06. Prototype Video
07. Validation
We conducted a test on BANA.io with six designers. Although we didn't have time to incorporate their feedback, we are currently working on advancing the project and making improvements to the design.
![](https://framerusercontent.com/images/sMBmrjhRNB3b2d2U4F1C99a02A.png)
![](https://framerusercontent.com/images/rDWIfp36FaUF5kc9yLZAKrOk8.png)
Reflections and Learnings
When designing for fellow designers, it is important to provide structure without limiting creativity.
Involving designers in co-design activities at the beginning of the process can lead to a diverse range of ideas.
It is also crucial to test frequently and at an early stage.
An intelligent plug-in for Figma that sparks designers’ creativity with AGI-powered inspiration
Team
Team project - Gunjan Alagh Vedanshi Mishra Arushi Kumar
Contribution
UX Design Conceptualisation Prototyping Research
Timeline
2 weeks
00. Research
![](https://framerusercontent.com/images/YzD9w1aZeHj56zkq2LVjP3vg.png)
What inspires designers?
![](https://framerusercontent.com/images/1XX9c8RSHbK7x5ksRGw8TzoDhKs.png)
01. So, we began brainstorming what the future of Figma might look like..
![](https://framerusercontent.com/images/gIji7DrS6f6O9kiG2tNTCqoYfg.png)
and what would a UX design role look like in the future
![](https://framerusercontent.com/images/xJycbJw9RXkLKCSAzsD09VppIw.png)
From talking to designers and mapping the future of design roles we understood that a large role of generative AI in designing would be to generate implicit inspiration that sparks the creativity of designers
02. Words -> Ideas -> Inspiration
![](https://framerusercontent.com/images/q731WRdlsktpDUw6fL1IMaThB2A.png)
What traditional tools can be used to ignite creativity and inspiration?
![](https://framerusercontent.com/images/YjpSlPnfCFrEbtAPKvpIPfCCfv4.png?scale-down-to=4096)
03. Origami Prototype using ChatGPT API
We created an interaction for the listening feature, which begins when the user clicks on the listening icon. The pre-written text is then displayed slowly to imitate the text-to-speech interaction.
![](https://framerusercontent.com/images/4hRKNB3qJ0DApGpQMfghfKMWsc.png)
To switch between tabs - Journey (Mind map), Analog (mood-board), and Mood (music of the theme), use this interaction. You will see a progress bar in between to indicate the loading screen as chatGPT API may take some time to load.
![](https://framerusercontent.com/images/QrtuqcT80xg40GkuSVco1dLlVq4.png)
ChatGPT creates a prompt using various user inputs, to generate a prompt that will initiate the Gen AI creation process
![](https://framerusercontent.com/images/vbLOldf2AA8dl7SSRq9fmlrzz88.png)
and lastly the sound player plays the corresponding music to the user input.
![](https://framerusercontent.com/images/umhsfRROraIa4VxBlQNlLG0CkE.png)
04. User Flow
We created a simple user flow to allow designers to quickly review their inspiration options and drag the chosen one into their workspace in Figma. Bana.io transcribes the initial product meetings from speech to text accurately, and then identifes relevant keywords to offer valuable implicit inspiration.
![](https://framerusercontent.com/images/ZgbRlAsYELKk87pFPFUSE5cZbc.png)
05. BANA.io plug-in
The goal was to design a simple user interface with some automated features so that designers can concentrate on the meeting until it's time to begin generating ideas for the designs.
![](https://framerusercontent.com/images/jgbPBJ4iimCL3EA7iyJAEd3hSy4.png?scale-down-to=4096)
06. Prototype Video
07. Validation
We conducted a test on BANA.io with six designers. Although we didn't have time to incorporate their feedback, we are currently working on advancing the project and making improvements to the design.
![](https://framerusercontent.com/images/sMBmrjhRNB3b2d2U4F1C99a02A.png)
![](https://framerusercontent.com/images/rDWIfp36FaUF5kc9yLZAKrOk8.png)
Reflections and Learnings
When designing for fellow designers, it is important to provide structure without limiting creativity.
Involving designers in co-design activities at the beginning of the process can lead to a diverse range of ideas.
It is also crucial to test frequently and at an early stage.