Functional text input in Figma - Using #variables and #conditionals
Finally, we can have text inputs in our prototype that users can really type in and we use the given value in our design.
I will use variables and then #conditionals prototyping to make this input. so get sure to watch this video until the end.
🔗Link to the #figma file:
📌 Timestamps:
0:00 - Intro
0:25 - What you will see in this video
1:26 - Step one: design the input
2:21 - Step two: Create a variable
3:12 - Step three: Prototype the active state for input
3:41 - Step four: Interaction
6:06 - Step five: Delete the icon
6:19 - Make an example
7:10 - Demo
Whether you’re a beginner or an experienced designer, you’ll find valuable insights in this tutorial. Follow along and take your Figma skills to the next level with this captivating micro-animation technique.
👍 If you found this tutorial helpful, don’t forget to give it a thumbs up and subscribe to the channel for more design tips and Figma tutorials!
Let’s Learn together #UX and #UI , #Design, #figma #prototype
🔔 Subscribe for weekly design tutorials:@Kimoartcave
--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
Variables: create dial pad:
Advance micro-interactions in Figma:
--------------------------------------------------------------------------------------------
🌐 Connect with me:
Instagram:
Photography:
Twitter:
TikTok: @
LinkedIn:
1 view
248
154
1 year ago 00:08:09 1
Functional text input in Figma - Using #variables and #conditionals
4 years ago 00:22:54 1
Text Functions (Mətn Funksiyaları) - Azerbaijani Clean, Trim, Text, Dollar, Len and others
4 years ago 00:09:35 68
#4 - Structured Text // Функция или функциональный блок?
4 years ago 00:07:58 13
ФУНКЦИЯ СОДЕРЖИТ В РЕДАКТОРЕ POWER QUERY
10 years ago 00:03:08 141
Изучаем jQuery | Урок №14 - Функция html() и text()
7 years ago 00:13:34 40
Inkscape Tutorial: Retro Text Poster
9 years ago 00:12:09 86
jQuery Tip 4 Text Size Modifier
7 years ago 00:06:00 7
Text Translation with Firebase Cloud Functions onWrite and Angular 4
5 years ago 00:23:04 1
EDIUS X (new function) Tracking Text, SYNC, EXPORT
4 years ago 00:03:29 133
Microsoft Flight Simulator | First FUNCTIONAL Aircraft Carrier | Hard Deck Simulations
2 years ago 00:09:23 3
Solving Jensen’s Functional Equation
7 years ago 00:05:24 76
Sublime Text 3 Полезные фишки, функции и приёмы редактора, Видео курс по Sublime Text 3, Урок №4
4 years ago 00:02:14 13
Лайфхак Fusion 360: обзор функции Text on Path. Часть 1
2 years ago 00:12:29 45
Echo Text Displacement Effect - After Effects Tutorial
4 years ago 00:19:38 20
Long Shadow Text Effect with Inkscape
5 years ago 00:04:25 19
1:18 functional OLED Display in AUDI RS6 C7 Dashboard / Dashpanel
4 years ago 00:02:47 45
Offset text в программе Cricut Design Space. Новая функция
6 years ago 00:04:46 9
Power Query: пример использования функции ()
2 years ago 00:11:32 1
How to use the function of Text Scrolling | DWIN DGUS Software Tutorial
5 years ago 00:05:59 3
Power Query: Функция (Если содержит)
5 years ago 00:12:02 1
Text to column Function (Hindi) | Microsoft Excel | 6 Examples | MIS Family | Sharda Mandal