Agata Sakowicz
Agata Sakowicz
  • 117
  • 422 753
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: th-cam.com/video/5MBEaGzMJMQ/w-d-xo.html
Design Tokens for Colors: th-cam.com/video/FGAkyV0vxtQ/w-d-xo.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
มุมมอง: 1 143

วีดีโอ

Fully responsive website design in figma ( From beginner to advanced )
มุมมอง 1.7Kวันที่ผ่านมา
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)
มุมมอง 75914 วันที่ผ่านมา
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.8K14 วันที่ผ่านมา
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.5Kหลายเดือนก่อน
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
มุมมอง 2Kหลายเดือนก่อน
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.7Kหลายเดือนก่อน
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
มุมมอง 7362 หลายเดือนก่อน
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.1K2 หลายเดือนก่อน
Designing a Brand Identity from Scratch! 3D Mockups
How to make slide animation in Figma (tutorial)
มุมมอง 5832 หลายเดือนก่อน
How to make slide animation in Figma (tutorial)
How to animate text in figma like a pro ( variables) tutorial
มุมมอง 1.1K3 หลายเดือนก่อน
How to animate text in figma like a pro ( variables) tutorial
Jak projektować responsywne układy w Figmie | Tutorial
มุมมอง 1.9Kปีที่แล้ว
Jak projektować responsywne układy w Figmie | Tutorial
Figma Nowości Auto Layout (2023) | Poradnik Figma
มุมมอง 1.5Kปีที่แล้ว
Figma Nowości Auto Layout (2023) | Poradnik Figma
VARIABLES ( Zmienne )- Figma nowości 2023
มุมมอง 1.6Kปีที่แล้ว
VARIABLES ( Zmienne )- Figma nowości 2023
Design Tokeny w Figmie | Projektowanie Design Systemu
มุมมอง 3.8K2 ปีที่แล้ว
Design Tokeny w Figmie | Projektowanie Design Systemu
Najlepszy monitor dla projektantów w rozsądnej cenie? Recenzja BenQ PD2506Q
มุมมอง 2.9K2 ปีที่แล้ว
Najlepszy monitor dla projektantów w rozsądnej cenie? Recenzja BenQ PD2506Q
Jak robić lepsze hero sections? Naprawiam designy
มุมมอง 2.3K2 ปีที่แล้ว
Jak robić lepsze hero sections? Naprawiam designy
Jak stworzyć animowane tła w Figmie? Mesh gradients tutorial
มุมมอง 3.4K2 ปีที่แล้ว
Jak stworzyć animowane tła w Figmie? Mesh gradients tutorial
Jak zrobić efekt rozmytego szkła w figmie? Glass blur
มุมมอง 1.8K2 ปีที่แล้ว
Jak zrobić efekt rozmytego szkła w figmie? Glass blur
Jak zrobić animowaną nawigacje w Figmie? | Projektowanie responsywne
มุมมอง 4.2K2 ปีที่แล้ว
Jak zrobić animowaną nawigacje w Figmie? | Projektowanie responsywne
Nowe właściwości komponentów Figma Warianty Tutorial
มุมมอง 3.1K2 ปีที่แล้ว
Nowe właściwości komponentów Figma Warianty Tutorial
A week in my life as a Product Designer Vlog *big life update*
มุมมอง 1.3K2 ปีที่แล้ว
A week in my life as a Product Designer Vlog *big life update*
Jak przekazywać projekty dla developerów? Design Handoff
มุมมอง 3.4K2 ปีที่แล้ว
Jak przekazywać projekty dla developerów? Design Handoff
Jak dobrać kolory dla strony internetowej lub aplikacji | UX/UI
มุมมอง 4.5K2 ปีที่แล้ว
Jak dobrać kolory dla strony internetowej lub aplikacji | UX/UI
Jak być produktywnym jako designer i YouTuber + darmowy szablon, notion tutorial
มุมมอง 1.7K2 ปีที่แล้ว
Jak być produktywnym jako designer i TH-camr darmowy szablon, notion tutorial
Koniec z tutorialami?
มุมมอง 3862 ปีที่แล้ว
Koniec z tutorialami?
Auto-layout cennik - Figma tutorial po polsku
มุมมอง 3.1K2 ปีที่แล้ว
Auto-layout cennik - Figma tutorial po polsku
Błędy, które popełniają Junior UX UI projektanci
มุมมอง 4.8K2 ปีที่แล้ว
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.3K2 ปีที่แล้ว
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)
มุมมอง 6K2 ปีที่แล้ว
Button komponent z wariantami - Jak zrobić design system w Figmie (część 4)

