Figma
Figma
  • Видео 842
  • Просмотров 40 675 230
My First Variable: Typography variables
Follow along with the playlist: ruclips.net/p/PLXDU_eVOJTx6V9PNAxvagzaMWHDFOsYQI
In this video, we walk through the intricacies of typography variables, weights, numbers, and string variables. We then apply them to the card we have been working in the series so far.
CSS font weights: developer.mozilla.org/en-US/docs/Web/CSS/font-weight
____________________________________________________
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
X (formerly Twitter): figma
Instagram: figma
LinkedIn: www.linkedin.com/company/figma
Figma forum: forum.figma.com/
____________________________________________________
#Figm...
Просмотров: 3 213

Видео

In the file: Designing Inside the Box with Adyen
Просмотров 3,5 тыс.9 часов назад
Figma is free to use. Sign up here: bit.ly/3msp0OV In this livestream, Senior Product Designer, Tobias Uebbing, walks us through the transactional principles of UX at Adyen, and how you can also define these for your company as well. Find us on ⬇️ X (formerly Twitter): figma Instagram: figma LinkedIn: www.linkedin.com/company/figma Figma forum: forum.figma.com/ #Figma ...
In The File Unlocking Unity: JustEat Takeaway's evolution towards a global design system
Просмотров 1,2 тыс.9 часов назад
Figma is free to use. Sign up here: bit.ly/3msp0OV This livestream with the JustEat Takeaway Design System team really dives into the details of how they managed to consolidate multiple brands as the JustEat Takeaway family expanded, and how they re-architected their systems to include multi platform support using Web Components. Find us on ⬇️ X (formerly Twitter): figma Instagram: ...
Figma Tutorial: Manage seats in Figma
Просмотров 2,4 тыс.12 часов назад
Figma is free to use. Sign up here: bit.ly/3msp0OV Seats are an important part of billing in Figma, as the number of paid seats in your plan determines your overall subscription cost. But what is a paid seat? How do people get one? And how do admins upgrade or downgrade seats for their colleagues? Let’s find out. Figma pricing page: www.figma.com/pricing/ Manage seats in Figma: help.figma.com/h...
In the file: Lean Team, Big Impact. Multi-Brand Design Systems at Kayak
Просмотров 2,5 тыс.12 часов назад
Figma is free to use. Sign up here: bit.ly/3msp0OV Hear from the Design System team at Kayak about how they handled multi-brand implementation and some of their custom tooling to drive better designer / developer alignment, including the use of Figma's API and Storybook to manage component development. Find us on ⬇️ X (formerly Twitter): figma Instagram: figma LinkedIn...
Prototype with variables: Build a configurable volume bar - Part 1
Просмотров 5 тыс.14 часов назад
Figma is free to use. Sign up here: bit.ly/3msp0OV In this two part series, we're using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we're going to set up the foundation of our interaction. To follow along, grab a copy ...
Dev Mode: more than inspect | Figma
Просмотров 4,6 тыс.16 часов назад
As a free viewer in Figma you can view, share and comment on design files. You can view design properties, interact with prototypes, and copy CSS/native code. But a Full seat in Dev Mode gives you so much more. Let's talk about it. 0:00 - Introduction 0:11 - Free Figma viewer seat 0:38 - Paid Dev Mode full seat Find out how Dev Mode can alignment development teams with design, help you ensure p...
Using the Figma Library Analytics API
Просмотров 4,6 тыс.14 дней назад
The Library Analytics API, part of the Figma REST API, lets you fetch analytics data about how your organization's design system libraries are being used. The API provides similar information to the in-product library analytics feature, but in a format that you can use to do more fine-grained, custom analysis. In this video Gerard shows how to get started with the API, and shows how you might u...
Figma Tip: Syncing variables to code
Просмотров 4,8 тыс.14 дней назад
Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. Gerard walks us through the Variables API, showing how it can be used to keep these values in sync with your code base, and how applications such as StyleDictionary can be used to transform them into usable code for multiple platforms. View the repository over on Github...
Advocating for engineering representation in product orgs
Просмотров 1,5 тыс.14 дней назад
This round table held in Paris in collaboration with Storybook brings together the perspectives of engineering ICs, tech leads, and designers to build a case on how developers can best be heard inside cross-functional product organizations. Access our full Decode the Developer report here: www.figma.com/reports/designer-developer-collaboration/ (also available in French, German and Japanese). A...
Inspect Designs in Figma
Просмотров 8 тыс.14 дней назад
Inspect Designs in Figma
Figma Tip: Split tabs in Figma Desktop
Просмотров 17 тыс.21 день назад
Figma Tip: Split tabs in Figma Desktop
Crafting an Awesome Story, from sketches to slides
Просмотров 4,2 тыс.21 день назад
Crafting an Awesome Story, from sketches to slides
Framework APAC: Office hours: Design systems, AMA
Просмотров 3,5 тыс.21 день назад
Framework APAC: Office hours: Design systems, AMA
Designing lessons in FigJam
Просмотров 3,8 тыс.21 день назад
Designing lessons in FigJam
7 Minute Snippets: Source of Truth | Figma
Просмотров 4,4 тыс.21 день назад
7 Minute Snippets: Source of Truth | Figma
In the file : Tokens, variables & design system multi-marques
Просмотров 6 тыс.28 дней назад
In the file : Tokens, variables & design system multi-marques
Figma for Edu: Dev Mode collaboration
Просмотров 4,1 тыс.28 дней назад
Figma for Edu: Dev Mode collaboration
Framework: FAQs & Closing
Просмотров 1,5 тыс.28 дней назад
Framework: FAQs & Closing
Framework: Beneath the surface of Verizon’s approach to variables
Просмотров 4,8 тыс.28 дней назад
Framework: Beneath the surface of Verizon’s approach to variables
Framework: Design to Code: Roundtable discussion with Code Connect users (Bumble, GitHub, and HP)
Просмотров 3,6 тыс.28 дней назад
Framework: Design to Code: Roundtable discussion with Code Connect users (Bumble, GitHub, and HP)
Framework: Creating a more connected design system with Code Connect
Просмотров 11 тыс.Месяц назад
Framework: Creating a more connected design system with Code Connect
Framework: Typography and gradients deep dive and demos
Просмотров 9 тыс.Месяц назад
Framework: Typography and gradients deep dive and demos
Framework Opening & Welcome
Просмотров 7 тыс.Месяц назад
Framework Opening & Welcome
All the places to apply variables in Figma
Просмотров 11 тыс.Месяц назад
All the places to apply variables in Figma
Twilio: Fluid collaboration between designers and developers
Просмотров 2,7 тыс.Месяц назад
Twilio: Fluid collaboration between designers and developers
Twilio: Focus time - creating space for collaboration
Просмотров 675Месяц назад
Twilio: Focus time - creating space for collaboration
Twilio: Successful workflows inspire other teams
Просмотров 1 тыс.Месяц назад
Twilio: Successful workflows inspire other teams
Demo: Design updated status in Figma for Jira
Просмотров 2,9 тыс.Месяц назад
Demo: Design updated status in Figma for Jira
Demo: Jira plugin in Figma’s Dev Mode
Просмотров 1,9 тыс.Месяц назад
Demo: Jira plugin in Figma’s Dev Mode

