Figma Tutorial For Beginners | Style Guides
HTML-код
- Опубликовано: 24 сен 2024
- Welcome to my Figma tutorial for beginners on creating a style guide for your design!
In this video, I'll show you how to use Figma to create a comprehensive style guide for your design project. A style guide is an essential tool for designers and developers, providing a centralized source of information about the design system, typography, colour palette, and other important design elements.
Using Figma, I'll walk you through the process of creating a style guide using a free plugin.
I'll also share some tips and tricks for streamlining your workflow and making the most of Figma's powerful features. By the end of this video, you'll have a complete style guide that you can use to ensure consistency and coherence in your design project.
So whether you're a seasoned designer or just starting out, this video is for you. So grab your laptop and let's get started on creating a style guide for your design!
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.c...
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/f...
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
PLEASE MORE! THANK YOU FOR YOUR GREAT VIDEOS!
Thanks Paul, I definitely enjoy videos like this that help with improving the design process. I for one would really enjoy more Figma videos.
I'm blown away by the creativity and originality of this content. 🤯
Thanks for sharing this! I'm anxious to try this plugin)
Great tutorial man! love your channel! please do more figma videos. its a really cool tool for designing websites and app mockups
Sure thing!
Thanks Paul. Very handy free plugin 👍
Awesome videos, I always learn a lot!! Thank you
i really liked the program thanks a lot
Hi Paul. Would you consider doing a full website/ woo tutorial with generate blocks or kadence block or brick or similar like you did a couple of years ago with blocksy and stackable.
Thanks for sharing!
Hello my friend, can you please tell me what you use as a screen recorder / screen cast, like 3D effect, on your videos,
Thank you
Why can't I see the hex code for linear colour boxes in the style guide?
Is it possibile to export a style guide directly in CSS Hero?
This plugin isn't free, which makes it useless. It only allows you to make 1 project and some few pages. Not only it's paid but it's also expensive
I think it's free
Bla bla bla. No content, no tuto. Bye.
Cya!
Why are you telling the hex & rgba colors when u can literally just click on the color and get it from there?
This makes no sense why people are displaying their hex values.