Agata Sakowicz
Agata Sakowicz
  • 116
  • 422 075
How to Work with Design Systems in 2025 | Figma Design System Tutorial
🔗 Figr Plugin for Figma:
figr.link/agatha-youtube
Use code AGATA25
In today’s video, we dive deep into how to work with design systems in 2025. Whether you're a junior designer or an experienced pro, understanding how to create and manage design systems is more important than ever. We’ll cover everything from design tokens, Figma components, best practices for creating design systems, and how to collaborate effectively with your team.
You'll also learn how the Figr plugin can make your design system setup and maintenance faster and easier. We’ll walk through how to use Figr to automate design tokens, create components more efficiently, and keep your design system consistent across projects.
🌟 Timestamps:
0:00 - Introduction: Why Design Systems Matter
1:04 - What is a Design System?
2:15 - How to Start Creating a Design System in Figma
4:38 - Figr Plugin for Design Systems
6:35 - Maintenance Tips for Your Design System
📹 If you want to dive deeper into creating design tokens for typography and colors, check out my other videos:
Design Tokens for Typography: ua-cam.com/video/5MBEaGzMJMQ/v-deo.html
Design Tokens for Colors: ua-cam.com/video/FGAkyV0vxtQ/v-deo.html
Make sure to like, subscribe, and hit the bell icon for more Figma tutorials, design tips, and resources to boost your design workflow in 2025!
#designsystems #uidesign #uxdesign #figmatutorial
Переглядів: 840

Відео