Комментарии

  • @arboledai
    @arboledai 6 часов назад

    Sans serif

  • @taishibikiqe8796
    @taishibikiqe8796 8 часов назад

    2

  • @automationtakeover
    @automationtakeover 8 часов назад

    12:25 Cannot find any available sources for “1-Post-[Name of Animal].png” Only found “1-Profile-[Name of Animal].png” which shows the tutorial needs a refresher for beginners

  • @leogotv
    @leogotv 10 часов назад

    Thanks for a great session.

  • @Myacount815
    @Myacount815 10 часов назад

    For the first question, there’s a missing area in the G no?

  • @GaniyatOlowookere
    @GaniyatOlowookere 10 часов назад

    O😅😅😅

  • @KevinGonzalez-fo6jt
    @KevinGonzalez-fo6jt 11 часов назад

    0.00 😂

  • @mohamedaminhajri7632
    @mohamedaminhajri7632 12 часов назад

    all of them 😎

  • @tayyabsohail8823
    @tayyabsohail8823 13 часов назад

    I really like variable typography we know this is complex but this is a game changer for making responsive and adaptable designs across the platform

  • @vietdo493
    @vietdo493 14 часов назад

  • @tayyabsohail8823
    @tayyabsohail8823 15 часов назад

    Hope so branching will come for student

  • @tayyabsohail8823
    @tayyabsohail8823 15 часов назад

    Awesome 😎

  • @WelidaLima-tg4sv
    @WelidaLima-tg4sv 15 часов назад

    25

  • @kennethlucas
    @kennethlucas 15 часов назад

    Unwatchable. Get adult speakers that can maintain decorum and not be wildly excited when speaking. Speak at a speed that people can listen and take away value. Not just a rushed infomercial. Not everyone wants to see ridiculous excitement when we are trying to consume features and learn.

  • @vs.swetha
    @vs.swetha 15 часов назад

    thanks for these tutorial.i did a stick sidebar with responsive scrolling main page in figma

  • @TheBlindFoldedPuppy
    @TheBlindFoldedPuppy День назад

    I kept pressing "0" and it kept restarting my RUclips video... -___-

  • @divinechimemela9259
    @divinechimemela9259 День назад

    I enjoyed learning figma as a beginner

  • @PierreLord
    @PierreLord День назад

    Bravo. Beau boulot. Est-ce que vous appliquez des modes "devices" (dans une collection différente) pour varier le padding/margin/gap avec des tokens de size pour adapter un component d'un device mode à un autre?

  • @Asaki-td6ei
    @Asaki-td6ei 2 дня назад

    Thank you! you saved my life! 😘

  • @raisahmed8237
    @raisahmed8237 2 дня назад

    All

  • @martinmbae2688
    @martinmbae2688 2 дня назад

    Thanks bro, you saved my sleepless nights and a zillion ctr-z's because items just getting inside the auto-layouts

  • @M7ajkl
    @M7ajkl 2 дня назад

    3/3

  • @Mary55113
    @Mary55113 2 дня назад

    Thank you so much dear Ricky and dear Miggi. This video was awesome because you explained the premise so well.

  • @floripa1987
    @floripa1987 2 дня назад

    Cmom figma we need set lineheight in percent and u know it

  • @suvadeepmajumdar4920
    @suvadeepmajumdar4920 3 дня назад

    This seems kind of what storybook offers. But great demo

  • @kunal-ko
    @kunal-ko 3 дня назад

    Making new features ❌ Putting already existing features behind a paywall ✅

  • @mahivibes7469
    @mahivibes7469 3 дня назад

    🎉

  • @h00manfromearth
    @h00manfromearth 3 дня назад

    Great video, but you guys keep skipping the demo of character spacing/tracking variables - only allow px as variable at the moment and variable scoping is not working for text also 😴

  • @yakaspectrum
    @yakaspectrum 3 дня назад

    Does anyone know how to fix this issue? I can see variable collections from other projects in my current project. How can I configure it so that when setting the theme, I only see variable collections from the specific project I'm working on?

  • @hugocsl
    @hugocsl 3 дня назад

    I really appreciate the effort Figma is putting into this, but for now it is years behind Tokens Studio in terms of typography unfortunately. I believe that the experience we have today is far from being ideal for building text styles :/ In addition to this, we desperately need a way to be able to use percentage values ​​%, both for text attributes and elements width!

  • @zidansyed
    @zidansyed 3 дня назад

    I tried typography variables in a real massive project. The issues I found are: 1. There is no scoping for the number or string value. In colors scoping making it easy so that when we open the library the primitive values will not appear. But in typography due to no scoping as a user, I have to scroll back and forth to find the proper semantic value. Scoping values for font weight, line height, spacing, letter case, etc would be a more scalable solution. 2. As Luis shows the problem with font weights. In case of variable font families, it becomes more difficult to write/define all values. Defining all definitions is a problematic and time-consuming process. The grouping of weights is not a great solution because the group name appears in exporting CSS and JSON. We found that developers didn't understood the long names for the variables because they included group names. 3. Overall variable panel problem: Aliasing or linking the primitive and semantics can cause problem if we want to move a group or values from one collection to other. This process of moving variables between groups and collections should be considered on high priority. There are some plugins to solve the issue but then we don't have the alias if we use those plugins. Something Figma native would be great. For import and extraction if there is a native solution rather than plugins would be great. I hope the Figma team listens to such feedback for new features.

  • @HeroNinja
    @HeroNinja 3 дня назад

    Very interesting 💎

  • @andreymatvienko8890
    @andreymatvienko8890 3 дня назад

    Great video! Hope you see this comment and other will like it if it’s true. Could your team fix the slow Figma performance, please! After release the performance and speed of work with components that use font variables was significantly dropped. I know you working on improvements, hope it will be sooner. Thank you in advance!

  • @cricketcountry6384
    @cricketcountry6384 3 дня назад

    Is there anyone who has completed the challenge?

  • @user-my1ld5rc8k
    @user-my1ld5rc8k 3 дня назад

    There is one major problem with this approach, if you want the nested properties of the new component to reflect you can't have them in the property panel.

  • @chloeatchue-mamlet6764
    @chloeatchue-mamlet6764 4 дня назад

    The fact that by default anyone given a free seat can upgrade themselves to a paid seat without needing anyone's approval is definitely a dark pattern. No other software works like that.

  • @ChiamakaOnyilimba
    @ChiamakaOnyilimba 4 дня назад

    very insightful, thank you

  • @JMach4217
    @JMach4217 4 дня назад

    Is it possible to set a conditional interaction, but have it change a variable via "Smart Animate" instead of changing instantly?

  • @fallegan1664
    @fallegan1664 4 дня назад

    Easy, next one