ความคิดเห็น

  • @rebeccabennettduke3907
    @rebeccabennettduke3907 11 ชั่วโมงที่ผ่านมา

    Sooo... this is a guide for creating a Style Guide?

  • @Rhian-d3h
    @Rhian-d3h วันที่ผ่านมา

    Not helpful. Plugin does not work properly, keeps showing errors

    • @Designely
      @Designely วันที่ผ่านมา

      Never happened to me and I’ve used in loads of different projects. Did you raise the issue to figr support?

  • @karlvasquez6396
    @karlvasquez6396 3 วันที่ผ่านมา

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

  • @ManishaBairwa-k5g
    @ManishaBairwa-k5g 3 วันที่ผ่านมา

    Hi from a new subscriber👋🙌

  • @ManishaBairwa-k5g
    @ManishaBairwa-k5g 3 วันที่ผ่านมา

    This is crazy good. Thankyou!

  • @rumanaislam3862
    @rumanaislam3862 5 วันที่ผ่านมา

    Thanks A lot

    • @Designely
      @Designely 4 วันที่ผ่านมา

      🙌

  • @Vikkiuiuxdesign
    @Vikkiuiuxdesign 5 วันที่ผ่านมา

    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 😊

    • @Designely
      @Designely 4 วันที่ผ่านมา

      Thanks a ton 🙌

  • @edilsonjunior1004
    @edilsonjunior1004 10 วันที่ผ่านมา

    Thanks I was looking for something like this

    • @Designely
      @Designely 10 วันที่ผ่านมา

      You're welcome 😊

  • @LorenzoCentioni
    @LorenzoCentioni 10 วันที่ผ่านมา

    Great video! I also recently started my YT journey!

    • @Designely
      @Designely 10 วันที่ผ่านมา

      Thanks! You got yourself a new subscriber :)

    • @LorenzoCentioni
      @LorenzoCentioni 9 วันที่ผ่านมา

      @ thank you!

  • @NaczelnikInternetu
    @NaczelnikInternetu 10 วันที่ผ่านมา

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

    • @Designely
      @Designely 10 วันที่ผ่านมา

      Zobaczymy ;)

  • @Mr_gamerZ1000
    @Mr_gamerZ1000 10 วันที่ผ่านมา

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

    • @Designely
      @Designely 10 วันที่ผ่านมา

      sure, any particular topic?

  • @Designely
    @Designely 10 วันที่ผ่านมา

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

  • @shriharanitis
    @shriharanitis 10 วันที่ผ่านมา

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

    • @Designely
      @Designely 10 วันที่ผ่านมา

      Let me know how it’s working for you 😉

  • @mohamedhassan-kh8hh
    @mohamedhassan-kh8hh 12 วันที่ผ่านมา

    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 12 วันที่ผ่านมา

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

    • @mohamedhassan-kh8hh
      @mohamedhassan-kh8hh 12 วันที่ผ่านมา

      @Designely thank you 😊

  • @SabhyaThapa-s3i
    @SabhyaThapa-s3i 13 วันที่ผ่านมา

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

    • @Designely
      @Designely 11 วันที่ผ่านมา

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

  • @Henbot
    @Henbot 13 วันที่ผ่านมา

    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 13 วันที่ผ่านมา

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

  • @YorforgerThornPrincess
    @YorforgerThornPrincess 14 วันที่ผ่านมา

    I'm struggling with this part 😔 1:55

    • @YorforgerThornPrincess
      @YorforgerThornPrincess 14 วันที่ผ่านมา

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

    • @Designely
      @Designely 13 วันที่ผ่านมา

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

  • @ogennadaniel8637
    @ogennadaniel8637 14 วันที่ผ่านมา

    Can you drop the fig link?

    • @Designely
      @Designely 14 วันที่ผ่านมา

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

    • @ogennadaniel8637
      @ogennadaniel8637 14 วันที่ผ่านมา

      @Designely thank you ❤️

  • @preetsuthar17
    @preetsuthar17 16 วันที่ผ่านมา

    Your videos are helping me to learn figma

  • @preetsuthar17
    @preetsuthar17 16 วันที่ผ่านมา

    Thanks a lot!

    • @Designely
      @Designely 15 วันที่ผ่านมา

      No worries!

  • @ARKFXTRADINGCHANNEL
    @ARKFXTRADINGCHANNEL 17 วันที่ผ่านมา

    nice video

    • @Designely
      @Designely 13 วันที่ผ่านมา

      Thanks

  • @esteraszot1923
    @esteraszot1923 20 วันที่ผ่านมา

    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 22 วันที่ผ่านมา

    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?

    • @Designely
      @Designely 22 วันที่ผ่านมา

      Try moving one side -1px to cover the line

    • @ositaufodiama3942
      @ositaufodiama3942 22 วันที่ผ่านมา

      @ it worked! Thanks!

  • @karenprieto7440
    @karenprieto7440 26 วันที่ผ่านมา

    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 22 วันที่ผ่านมา

      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 หลายเดือนก่อน

      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 2 หลายเดือนก่อน

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

    • @Designely
      @Designely 2 หลายเดือนก่อน

      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?

    • @Designely
      @Designely 2 หลายเดือนก่อน

      Soot.com 👌

  • @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 3 หลายเดือนก่อน

    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 6 หลายเดือนก่อน

    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! 🙂