Figma for Edu: Variables and modes for layout in Figma

Get a copy of the activity file here: www.figma.com/community/file/...
Variables in Figma give designers the power to adapt layouts to different color modes, and content. In this workshop we will go over all of the basics when getting started with variables and modes for your design layouts. Explore what it takes to use variables to create a dark and light mode experiences, change the density of your spacing, vary the languages your design ui can accommodate, and so much more.
Led by Figma’s Designer Advocate for Education Miguel 'Miggi' Cardona, this is an intermediate monthly demo is for students, educators, teachers, instructors, teaching assistants, and those in the ed-tech space.
Figma is free to use. Sign up here: bit.ly/3msp0OV
Figma is free for education. Learn more: figma.com/education
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #FigmaEdu #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[@YoAML]

thanks for the tutorial, i started working with figma about a week ago and its impressive how an online app can do all this things

[@mjmartinez7]

Changed my life 😂😂 no seriously this walkthrough was the missing piece I needed for a current project. Thanks

[@alias.9500]

amazing to build design systems even more efficiently

[@user-sm9bp8gf3g]

Ok this makes ore sense than most videos out there. I can create the main local variables in my UI kit and share them with other designers. Perftect makes sense.

[@faruambient]

amazing! thanks for the explanation

[@christnhvv256]

MIGGI!!!!!😊
LOL
HAPPY NEW YEARS EVERYONE!

[@skyro13]

13:30 I still wish we could do math operations with prior defined variables. E.g., "base-unit-2" and following are multiples of "base-unit" without the need for manual definition.
This would also improve scaleability. Same goes for colors, etc.
EDIT:
Ah I should have watched the whole video first. At 23:14 Miggi mentions that setting mathematical expressions will be possible in the future.

[@perpetualmeninwa6695]

Awesome 👍❤

[@anoldasgupta]

Currently there is no way to search variables within the variable collection...Please suggest a method your team has identified as work around...

[@BaraiEnt]

can we design the Figma plugin in react or in Vanila javascript ??

[@unhumano2713]

Quick question, how are you casting gradients here?

[@kristinagroeger2839]

Begins at 5:21. You're welcome :P

[@VanillaVercetti]

4 modes limitation makes this feature worthless

[@MyDigitalHub]

Yep. Very limited as of the moment and expensive if availed

[@jacobwesch762]

Iam sad that Figma doesn’t accept PayPal , so I can practice

[@SpaceFederation]

Useless since there exsists a limitation of 4 modes.

[@chidorirasenganz]

Only for each collection but that’s more than enough