The Dei

Welcome to theDei channel,. my channel is focus to UI/UX Design, especially for Figma users. Most of my video, is tips and trick and how to.

The Dei
Figma variable is cool features that figma ever released. and makes figma as leading a tool focus in UI UX design editor. in this video I want to show you how this tool and add plugin can boost your workflow and speed up process design. and also stay up to date with latest figma features.
Figma101 – How to Automatic Convert Style and Untokenized Properties to Figma Variables in Seconds
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3Lmk3dDY5WWhKSWFZ

The Dei September 9, 2023 10:17 am

In this video, I am going to show you how to generate variables collection using tokens studio plugin in figma. with new figma features designing user interface is very easy and more advanced.
Figma101 – How to Generate Variables Collection Using Tokens Studio
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3Li10eFh4alduUXRj

The Dei July 23, 2023 11:03 pm

Halo, di video ini saya ingin berbagai cara membuat button dengan menggunakan fitur figma variable dengan multi collections. caranya cukup mudah, dan lebih menghemat resource figma. jadi kini dalam pembuatan component cukup yang penting nya saja, ukuran size dan states itu bisa di gunakan di variable. untuk lebih detailsnya silahkan tonton videonya. 00:04 - Intro 00:23 - Button Intro 01:36 - Membuat varible master color & spacing 04:00 - Membuat varible alias spacing button 04:53 - Membuat variable mode 06:01 - Membuat varible color states 07:45 - Mengkoneksikan varible components 10:39 - Outro #figma #figmaVariable #figmatips #figmatutorial
Figma101 – Cara Membuat Button dengan Variable Collections
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LlBzT2JYaWszVTJR

The Dei July 16, 2023 6:44 pm

In this video, I would like to share how to import local style to local variable and re-link it, in Figma. Figma variable is new feature but still in beta. this is suitable for existing project that you want to move your style to variable.
Figma101 – How To Import Local Style To Variable and Relink in Figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LkNDT2hXOE9NTkFB

The Dei July 1, 2023 10:37 pm

In this video, I would like to share my 5 tips before you make design tokens in figma using tokens studio ( Figma tokens ) Timeline: 00:02 - Intro 00:19 - Tips 1 Define Name Convention 01:28 - Tips 2 Tokens must be unique 02:12 - Tips 3 Color tokens 02:51 - Tips 4 Specific spacing tokens 03:37 - Tips 5 Upload to cloud base repository 04:34 - Outro
Figma101 – 5 Tips Before You Make Design Tokens in Figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LklvcllJTzZ4cV9r

The Dei June 24, 2023 6:21 pm

In this video, I am going to show how to create multi value spacing tokens. in Figma Studio. the goals is you can create specific spacing tokens for specific component, such as button, card, navigation etc.
Figma101 – How to create multi value spacing tokens
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LlFUUmcwbVcxVGVz

The Dei June 3, 2023 1:53 pm

Halo, selamat datang di the dei channel, di video kali ini, saya kan membagikan cara untuk membuat auto text color di aplikasi figma, caranya cukup mudah hanya menggunakan fitur color blend di dalam pemilihan warna dengan menambahkan beberapa formula. akan menciptkan perpaduan warna yang bisa secara otomatif berubah warna.
Figma 101 – Cara membuat text style auto color di Figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LjZUUDJCNnRsaElV

The Dei April 3, 2023 4:39 am

Hi, welcome back to the dei, channel. in this video I am going to teach you how to solve missinng libraries, especially text style. it's very easy to solve it. instead of check one by one. it exhausted for you to find it. I give you simple solution. watch my video... #figma #figma_tutorial #figma101 #figma_libraries
Figma101 – How to solve missing (text style) libraries in figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LmdSREdTZm1oRTlJ

The Dei February 4, 2023 6:07 pm

Halo, selamat datang di the dei, di video kali saya bahas fundamental atau dasar dari fungsi autolayout, di video sebelum saya sudah menjelaskan basic atau fundamental dari constraints nah di video sekarang lebih fokus di auto layout dan perbedaanya. Di 2023 ya bisa ini hal basic seharus, namun masih banyak yg belum paham cara, pebedaan serta penggunannya. #figma #figma_tutorial #figmatutorial
Figma101 – Autolayout v4 dan perbedaan constraints serta cara penggunaanya.
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3Ll9pTXNwQkhmUFdJ

The Dei January 30, 2023 1:00 am

Halo, selamat datang di the dei, di video kali saya bahas fundamental atau dasar dari fungsi constraints, cukup banyak yg belum paham dengan cara penggunaan fungsi fitur tersebut di figma. bisa dibilang hampir mirip dengan autolayout. namun tetep membutuhkan wrapper as frame group di dalam figmanya. yuk langsung saja kita bahas. #figma #figma_tutorial #figmatutorial
Figma101 – Constraints di figma, bahas fundamental dan cara penggunaanya.
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LlBpOHpPRlFxODg0

The Dei January 15, 2023 9:55 pm