Fully responsive website design in figma ( From beginner to advanced )
Переглядів 1,6 тис.21 годину тому
Grab you starter file on Figma www.figma.com/community/file/1446111800528713604/colour-system-using-variables-and-modes-youtube-tutorial Learn how to create seamless, responsive designs using variables and auto layout. In this video, I’ll show you how to simplify your design workflow by setting up reusable variables for spacing, padding, and adaptive fonts for mobile and desktop. Whether you’re...
How to LOCK IN as a designer (and how to do it)
Переглядів 747День тому
Struggling to stay focused as a designer? In this video, I share my top tips for locking in and doing deep, meaningful work as a product designer. With over 5 years of experience in UI/UX and 6 years in graphic and web design, I’ve learned powerful strategies to boost productivity and creativity. You’ll discover: 🎯 How single-tasking can help you get more done in less time. ⏱️ The secret to eff...
How to Make Shiny Button in Figma | Figma Advanced Interactive Tricks | Figma Animation
Переглядів 1,8 тис.14 днів тому
In this tutorial, I’ll show you how to design a shiny button interactive prototype using advanced techniques in Figma. Whether you’re a beginner or a seasoned designer, this step-by-step guide will help you elevate your UI design skills. 👉 Follow along in Figma: www.figma.com/community/file/1462559302715855764/shiny-button-youtube-tutorial ✨ What You’ll Learn: ✅ Masking for seamless design ✅ Us...
How to Animate UI/UX Designs with Phase | Step-by-Step Guide
Переглядів 1,4 тис.Місяць тому
In this video, I'll show you how to create three amazing UI/UX animations using my new favorite tool, Phase. If you often prototype in Figma and wonder how to bring your animations to life in real projects, this video is for you! With Phase, you can export your designs in JSON, Lottie, MP4, or GIF formats effortlessly. Check out Phase and take your UI/UX projects to the next level: app.phase.co...
Create Stunning Tubelight Glow Effects in Figma Using Angular Gradients - Easy Tutorial
Переглядів 1,9 тис.Місяць тому
You'll learn how to create a realistic tubelight glow effect using angular gradients in Figma. This step-by-step guide is perfect for both beginners and experienced designers looking to enhance their skills. What you'll learn: How to use angular gradients in Figma Techniques to create a glowing tubelight effect Tips for adding realistic lighting effects to your designs Follow me: Instagram: @th...
Responsive Typography With Variables | Figma Tutorial | Design System
Переглядів 1,7 тис.Місяць тому
Grab you starter file on Figma www.figma.com/community/file/1446111800528713604/colour-system-using-variables-and-modes-youtube-tutorial Today, let's create a typography system responsive for mobile and desktop in Figma in less than 10 minutes. 👋 I'm here: thedesignely beacons.ai/designely #UI #UX #Figma #designtokens #figmatips #variables #figmatutorial
Dark mode with Variables | Figma Tutorial | Design Colour System
Переглядів 7162 місяці тому
Grab you starter file on Figma www.figma.com/community/file/1446111800528713604/colour-system-using-variables-and-modes-youtube-tutorial Today, let's create a colour system with dark modes in Figma in less than 10 minutes. 👋 I'm here: thedesignely beacons.ai/designely #UI #UX #Figma #designtokens #figmatips #variables #figmatutorial
Designing a Brand Identity from Scratch! + 3D Mockups
Переглядів 1,1 тис.2 місяці тому
Designing a Brand Identity from Scratch! 3D Mockups
How to make slide animation in Figma (tutorial)
Переглядів 5712 місяці тому
How to make slide animation in Figma (tutorial)
How to animate text in figma like a pro ( variables) tutorial
Переглядів 1,1 тис.3 місяці тому
How to animate text in figma like a pro ( variables) tutorial
Jak projektować responsywne układy w Figmie | Tutorial
Переглядів 1,8 тис.Рік тому
Jak projektować responsywne układy w Figmie | Tutorial
Figma Nowości Auto Layout (2023) | Poradnik Figma
Переглядів 1,5 тис.Рік тому
Figma Nowości Auto Layout (2023) | Poradnik Figma
VARIABLES ( Zmienne )- Figma nowości 2023
Переглядів 1,6 тис.Рік тому
VARIABLES ( Zmienne )- Figma nowości 2023
Design Tokeny w Figmie | Projektowanie Design Systemu
Переглядів 3,8 тис.2 роки тому
Design Tokeny w Figmie | Projektowanie Design Systemu
Najlepszy monitor dla projektantów w rozsądnej cenie? Recenzja BenQ PD2506Q
Переглядів 2,9 тис.2 роки тому
Najlepszy monitor dla projektantów w rozsądnej cenie? Recenzja BenQ PD2506Q
Jak robić lepsze hero sections? Naprawiam designy
Переглядів 2,3 тис.2 роки тому
Jak robić lepsze hero sections? Naprawiam designy
Jak stworzyć animowane tła w Figmie? Mesh gradients tutorial
Переглядів 3,4 тис.2 роки тому
Jak stworzyć animowane tła w Figmie? Mesh gradients tutorial
Jak zrobić efekt rozmytego szkła w figmie? Glass blur
Переглядів 1,8 тис.2 роки тому
Jak zrobić efekt rozmytego szkła w figmie? Glass blur
Jak zrobić animowaną nawigacje w Figmie? | Projektowanie responsywne
Переглядів 4,2 тис.2 роки тому
Jak zrobić animowaną nawigacje w Figmie? | Projektowanie responsywne
Nowe właściwości komponentów Figma Warianty Tutorial
Переглядів 3 тис.2 роки тому
Nowe właściwości komponentów Figma Warianty Tutorial
A week in my life as a Product Designer Vlog *big life update*
Переглядів 1,3 тис.2 роки тому
A week in my life as a Product Designer Vlog *big life update*
Jak przekazywać projekty dla developerów? Design Handoff
Переглядів 3,4 тис.2 роки тому
Jak przekazywać projekty dla developerów? Design Handoff
Jak dobrać kolory dla strony internetowej lub aplikacji | UX/UI
Переглядів 4,5 тис.2 роки тому
Jak dobrać kolory dla strony internetowej lub aplikacji | UX/UI
Jak być produktywnym jako designer i YouTuber + darmowy szablon, notion tutorial
Переглядів 1,7 тис.2 роки тому
Jak być produktywnym jako designer i UA-camr darmowy szablon, notion tutorial
Koniec z tutorialami?
Переглядів 3862 роки тому
Koniec z tutorialami?
Auto-layout cennik - Figma tutorial po polsku
Переглядів 3,1 тис.2 роки тому
Auto-layout cennik - Figma tutorial po polsku
Błędy, które popełniają Junior UX UI projektanci
Переглядів 4,8 тис.2 роки тому
Błędy, które popełniają Junior UX UI projektanci
Publikowanie komponentów i stylów - Jak zrobić design system w Figmie (część 5)
Переглядів 2,3 тис.2 роки тому
Publikowanie komponentów i stylów - Jak zrobić design system w Figmie (część 5)
Button komponent z wariantami - Jak zrobić design system w Figmie (część 4)
Переглядів 6 тис.2 роки тому
Button komponent z wariantami - Jak zrobić design system w Figmie (część 4)

