- 22
- 280 201
moonlearning
Spain
Приєднався 10 гру 2021
Starting out in UX and UI design can feel like a mission to the moon. Let me guide you, and I promise it's not rocket science. We will learn about the principles of user experience and user interface design, as well as how to set up UI Design in Figma and understand code as a designer.
Or jump right into the advanced Figma deep dive sessions to help you become a true pro. No matter your level of experience, you can study anytime, anywhere.
Full courses on moonlearning.io
Or jump right into the advanced Figma deep dive sessions to help you become a true pro. No matter your level of experience, you can study anytime, anywhere.
Full courses on moonlearning.io
HTML & CSS: A Quick and Easy Introduction for Absolute Beginners
Full course link: www.moonlearning.io/cursor
All my courses: www.moonlearning.io
Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn: www.linkedin.com/in/christine...
Follow me on Twitter: moonlearning
Follow me on Instagram: moonlearnin...
And don't forget to subscribe right here on UA-cam for more!
00:00:00 - Introduction
00:00:13 - How to Inspect a Website in Your Browser (View HTML & CSS Code)
00:00:35 - Understanding HTML Anatomy: Elements, Tags, and Attributes
00:01:42 - Setting Up a Basic HTML Page
00:02:20 - Essential HTML Tags You Should Know
00:02:25 - How to Link Multiple Web Pages in HTML
00:02:49 - Introduction to CSS: Styling Your Website
00:03:16 - What is the CSS Box Model?
00:03:27 - CSS Rules, Selectors, and Declarations Explained
00:03:58 - Different Types of CSS Selectors
00:05:00 - What Does "Cascading" in CSS Mean?
00:05:21 - Common CSS Selectors to Use in Your Projects
00:05:26 - How to Start Coding: Best Code Editors (VS Code, Cursor, etc.)
00:05:52 - Subscribe and Watch More Web Development Tutorials!
All my courses: www.moonlearning.io
Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn: www.linkedin.com/in/christine...
Follow me on Twitter: moonlearning
Follow me on Instagram: moonlearnin...
And don't forget to subscribe right here on UA-cam for more!
00:00:00 - Introduction
00:00:13 - How to Inspect a Website in Your Browser (View HTML & CSS Code)
00:00:35 - Understanding HTML Anatomy: Elements, Tags, and Attributes
00:01:42 - Setting Up a Basic HTML Page
00:02:20 - Essential HTML Tags You Should Know
00:02:25 - How to Link Multiple Web Pages in HTML
00:02:49 - Introduction to CSS: Styling Your Website
00:03:16 - What is the CSS Box Model?
00:03:27 - CSS Rules, Selectors, and Declarations Explained
00:03:58 - Different Types of CSS Selectors
00:05:00 - What Does "Cascading" in CSS Mean?
00:05:21 - Common CSS Selectors to Use in Your Projects
00:05:26 - How to Start Coding: Best Code Editors (VS Code, Cursor, etc.)
00:05:52 - Subscribe and Watch More Web Development Tutorials!
Переглядів: 906
Відео
How Learning to Code with Cursor AI Works - Design to Code for Total Beginners
Переглядів 881Місяць тому
Full course link: www.moonlearning.io/cursor Get cursor AI for free: www.cursor.com All my courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: moonlearning Follow me on Instagram: moonlearnin... And don't forget to subscribe right...
Automating responsive typography in Figma with variables and modes.
Переглядів 6 тис.6 місяців тому
All my tips, tricks and tutorials: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: ...
Turn Figma text style properties into variables and bind them back to the style (Free Plugin)
Переглядів 1,8 тис.6 місяців тому
More tips, tricks and tutorials: www.moonlearning.io Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/moonlearningprofessionalfigma Print Variables Plugin: www.figma.com/community/plugin/1310832673817237972/print-variables Variablize Text Styles Plugin: www.figma.com/community/plugin/1363237082311305172/variablize-text-styles Quickly turn Figma tex...
Advanced Figma Tips & Tricks 2024: Discovering Little Hidden Gems
Переглядів 22 тис.8 місяців тому
Article version of this video: www.moonlearning.io/articles Full courses and working files: www.moonlearning.io Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/moonlearningprofessionalfigma Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christinevallaure Moonlearning...
CSS for UI Designers: Understanding Flexbox and Applying it to Figma's Auto Layout
Переглядів 9 тис.9 місяців тому
Written article version of this video: www.moonlearning.io/articles Full Modern CSS for UI Designer course: www.moonlearning.io/modern-CSS-layout Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me!...
Sincronize Componentes do Figma com dados reais usando o Plugin de Sincronização do Google Sheets.
Переглядів 68211 місяців тому
Baixe o arquivo do Figma playground para acompanhar: www.figma.com/@moonlearning Experimente o Figma gratuitamente para acompanhar: bit.ly/moonlearningfreefigma Obtenha o Figma Professional: bit.ly/moonlearningprofession... Um tutorial do moonlearing.io sobre como sincronizar componentes, variantes e propriedades do Figma com dados reais de uma planilha do Google, com a ajuda do plugin de sincr...
Master Figma: From Wireframe to Prototype - New Beginners' Course!
Переглядів 86711 місяців тому
Dive into the UI/UX design world with the latest moonlearning Figma beginners' class! Full Figma beginners course: www.moonlearning.io/Figma-Beginner An exclusive peek into the new course project. A comprehensive journey where you'll learn to build an app from the ground up. Every step is a learning opportunity, from crafting the initial wireframe to developing a fully functional prototype. Ful...
Sincroniza Componentes, Variantes y Propiedades de Figma con datos reales. Google Sheet Sync Plugin
Переглядів 1,1 тис.Рік тому
Descarga el archivo de Figma del área de práctica para seguir el tutorial: www.figma.com/@moonlearning Prueba Figma de forma gratuita para seguir el tutorial: bit.ly/moonlearningfreefigma Obtén Figma Professional: bit.ly/moonlearningprofessionalfigma Sincronizar y activar Componentes, Variantes y Propiedades de Figma con datos reales utilizando Google Sheet Sync Plugin Un tutorial de moonlearin...
¿Qué es Figma y quién hace la programación? Comenzando con el Diseño de Interfaz de Usuario
Переглядів 3,7 тис.Рік тому
Curso completo para principiantes de Figma (version española saliendo pronto): www.moonlearning.io/Figma-Beginner Accede a todos mis cursos de UX, UI y Figma en: www.moonlearning.io Obtén Figma GRATIS en: psxid.figma.com/ggcj1d ¿Quieres mantenerte al tanto de las novedades, consejos y trucos? ¡Asegúrate de seguirme! Sígueme en LinkedIn: /christinevallaure Sígueme en Twitter: /moonlearning Sígue...
Unlocking Figma's Prototyping Gems: Scroll To Animations and Anchor Points
Переглядів 2,4 тис.Рік тому
Get the FREE Figma working file to follow along: www.figma.com/community/file/1298649466151744257/scrolling-animations Get Figma for FREE: psxid.figma.com/ggcj1d Access all of my UX, UI & Figma courses: www.moonlearning.io Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christine... Follow me on Twitter: twitter.co...
FREE: Getting started with Figma: 1-hour UI Design course for beginners
Переглядів 12 тис.Рік тому
Get the FREE Figma working file to follow along: bit.ly/3M4LqVO Get Figma for FREE: psxid.figma.com/ggcj1d Full Figma beginners course: www.moonlearning.io/Figma-Beg... Access all of my UX, UI & Figma courses: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.co...
What is Figma and who does the programming? Getting started with User Interface Design.
Переглядів 3 тис.Рік тому
Full Figma beginners course: www.moonlearning.io/Figma-Beginner Access all of my UX, UI & Figma courses: www.moonlearning.io Get Figma for FREE: psxid.figma.com/ggcj1d Want to stay up to date on new developments, tips and tricks? Make sure to follow me! Follow me on LinkedIn: www.linkedin.com/in/christinevallaure Follow me on Twitter: moonlearning Follow me on Instagram: instagram.c...
Config 2023: Figma Like the Pros - Christine Vallaure Founder moonlearning.io
Переглядів 3 тис.Рік тому
8 Figma experts from across the globe to share their very best tips and tricks in a live demo on the Config stage. From shortcuts, mind-bending hacks, to time-saving techniques, this session is packed with the Figma tips you don’t want to miss. You’ll hear from familiar faces in the Figma community. Try Figma for free to follow along: bit.ly/moonlearningfreefigma Get Figma Professional: bit.ly/...
Figma Team Library Tutorial: A Comprehensive Guide to Setting Up, Connecting, and Updating Libraries
Переглядів 30 тис.Рік тому
Get the Figma working files (free): www.figma.com/community/file/1175108914979175839 Figma libraries only work with a Pro Plan or above: bit.ly/moonlearningprofessionalfigma This video is an outtake of the full handoff course with Figma: www.moonlearning.io/figma-documenting Access all my premium UX/UI and Figma online courses for only €18 a month: www.moonlearning.io Welcome to my UA-cam tutor...
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
Переглядів 7 тис.Рік тому
Maximize Your Figma Workflow: The Power of Using Sections for Component Documentation
Advanced Figma Components Tips & Tricks
Переглядів 26 тис.Рік тому
Advanced Figma Components Tips & Tricks
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
Переглядів 67 тис.Рік тому
Advanced Figma Prototyping Tips & Tricks | 2023 - by moonlearning.io
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
Переглядів 14 тис.Рік тому
Sync and trigger Figma Components, Variants & Props with actual data using Google Sheet Sync Plugin
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
Переглядів 61 тис.2 роки тому
Advanced Figma Tips & Tricks | 2022 - by moonlearning.io
Thank you, love your tutorials
Best begginer figma course I have found. Thank you so much!
Amazing, thank you
I am trying to sync the data for restaurant menu card everything is getting synced properly but prices are getting flipped
amazingly well
If CMD+X is changing alignment then what is CUT shortcut?
Superb material, in 12 minutes you get so much!
buen video
Would hv loved an explanation but nonetheless this works too!!
You find the full project and how to build it in the course on moonlearning.io
Easily the best intro for figma out there!
Awesome! It's simply unbelievable how professionally and didactically this is presented. And I'm saying that because I don't speak English and yet I understand almost everything here. I don't have enough knowledge for detailed discussions. If I wasn't going to stop working next year, I would have ordered the “Interface Design with Figma” series ;-) I have no idea why I didn't do that earlier 🙈
This is so great! Thanks Christine <3
As someone who was reluctant to start using Figma (as I already put so much of my time into learning Sketch and Xd), your tutorials were the best I've seen at explaining what I thought were far too convoluted methods of design and prototype websites. Very interested in learning more about this AI tool from you, thanks!
What an amazing comment thanks so much!!!
Hello, I have a question -> Is there a trick or workaround for wrapped text? Text-over-flow? Example. I have a card with an image and a text block to the right of it. The text in the text block is clearly higher than the image. I would like the text to flow into a new “row” from the bottom edge of the image. This then runs across the entire width. I hope you understand what I mean
This video helped enormously. Thank you.
Please speak and show more slowly
Slow the video down
Thanks a lot!
Really clean, in details and nice!
Olá! Importei e os dados ficaram todos em branco :( Sabe o que pode ter acontecido?
The crazy thing is, I could watch and especially listen to your tutorials all day. And your progression is impressive! One point about Auto Layout and "Space between" I have to activate the menu first and then use "cmd x". Otherwise I cut out my object, right? I use the "double-click"
i spent like 10 minutes figuring this out, this has to be the dumbest shortcut, there are millions of key combinations yet they have to use the one for cut and it only works if you simultaneously enter the sidebar menu like you said, which requres cursor so in the end its just faster with mouse i feel
Thank you
Thank you
Nice
Nice tip, but in my case it doesn't create line-height only font size the font family was made before.
Amazing Tutorial!
Pure UX gold. Thank you 🙏
this is legit the goatiest video of prototyping ive seen so far 🐐👏
Now I understand, thank you.
ok, panic mode, I knew only about half of them
I don't see the course... and the link is broken :(
thanks for letting me know, fixed it!
Thank you again
doesn't work for windows, commnd + y/x (ctrl can't do it🥺)
It’s only selecting the alignment box and then x, I made a mistake!
This is so helpful! Thank you!!
amazing!
Amazing, it saves my time. Thanks for sharing this nice video.
This is great! But how would you add another layer of complexity: brand modes: let say we want to have this set working for different brands or sub-brands… I guess it’s a matter of creating another brand collection, but how do you manage the different typography sizes for every brand?
Beautiful! Very nice explanation. Thanks! 😄
No one works with variables, stop investing in it..
Everyone at the highest level of design works with variables.
Really nicely explained! Watched a couple of other videos explaining this concept and they were far too long and making things necessarily complicated.
Glad you enjoyed it!
I don’t seem to see this working exactly like this, I have one published library which I’ve added to a test file in the same team. But updates are applied automatically without me being able to accept them. Also working in the library itself, any changes I make to a component don’t show a blue circle telling me to publish.
There was an update last week, iif you have a look at the top right corner on you menu bar you see a blue bubble here replacing the prompt. You still connect as before
great Tips & Tricks👍👍
✅ 'promo sm'
The boolean mode trick has phenomenal implications on responsive layouts if the modes are freed up for width. Really great tip.
So, if you choose update instance instead of update all, your only accepting that main library update to the single instance you have selected on your canvas? So how do you return to that option if you wanna accept the update for all component instances? Cause the offer is gone as soon as you make that first decision.
Very good, clear and consistent explanation. Thank you very much!
Awesome stuff, keep it up
0:58 is not necessary CMD+X, just click in the auto layout box and press X, it does the same.
So true! I don’t know why I put the cmd, same for the B!
@@moonlearning Does it work on windows?
so fast haha
Great video, really useful, thanks
Could you pls make a video on how build a design system? There are many videos and they are all confusing after a point