#figma #figma_tutorial #figmatutorial #designtokens Hi, In this video I am going to show to fetch notion data table to figma. to fetch the data from notion, is not official support notion. so I found someone who has created the plugin to fetch the data from notion platform. to use it, you need create cloud server first, a bit tricky but easy to follow. so if you really want to know how to fetch the data, this video is suitable for you. a bit long the video, use the time to find what you need. so enjoy!. 00:15 - Overview 01:13 - Step 1 Configure Dash Cloudflare 06:29 - Step 2 Create notion tokens ( API ) 09:55 - Step 3 Configure sync notion plugin 18:45 - Outro Don't forget to subscribe!
Figma101 – How to fetch notion data table to figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LjZuREp1a25HWEtr

The Dei December 28, 2022 12:35 am

Hi, Welcome back to thedei channel, in this video I am going to show you how to export design tokens with hooks or automation and save your tokens to github. everything in this tutorial is UI stepper no need to learn single code. just follow the steps. 00:00 - Intro 00:53 - Install Exporter 02:47 - Connect to github. 04:22 - Type of event 05:30 - Create a new repo 05:57 - Create hook or automation 06:58 - Check the result. 09:07 - Added some changes. 10:54 - Outro
Figma101 – Export design tokens with hooks automation in Supernova
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LkxneFZWempiU01v

The Dei December 6, 2022 10:31 pm

Hi, welcome back to the dei, channel. in this video I am going to teach you how to solve missinng libraries, especially color style. it's very easy to solve it. instead of check one by one. it exhausted for you to find it. I give you simple solution. watch my video... #figma #figma_tutorial #figma101 #figma_libraries
Figma101 – How to solve missing (color) libraries in figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LmxEZDRkdG5UQlNn

The Dei November 22, 2022 5:45 pm

Hi, Guys. Welcome back to the dei tutorial, in this video you will learn how to create design tokens using Supernova platform. supernova is design system platfom. you will able to create design tokens, tokens theme, design system documentation, tokens exporter, and create hook with to your repository. In this video you will learn, how integrate your Figma design system to Supernova, and define design tokens. Timeline. 00:21 - Prepare the figma 01:30 - What's supernova 03:45 - Inside Supernova platform 04:26 - Design tokens in supernova 06:32 - Intergate figma file to supernova 07:37 - How to solve an issue. 09:17 - Set as shared library 12:26 - Read the issue. 15:43 - Tokens Set 16:43 - Alias Tokens 18:58 - Outro. #figma #figma_tutorial #designtokens #figmatips #figmatutorial #supernova
Figma101 – Design Tokens ( Color Tokens ) with Supernova
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LkFXNEJlNzVzV2VJ

The Dei November 13, 2022 8:56 pm

In this video you will going to learn how to create dynamic sidebar menu, all tutorial is using fully feature figma, such as autolayout, variant, bolean, swap instances, and also new feature nested instances. this tutorial suitable for you, as beginer, intermediate or expert in figma. #figma_tutorial #figma #figmatutorial #figmatokens #designtokens #figmatutorial_indonesia Timeline: 00:14 - Short explanation 01:11 - Step 1 Build menu foundation 05:03 - Add variant properties 06:51 - Set bolean element 09:09 - Step 2 Build molecules component 12:11 - Add swap instance 17:17 - Add nested instances 19:07 - Step 3 Build ogranism component 20:59 - Set ogranism nested instances 22:37 - Set Bolean element 26:08 - Adjustment padding component 32:26 - Outro
Figma101 – How To Create Dynamic Sidebar Menu in Figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LjAtVDJxWURjQks4

The Dei November 1, 2022 11:24 pm

Welcome back to my channel the dei, in this video, I am going to show how to copy style from multiple files in figma, and using JSON or witih Figma tokens. it's quick and easy. #figma_tutorial #figma #figmatutorial #figmatokens #designtokens #figmatutorial_indonesia
Figma101 – How to Copy Style From Different Files with Tokens {JSON}
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3Lkxacm1QSnBibEtr

The Dei October 22, 2022 12:00 am

Welcome back to the dei channel, in this video I am going to show you how to bulk rename style, Figma just released search and replacer layer and text data, but figma doesn't have the function to rename style at once, or bulk rename. figma only have bulk rename layer. this function probably nice to have, for some designer this function is helpful. if wondering to rename style at once or bulk rename, figma with plugin have the feature. #figma #figma_tutorial #thedei #figmatutorial #designtokens #figmatokens
Figma 101 – How bulk rename style in figma
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3LmdvRjJiazVaSXdr

The Dei October 17, 2022 12:15 am

Hi, Welcome back to the dei, channel. Figma just released new feature. the feature is Find and replace. this feature might standard for other platform. but this feature is really helpful for designer like me. this feature ablet find any type, layer, component, shape, frame etc. but really cool is you able to find and replace not layer name, but replace wording on the layer. #figma #figma_tutorial #figmaFind&Replace #FigmaTokens #figmatutorial #figmatips
Figma101 – New Feature in Figma, Find and Replace – Simple feature but it's helpful
YouTube Video VVVMMEFKTHhiNmNfVkVKdUg2SklvVXB3Lk1zZEp0REpDOFlB

The Dei October 7, 2022 11:52 pm

Load More… Subscribe