КОМЕНТАРІ

  • @karlvasquez6396
    @karlvasquez6396 День тому

    This is very helpful! Will save this video for future reference.

  • @ManishaBairwa-k5g
    @ManishaBairwa-k5g 2 дні тому

    Hi from a new subscriber👋🙌

  • @ManishaBairwa-k5g
    @ManishaBairwa-k5g 2 дні тому

    This is crazy good. Thankyou!

  • @rumanaislam3862
    @rumanaislam3862 3 дні тому

    Thanks A lot

  • @Vikkiuiuxdesign
    @Vikkiuiuxdesign 3 дні тому

    Happy to see you UI UX Designer futures im also UI UX Designer form India your make videos very wonderful teaching ❤ keep posting like this 😊

  • @edilsonjunior1004
    @edilsonjunior1004 8 днів тому

    Thanks I was looking for something like this

    • @Designely
      @Designely 8 днів тому

      You're welcome 😊

  • @LorenzoCentioni
    @LorenzoCentioni 8 днів тому

    Great video! I also recently started my YT journey!

  • @NaczelnikInternetu
    @NaczelnikInternetu 8 днів тому

    Szefowo, a po polsku będą jeszcze jakieś filmy? 😊 Pytam z ciekawości bo te też są ok

  • @Mr_gamerZ1000
    @Mr_gamerZ1000 9 днів тому

    Hey Agatha can you make more detailed tutorials for beginners it will be so beneficial 🫂❣️

    • @Designely
      @Designely 8 днів тому

      sure, any particular topic?

  • @Designely
    @Designely 9 днів тому

    Note: I set mobile image on 'crop' as the original image wasn't scaling nicely. To avoid stretching set on 'Fill'

  • @shriharanitis
    @shriharanitis 9 днів тому

    I'm going to implement the deep work in my routine. It seems quite productive. Thank you!

    • @Designely
      @Designely 8 днів тому

      Let me know how it’s working for you 😉

  • @mohamedhassan-kh8hh
    @mohamedhassan-kh8hh 11 днів тому

    Thank you very much for your wonderful videos👑 Honestly, I have a hard time managing time and finding the right object or image for the right project. My field is UX UI. There are a lot of pictures and drawings. Are there ways to find uniform images suitable for most projects? The other thing is the multiplicity of sources and information that I cannot control, to the point that I memorized them but did not benefit from them

    • @Designely
      @Designely 11 днів тому

      I like to use lummi.ai for images, you can definitely find something for each project ;)

    • @mohamedhassan-kh8hh
      @mohamedhassan-kh8hh 10 днів тому

      @Designely thank you 😊

  • @SabhyaThapa-s3i
    @SabhyaThapa-s3i 11 днів тому

    I am exporting this as svg but it is looking completely different in VS code. WTD??

    • @Designely
      @Designely 9 днів тому

      I'd use a lottie plugin or similar and export as JSON then to VS code

  • @Henbot
    @Henbot 11 днів тому

    The famous genius author Ursula Guin had specific time her children and husband where specifically told to never disturb her (which was her work time) and I found easier to multitask when I was younger but now just focusing on single task definitely better and more productive especially if you want to write a book/short story/novella etc and taking feedback is super important. I find I have to cut myself from keep working on something and just tell myself “it’s done” 😂

    • @Designely
      @Designely 11 днів тому

      It’s definitely easier said than done, especially with children and do not disturb time 😅

  • @YorforgerThornPrincess
    @YorforgerThornPrincess 12 днів тому

    I'm struggling with this part 😔 1:55

    • @YorforgerThornPrincess
      @YorforgerThornPrincess 12 днів тому

      Ooh now I got it i forgot to duplicate the base part

    • @Designely
      @Designely 12 днів тому

      Masking can be tricky, but once you got it it's easy :)

  • @ogennadaniel8637
    @ogennadaniel8637 12 днів тому

    Can you drop the fig link?

    • @Designely
      @Designely 12 днів тому

      There you go www.figma.com/community/file/1462559302715855764/shiny-button-youtube-tutorial

    • @ogennadaniel8637
      @ogennadaniel8637 12 днів тому

      @Designely thank you ❤️

  • @preetsuthar17
    @preetsuthar17 14 днів тому

    Your videos are helping me to learn figma

  • @preetsuthar17
    @preetsuthar17 14 днів тому

    Thanks a lot!

  • @ARKFXTRADINGCHANNEL
    @ARKFXTRADINGCHANNEL 15 днів тому

    nice video

  • @esteraszot1923
    @esteraszot1923 18 днів тому

    Jesteś, bardzo ci dziękuję. Oglądałam już coś na youtubie, żaden chłop czy babka nie umieli mi oto pokazać. Teraz już widzę co mam zrobić. Dzięki 😊 ❤

  • @ositaufodiama3942
    @ositaufodiama3942 20 днів тому

    Hi! I did this and it looks great. However, there’s a split at the middle of my prototype, at the intersection where the initial two (angular fill) frames meet. Is there any how I could fix this?

  • @karenprieto7440
    @karenprieto7440 24 дні тому

    Awesome! Thanks for sharing. I just wish you could take a little bit more time to explain some parts, as I got lost at the end. However, thank you so much, I learned a lot!

    • @Designely
      @Designely 20 днів тому

      I explained variables a bit more in the previous video about colours. Next one to this series will be breakpoints token, so I will make sure to explain more there ;)

  • @sayit_suzie
    @sayit_suzie Місяць тому

    how do we import it to wordpress?

    • @Designely
      @Designely 29 днів тому

      You can use phase software to animate it and then export as mp4 background

  • @piroko13
    @piroko13 Місяць тому

    Jobs was not a designer nor an engineer, he was a visionary who got the right people to ale his visions come true

  • @AudinRushow
    @AudinRushow Місяць тому

    Awesome. Great video. Please share this types of video more.

  • @AnomalyHQ
    @AnomalyHQ Місяць тому

    Thanks for posting this video

  • @MrStorm-r8v
    @MrStorm-r8v Місяць тому

    beautyfull

  • @Stuckin92
    @Stuckin92 Місяць тому

    How will one CODE this? 😓

    • @Designely
      @Designely Місяць тому

      Just add one line for svg animation in the background 👌

  • @ana__9359
    @ana__9359 Місяць тому

    super, doceniam zaangażowanie jakie wkładasz w swoje filmy

  • @MrStorm-r8v
    @MrStorm-r8v Місяць тому

    wow

  • @TerbrugZondolop
    @TerbrugZondolop Місяць тому

    Yawn

  • @pvtrvs
    @pvtrvs Місяць тому

    Masakra jak to jest skomplikowane 😵

    • @Designely
      @Designely Місяць тому

      to jeszcze proste. Skomplikowane to bedzie prototypowanie z uzyciem logiki i zmiennych :)

    • @pvtrvs
      @pvtrvs Місяць тому

      @@Designely Boże... 😭😭 przeraża mnie ta praca UI designera

    • @Designely
      @Designely Місяць тому

      Ogarniesz 😉 nie każdy projekt wymaga takich zaawansowanych funkcji Figmy

    • @sebekgaazka9648
      @sebekgaazka9648 Місяць тому

      @@Designely ja już nie wiem czy to nie robi sie sztuka dla sztuki :)

  • @jokerbanny
    @jokerbanny Місяць тому

    Thank you this help me a lot, Please next video create Figma Design Typography System

    • @Designely
      @Designely Місяць тому

      It’s coming this week 👌

  • @olosliwa
    @olosliwa 2 місяці тому

    Poproszę odcinek jak wyeksportować projekt w figma do gotowej aplikacji na iOS i Android

    • @Designely
      @Designely 2 місяці тому

      Do gotowej? Nie da się 😅 Polecam sprawdzić flutter

  • @kamilwaszewski
    @kamilwaszewski 2 місяці тому

    What’s that? Any link?

  • @CoreProgramDream
    @CoreProgramDream 2 місяці тому

    And then, as a developer, I have to implement all these animations 😂

    • @Designely
      @Designely 2 місяці тому

      There are plenty of plugins that will animate that as svg on the fly 🕺🏻

  • @NaczelnikInternetu
    @NaczelnikInternetu 2 місяці тому

    Królowa Figma 1 powróciła 🙂

  • @pritam65010
    @pritam65010 2 місяці тому

    kindly make detailed course in figma, from designing to prototyping to publishing in play store and app store with fire base

  • @NaczelnikInternetu
    @NaczelnikInternetu 2 місяці тому

    Super, że nowe filmy są :) Pozdrawiam

  • @v_malyovana
    @v_malyovana 2 місяці тому

    Wow!🤩

  • @righttalks5386
    @righttalks5386 3 місяці тому

    Great

  • @patchka
    @patchka 3 місяці тому

    Czzy przy skalowaniu kolorów, trzymasz się jakiegoś schematu liczbowego, czy najzwycajniej są to jakieś przypadkowe jednostki?

  • @NaczelnikInternetu
    @NaczelnikInternetu 4 місяці тому

    Bardzo dobrze wyjaśnione. Dzięki.

  • @NaczelnikInternetu
    @NaczelnikInternetu 5 місяців тому

    Z doświadczenia wiem, że praca zdalna nie jest dobra. Praca non stop w domu na dłuższą metę potrafi człowieka po prostu rozwalić psychicznie. Jednak kontakt na żywo ze współpracownikami, interakcja, konsultacje to ważne elementy, więc - jak dla mnie - minimum to praca hybrydowa na zasadzie "trochę tu, trochę tu". Raz czy dwa razy w tygodniu można poświęcić te 2h na dojazd do biura.

  • @NaczelnikInternetu
    @NaczelnikInternetu 6 місяців тому

    Bardzo dobry poradnik. W dzisiejszych czasach przy flex-ach też można stosować gap-y :) Wtedy nie trzeba bawić się w marginesy. Pozdrawiam

  • @NaczelnikInternetu
    @NaczelnikInternetu 6 місяців тому

    Pięknie pokazane :)

  • @NaczelnikInternetu
    @NaczelnikInternetu 6 місяців тому

    Super :)

  • @Hesoyammmmmm
    @Hesoyammmmmm 6 місяців тому

    Dziękuję, to było pomocne! 🙂

  • @NaczelnikInternetu
    @NaczelnikInternetu 6 місяців тому

    Pięknie wyjaśnione :) Dziękuję

  • @NaczelnikInternetu
    @NaczelnikInternetu 6 місяців тому

    Boże jak to dobrze, że znalazłem ten kanał. Potrzebowałem informacji i tutorialu, a tu nie dość że wiele rzeczy się dowiedziałem i jeszcze dowiem, to jeszcze taka miła dziewczyna to prowadzi :) Pozdrawiam, subik i łapka oczywiście.