Inside FPL: A Look at Figma's Design System | Figma

00:20:39
https://www.youtube.com/watch?v=lPAIAntjSLI

Zusammenfassung

TLDRFPL（Figma Pattern Library）是Figma内部设计系统，由工程和设计团队共同创建，旨在提升产品质量和用户体验。FPL团队通过建立统一的语言和属性分类体系，简化不同职能伙伴之间的沟通，从而在设计和工程之间实现无缝衔接。尽管在过程中遇到了设计和工程对齐的挑战，团队通过开发新的工具和方法来解决这些问题。FPL在短时间内成功支持了Figma多个新产品的发布。随着Figma产品线的扩展，FPL团队继续适应和发展设计系统，以提供支持产品一致性的灵活模式。团队强调内部测试和反馈的重要性，利用这些过程不断优化和改进设计系统。

Mitbringsel

  • 🚀 FPL提升了Figma产品的开发效率和一致性。
  • 🛠️ 设计和工程的沟通通过统一语言体系得到改善。
  • 📚 FPL以图书馆模式帮助团队建立统一组件系统。
  • 🔄 FPL系统中代码和设计的对齐通过工具来实现优化。
  • 🎨 组件分为成分属性、状态和上下文属性三个部分。
  • 📈 FPL团队通过快速反馈持续改进设计系统。
  • 🌐 UI3和Slides产品在FPL的支持下成功推出。
  • 🎯 FPL重视灵活性以支持Figma的产品扩展。
  • 🔍 内部测试揭示FPL用户体验的改进机会。
  • 💡 FPL的结构帮助在设计与工程之间实现有效协作。

Zeitleiste

  • 00:00:00 - 00:05:00

    Anna presenta'l su cumpianu chi cunversat cun Tom e Wayne che sò incaricati di l'ingegneria e cuncepimentu per u sistema di cuncepimentu internu di Figma. U FPL (Figma Pattern Library) hè cuncipitu cum'è una fundazione scalabile per creà prudutti di alta qualità. Una di e prime attività era di sincronizà u linguaghju trà i partenarii cross-funziunali, è d'urganizà e prupietà di i cumpunenti in categurie per facilità a cumunicazione trà cuncepimentu è ingegneria.

  • 00:05:00 - 00:10:00

    Tom è Wayne discutenu di l'adopru di FPL per supportà e lanci di prudutti cum'è UI3 è slides. Enfatizanu l'importanza di stabilisce variabili di culore, distanziatore è raghji d'angulu cum'è fundamentu per u sviluppu successu. Spieganu u trasfurmazione di un sistema basatu in fogli di calcolu à unu gestitu tramindui in Figma è in codice, per assicurà coerenza è adattabilità à i bisogni di prudutti multipli cum'è FigJam è Figma Design.

  • 00:10:00 - 00:15:00

    L'accentu hè messu annantu à a creazione di un sistema chì sostiene diversi modii di prudutti specificamente per supportà culori di marca variabili in diversi ambienti. Questu hè realizatu utilizendu variabili CSS chì permettenu e cumpunenti di esse rispondenti in diversi cuntesti. Fenu paralleli cù l'adopru di biblioteche cumunitarie, esplicendu chì FPL hè statu cuncipitu cum'è una biblioteca di mudelli anziché una biblioteca di cumpunenti per una maior flessibilità è sara capaci d'evoluzione basatu annantu à u feedback di l'utilizzatori.

  • 00:15:00 - 00:20:39

    A discussione cunclude cù riflessioni annantu à l'azzioni future per u sviluppu è mantenimentu di FPL è cumu l'usu di Figma stessu influenza stu prucessu. Si parla di l'importanza di ritruvà un feedback per migliurà continualmente u sistema è cumu u distaccamentu di cumpunenti hè percepitu cum'è un signalu per l'ulteriore sviluppu. Enfatizanu chì u sistema di cuncepimentu ùn serà mai veramente finitu mentre ci sò prudutti novi è necessità in evoluzione, è chì l'obiettivu hè di travaglià in avanti per supportà a crescita cuntinua è u miglioramentu.

Mehr anzeigen

Mind Map

Mind Map

Video-Fragen und Antworten

  • 什么是FPL？

    FPL代表Figma Pattern Library，是Figma的内部设计系统。

  • FPL团队的目标是什么？

    FPL团队的目标是为Figma提供一个可扩展的基础，使其产品高效、优质，并提升设计师、开发者及客户的体验。

  • FPL设计系统的结构是什么样的？

    FPL设计系统结构包括组件的属性分类，如典型变体、成分属性和状态等，以便于在设设计和工程之间进行无缝衔接。

  • 团队如何处理设计和代码之间的对齐问题？

    团队使用像code connect这样的工具，帮助在设计组件和工程组件之间创建合适的代码，尽量减轻设计与代码之间的不一致性。

  • FPL对Figma的产品开发有哪些帮助？

    FPL帮助Figma推出UI3和Slides产品，提升了产品的一致性和开发效率。

Weitere Video-Zusammenfassungen anzeigen

Erhalten Sie sofortigen Zugang zu kostenlosen YouTube-Videozusammenfassungen, die von AI unterstützt werden!
Untertitel
en
Automatisches Blättern:
  • 00:00:00
    [Music]
  • 00:00:05
    hi I'm Anna I'm a designer Advocate at
  • 00:00:07
    figma and today I am super excited
  • 00:00:10
    because I get to chat with Tom and Wayne
  • 00:00:12
    who lead engineering and design for
  • 00:00:14
    figma's internal design system so up
  • 00:00:17
    until now figma's produced a lot of
  • 00:00:19
    content around how to build your design
  • 00:00:21
    system in figma we've also had a lot of
  • 00:00:23
    different customers share how they build
  • 00:00:25
    their own Design Systems through various
  • 00:00:27
    live streams and our conference config
  • 00:00:29
    which is why hi today I'm really excited
  • 00:00:31
    that we finally get to take a look into
  • 00:00:33
    our own design system here and learn
  • 00:00:35
    from Tom and Wayne about the work that
  • 00:00:37
    their team has been doing so to kick us
  • 00:00:40
    off uh yeah Tom and Wayne uh why don't
  • 00:00:42
    you guys give me a little bit of context
  • 00:00:44
    on FPL what it is and what y'all are
  • 00:00:47
    working on FPL stands for figma pattern
  • 00:00:50
    library and you know in a nutshell what
  • 00:00:52
    we work on is really we try to maintain
  • 00:00:54
    the internal design system at figma and
  • 00:00:56
    so the idea of that being you know we we
  • 00:00:58
    have a scalable Foundation for figma to
  • 00:01:00
    build forward with um so we can uh yeah
  • 00:01:04
    just create products that are high
  • 00:01:06
    quality and and great for people to use
  • 00:01:08
    um I think a lot of the library name
  • 00:01:10
    really comes from the fact that you know
  • 00:01:12
    a lot of us grew up with community
  • 00:01:13
    libraries and it was a place where you
  • 00:01:15
    know you would Converge on and you would
  • 00:01:17
    just go there to read picture books and
  • 00:01:19
    and uh yeah just have fun and it
  • 00:01:21
    connects communities together the goal
  • 00:01:22
    of FPL really is just to make our
  • 00:01:24
    designers our developers and our
  • 00:01:26
    customers lives better by making us all
  • 00:01:28
    be on the same page so like like one of
  • 00:01:30
    the first things Wayne and I did when
  • 00:01:32
    when we both started working on this was
  • 00:01:34
    sat down and just got our language
  • 00:01:35
    exactly the same we got on the same page
  • 00:01:38
    we spent hours and hours and hours just
  • 00:01:39
    figuring out what are the words we're
  • 00:01:40
    going to use so that we can when we
  • 00:01:42
    communicate it's going to not be losty
  • 00:01:44
    communication so we can always know what
  • 00:01:46
    we're talking what what each other's
  • 00:01:47
    talking about which is always really
  • 00:01:49
    difficult between cross functional
  • 00:01:50
    Partners you guys started working
  • 00:01:52
    together pretty much from the very
  • 00:01:53
    beginning and I mean even your team is
  • 00:01:55
    made up of pretty evenly matched
  • 00:01:58
    designers and Engineers as you mentioned
  • 00:02:00
    like creating that shared language like
  • 00:02:02
    yeah what was the process of doing that
  • 00:02:04
    we really want to keep things simple so
  • 00:02:05
    we try to track as many things in the
  • 00:02:08
    design editor as possible um so on the
  • 00:02:10
    design side uh what we try to do is we
  • 00:02:12
    try to fill out all of our component
  • 00:02:14
    variants and we try to put them side by
  • 00:02:15
    side with how we spill out behaviors and
  • 00:02:17
    we really try to keep it as a source of
  • 00:02:18
    Truth easy for design to consume and
  • 00:02:20
    easy for engineering to reference and I
  • 00:02:22
    think like with tools like Dev mode it
  • 00:02:24
    allows us to uh you know allows any
  • 00:02:26
    designer or engineer to really look at a
  • 00:02:28
    component in the most microscopic good
  • 00:02:30
    ways so that you have one piece of real
  • 00:02:32
    estate and it flips meanings depending
  • 00:02:34
    on who's consuming it so one thing that
  • 00:02:36
    I want to talk about more is how we
  • 00:02:38
    broke down our communication into the
  • 00:02:39
    things we needed to share but one really
  • 00:02:41
    interesting thing that way and I did
  • 00:02:42
    right off the bat when we joined was we
  • 00:02:45
    broke down our all of our component
  • 00:02:46
    properties into three categories for all
  • 00:02:48
    of our components our typical variants
  • 00:02:50
    about your primary and your secondary
  • 00:02:51
    but we didn't use all of the different
  • 00:02:53
    variants as independent pieces instead
  • 00:02:55
    we had two other parts for our component
  • 00:02:57
    properties uh these are things that are
  • 00:02:59
    dependent on the context so an input
  • 00:03:02
    label being visible or hidden is a good
  • 00:03:05
    example of a component property that's
  • 00:03:06
    dependent on the context and we called
  • 00:03:08
    we just called these our component
  • 00:03:09
    properties and the second chunk is state
  • 00:03:12
    which is something that changes based on
  • 00:03:13
    user input and so this really helps
  • 00:03:15
    designers know okay here are the
  • 00:03:17
    component properties I need to worry
  • 00:03:18
    about during handoff and it also helps
  • 00:03:20
    Engineers know oh I can turn these
  • 00:03:22
    directly into code because these are
  • 00:03:24
    State variables I don't need to worry
  • 00:03:25
    about this at all and they can just they
  • 00:03:27
    can just ignore them when they're
  • 00:03:28
    grabbing it it just allowed uh you know
  • 00:03:30
    a project like ui3 or a project like
  • 00:03:32
    slides at conf 2 our execution path to
  • 00:03:34
    just be very clear and um for us to
  • 00:03:36
    communicate what things look like but
  • 00:03:38
    how things behave and what um how these
  • 00:03:41
    components need to stretch and grow so
  • 00:03:43
    that sounds really great but I'm sure it
  • 00:03:45
    wasn't always possible to make the
  • 00:03:48
    components and figma fully aligned to
  • 00:03:50
    the components and code so yeah are
  • 00:03:52
    there any instances where that came up
  • 00:03:55
    and then how did you guys navigate that
  • 00:03:56
    one thing that was interesting uh early
  • 00:04:00
    on was when we when we set up this this
  • 00:04:03
    system of different properties it like
  • 00:04:05
    you said it's not going to be perfect
  • 00:04:06
    it's not going to be perfect one to one
  • 00:04:07
    match with uh with engineering and
  • 00:04:09
    design and so we don't want to make
  • 00:04:11
    components in the figma files optimized
  • 00:04:13
    for engineering is what uh created a lot
  • 00:04:15
    of the inspiration for what is today
  • 00:04:16
    code connect we had a we had a bit of a
  • 00:04:20
    uh false assumption that we were going
  • 00:04:21
    to actually be able to make these two
  • 00:04:23
    things align really well uh and what we
  • 00:04:25
    found over time was that sometimes what
  • 00:04:27
    is easy to consume for engineering does
  • 00:04:28
    not always make it easy to cons for
  • 00:04:30
    design and so in those cases we we we
  • 00:04:34
    use code connects like extensibility to
  • 00:04:36
    really help us create the right code
  • 00:04:38
    that comes out of theine comes out of
  • 00:04:40
    the design components and then Wayne can
  • 00:04:42
    is free to make things that are really
  • 00:04:43
    nice to use in design even though it
  • 00:04:45
    doesn't match one to one with
  • 00:04:46
    engineering we don't have to have a
  • 00:04:48
    deterministic process to go from a
  • 00:04:50
    design component to an engineering
  • 00:04:51
    component because that can all be
  • 00:04:52
    encoded in code con that's awesome yeah
  • 00:04:54
    I think you mentioned before about how
  • 00:04:56
    certain States can be ignored by
  • 00:04:58
    engineering because it's already built
  • 00:04:59
    into to the component I'm sure there's
  • 00:05:01
    lots of other differences in terms of
  • 00:05:03
    like what's already readily available
  • 00:05:04
    versus what kinds of properties
  • 00:05:06
    Engineers need that designers might not
  • 00:05:07
    know exist FPL played a really huge role
  • 00:05:10
    in figma being able to launch bui3 and
  • 00:05:13
    slides and beta for config 20124 so
  • 00:05:17
    considering the really short timeline of
  • 00:05:19
    building FPL um how did you guys juggle
  • 00:05:22
    that so yeah a really big part of that
  • 00:05:23
    was um honestly just establishing
  • 00:05:25
    variables um we had a whole set of uh
  • 00:05:29
    color variables color tokens that we had
  • 00:05:31
    turned into variables uh we had things
  • 00:05:33
    like spacer variables and Corner radius
  • 00:05:35
    variables and really at a very basic
  • 00:05:37
    level that helped the slay a foundation
  • 00:05:39
    for um a lot of the uh choices that we
  • 00:05:43
    come to make Downstream especially in
  • 00:05:44
    the project in u3 where it touches so
  • 00:05:46
    many different surfaces and you know
  • 00:05:49
    there's a lot of really controlled dense
  • 00:05:51
    uh pieces of real estate like properties
  • 00:05:53
    panel within the design editor um it's
  • 00:05:55
    important to have those like very simple
  • 00:05:57
    basic pieces to call on and uh often
  • 00:05:59
    often times it's like the simplest units
  • 00:06:01
    that are the most clearest that'll be
  • 00:06:03
    the most effective in the long run the
  • 00:06:05
    ui2 design system was built before figma
  • 00:06:07
    variables existed and so we were
  • 00:06:09
    managing our variables like many people
  • 00:06:12
    in a spreadsheet that then got turned
  • 00:06:14
    into code somehow um and so one of the
  • 00:06:16
    first things that we did uh in this
  • 00:06:19
    Trans in this transitionary period was
  • 00:06:20
    we took all the ui2 uh variables and our
  • 00:06:24
    tokens and we made a source of Truth a
  • 00:06:26
    made fig of the source of Truth in them
  • 00:06:27
    rather than this spreadsheet we put
  • 00:06:29
    everything into the into figma variables
  • 00:06:31
    and then we built a tool that what it
  • 00:06:33
    does is it takes it uses figma's rest
  • 00:06:35
    API sucks all of the uh or takes all of
  • 00:06:38
    the tokens down down and turns into a
  • 00:06:40
    format that we can then use to generate
  • 00:06:43
    code for web for iOS for Android in turn
  • 00:06:46
    it into our token system then we could
  • 00:06:48
    do the same for ui3 variables now we had
  • 00:06:50
    a way to manipulate them in the codebase
  • 00:06:53
    and make sure that things were
  • 00:06:54
    responding to them uh in both places
  • 00:06:57
    since UI 2 not only has the team really
  • 00:07:00
    grown as you guys mentioned but also the
  • 00:07:03
    number of products that pigma supports
  • 00:07:05
    has increased as well how are you guys
  • 00:07:08
    thinking about how FPL can help support
  • 00:07:11
    figma as it continues to grow and expand
  • 00:07:13
    on top of the ui2 and ui3 modes to our
  • 00:07:16
    design system we also have different
  • 00:07:17
    modes for each product where fig Jam has
  • 00:07:20
    a completely different brand color which
  • 00:07:22
    then has to have a bunch of different
  • 00:07:23
    accents and so all that is encoded into
  • 00:07:24
    variables and then downloaded into our
  • 00:07:26
    theme what's the what's really fun about
  • 00:07:28
    modes is that not only does slides and
  • 00:07:30
    fig gy and design all have different
  • 00:07:32
    brand colors and other modes to their
  • 00:07:34
    tokens we also need to sometimes embed
  • 00:07:36
    pieces of fig jam into design also
  • 00:07:40
    sometimes we need to put pieces of dark
  • 00:07:41
    mode fig jam into design and so uh We've
  • 00:07:45
    we or we made made all of our tokens
  • 00:07:48
    work specifically using C CSS variables
  • 00:07:51
    so that we can override them in in uh
  • 00:07:53
    particular sections our components are
  • 00:07:55
    responsive to the environment they're in
  • 00:07:56
    so as long as we set hey your mode is
  • 00:07:58
    set here inside of our application we
  • 00:08:00
    can embed components in it whatever way
  • 00:08:02
    people don't need to know that they're
  • 00:08:03
    embedding a fig Jam button versus a
  • 00:08:05
    figma button it's all just responsive to
  • 00:08:07
    the to the design tokens yeah and the
  • 00:08:09
    beauty of that approach in design is
  • 00:08:11
    really um you know a designer can take
  • 00:08:14
    um any brand color of their specific
  • 00:08:17
    choice and adapt it to their context
  • 00:08:19
    whether that's in light mode or dark
  • 00:08:20
    mode and it makes you know designing a
  • 00:08:22
    product um really easy because they can
  • 00:08:24
    focus on solving the problem that they
  • 00:08:25
    need but also color are uh color
  • 00:08:27
    variables being mode specific can toggle
  • 00:08:30
    between Dev modee slides and editor and
  • 00:08:34
    if there's ever any sort of future sort
  • 00:08:36
    of uh use cases that we need to cover we
  • 00:08:38
    can automatically extend the modes in
  • 00:08:40
    our variables to cover those cases and
  • 00:08:43
    uh I think the modularity of it and the
  • 00:08:45
    extensibility of it is is really it
  • 00:08:47
    helps a lot because we can very quickly
  • 00:08:49
    sort of publish a lot of these changes
  • 00:08:51
    throughout the team and uh folks can
  • 00:08:53
    just uh you know go off to the races
  • 00:08:56
    with these with the colors that they
  • 00:08:58
    need and um they can tweak them as
  • 00:09:00
    needed through branching em merging yeah
  • 00:09:02
    that's awesome yeah and like kind of
  • 00:09:04
    building off of what you're mentioning
  • 00:09:05
    branching emerging I mean you guys said
  • 00:09:08
    that you know FPL it's inspired by how
  • 00:09:10
    people think about public libraries
  • 00:09:12
    really wanting to build a community
  • 00:09:15
    around figma's internal design system so
  • 00:09:17
    how are you thinking about how FPL is
  • 00:09:20
    going to evolve based on teams feedback
  • 00:09:23
    as more designers and Engineers are
  • 00:09:25
    using it so one of the things that we
  • 00:09:26
    built at the heart of FPL was that FPL
  • 00:09:28
    is a pattern Library it's not a
  • 00:09:30
    component library and so we actually
  • 00:09:33
    separated out different parts of a
  • 00:09:35
    component that are built independently
  • 00:09:37
    so one of the foundations that we built
  • 00:09:38
    on top of was this concept of a
  • 00:09:40
    primitive which is this separate from
  • 00:09:42
    separate from the typical visual design
  • 00:09:44
    in that it is the behavior of a
  • 00:09:45
    component and so we have for example a
  • 00:09:48
    button primitive that is for all buttons
  • 00:09:49
    in the product they should be backed by
  • 00:09:52
    this one button primitive that handles
  • 00:09:54
    everything you need to do about a button
  • 00:09:55
    well You' think oh what is there that
  • 00:09:57
    goes into a button but when you're
  • 00:09:58
    building cool power user tools like
  • 00:10:00
    figma you have these really intricate
  • 00:10:02
    patterns that you need to make sure feel
  • 00:10:05
    really good everywhere and can still be
  • 00:10:08
    accessible and so one one pattern that
  • 00:10:10
    you'll see is in the editor you know
  • 00:10:12
    that you are when you are clicking on
  • 00:10:14
    something a lot of our actions happen on
  • 00:10:16
    your mouse down because it's just a
  • 00:10:18
    nicer feel for the for the customer that
  • 00:10:21
    would normally break accessibility and
  • 00:10:24
    so we put a bunch of work in to make
  • 00:10:26
    sure that this pattern not only does
  • 00:10:28
    still feel good for for for our
  • 00:10:30
    customers that are using a mouse but
  • 00:10:31
    also customers that are using anything
  • 00:10:32
    can use this ju all the same uh and so
  • 00:10:36
    we've we've built that into the heart of
  • 00:10:37
    our buttons so that all of our buttons
  • 00:10:39
    use this down the line and so as the
  • 00:10:41
    design system grows we can add new
  • 00:10:43
    styling of button without losing that
  • 00:10:46
    same feel to it and so the same is going
  • 00:10:49
    to be true for many other patterns um as
  • 00:10:51
    we move as we move through our our work
  • 00:10:53
    and so design can be built e can when
  • 00:10:56
    does design wants to add new components
  • 00:10:57
    to the library it's small and smaller
  • 00:10:59
    chunks of incremental work to do that on
  • 00:11:02
    the code side yeah and I think uh you
  • 00:11:05
    know building on Tom's point it's really
  • 00:11:07
    important for us to build Timeless
  • 00:11:10
    patterns things may change tomorrow but
  • 00:11:13
    I think uh just giving us a solid
  • 00:11:15
    foundation a functional and behavioral
  • 00:11:17
    Foundation to build on is uh really key
  • 00:11:19
    for just yeah just giving some staying
  • 00:11:22
    power to the work that we're doing we
  • 00:11:23
    have a great pretty great culture on the
  • 00:11:25
    team of just having a service mindset
  • 00:11:26
    and being embedded within teams to help
  • 00:11:28
    them cover any new use cases or things
  • 00:11:30
    that might come up um so at least on the
  • 00:11:33
    design side you know we have uh slack
  • 00:11:35
    forums and we we just constantly because
  • 00:11:37
    our ui3 library is uh uh shared across
  • 00:11:40
    both design and Engineering people can
  • 00:11:42
    see a living and breathing sort of
  • 00:11:44
    document and uh be able to ask questions
  • 00:11:46
    in real time uh also we have um a series
  • 00:11:48
    of crits where you know um a lot of
  • 00:11:51
    folks on the FPL team a lot of designers
  • 00:11:52
    on the FPL team where we'll be able to
  • 00:11:54
    plug in and see things from beginning to
  • 00:11:56
    end and uh really what the goal of that
  • 00:11:58
    is to to be service-minded and how we um
  • 00:12:02
    how we just help designers move the kit
  • 00:12:03
    along all right I have to ask this
  • 00:12:06
    question because it's something that
  • 00:12:07
    everyone keeps asking but what's it like
  • 00:12:10
    building figma's design system in figma
  • 00:12:14
    yeah no that's a great question I think
  • 00:12:16
    it's really important for us to dog food
  • 00:12:17
    our own products so we can make them
  • 00:12:19
    great for the customer and I think like
  • 00:12:21
    uh you know a a company of our size and
  • 00:12:25
    a design team of our size and scale and
  • 00:12:27
    how we're we're growing really quickly
  • 00:12:29
    helps us to battle test a lot of those
  • 00:12:31
    tools in the field and I think us being
  • 00:12:34
    able to manage such a complex system on
  • 00:12:36
    top really speaks to like the sort of
  • 00:12:38
    the durability of our tools and like but
  • 00:12:40
    also it helps us expose like what's not
  • 00:12:42
    working very quickly and so we really
  • 00:12:44
    try to like improve the product as we go
  • 00:12:46
    one really good example of this on how
  • 00:12:50
    uh using your own product can make
  • 00:12:51
    something better make make your product
  • 00:12:53
    better early on the the the concept of
  • 00:12:56
    code connect was kind of a uh it was a
  • 00:12:59
    it was a quick idea we're like oh we can
  • 00:13:01
    just quickly generate some code tiits
  • 00:13:03
    for our for our stuff and see what
  • 00:13:05
    happens and so the dev tools team had
  • 00:13:07
    that rigged up really quickly and so but
  • 00:13:10
    we started using it right away on on FPL
  • 00:13:13
    and so as we started to use this we
  • 00:13:14
    started to run into cases where not
  • 00:13:17
    every property maps directly to a code
  • 00:13:19
    to a code property they come into
  • 00:13:20
    different categories and maybe
  • 00:13:21
    ergonomics for designers are different
  • 00:13:23
    than ergonomics for developers and so
  • 00:13:25
    the flexibility of code connect grew and
  • 00:13:26
    grew and grew until Cod connect was the
  • 00:13:29
    awesome product that we have today
  • 00:13:30
    instead of it instead of just being a
  • 00:13:31
    simple okay let's convert figma
  • 00:13:33
    properties to code properties uh and it
  • 00:13:36
    allowed for it now it allows for pretty
  • 00:13:39
    much any scale of design system to
  • 00:13:41
    convert their design code or their
  • 00:13:43
    design source of Truth directly into
  • 00:13:45
    their uh engineering source of truth and
  • 00:13:48
    that's that just comes from using our
  • 00:13:49
    own product yeah I feel like normally
  • 00:13:52
    when something sound straightforward it
  • 00:13:54
    almost never actually turns out to be
  • 00:13:56
    that way so but it's great you guys
  • 00:13:59
    eventually got there um their testing
  • 00:14:01
    and feedback I'm curious to know like as
  • 00:14:03
    you worked on FPL for the past year and
  • 00:14:05
    a half how has your opinion around
  • 00:14:08
    Design Systems change like building them
  • 00:14:10
    maintaining them I'm curious to know if
  • 00:14:12
    this has changed your perspective in any
  • 00:14:14
    way I can't speak for a time but I feel
  • 00:14:16
    like I'm learning something new every
  • 00:14:17
    day um uh don't mean to sound cliche
  • 00:14:20
    about that answer but you know I think
  • 00:14:22
    our team is just like growing so quickly
  • 00:14:24
    and every day we're finding a new
  • 00:14:26
    ceiling that our design system is
  • 00:14:28
    hitting uh whether that's you know where
  • 00:14:30
    do we draw the lines between Behavior
  • 00:14:31
    inside editor or inside file browser uh
  • 00:14:34
    where are the needs for any particular
  • 00:14:36
    surfaces there's a lot of room for sort
  • 00:14:39
    of improvement and um yeah like I think
  • 00:14:42
    it's it's every every sort of day is a
  • 00:14:45
    new lesson in how we can be uh how we
  • 00:14:48
    can take into a different place so I've
  • 00:14:51
    built I've been working in Design
  • 00:14:52
    Systems for a while now uh before figma
  • 00:14:55
    even but the big the the very
  • 00:14:56
    interesting thing about figma's design
  • 00:14:58
    system is how oh we have three products
  • 00:15:00
    that really have their own feeling to
  • 00:15:02
    them they have they have to be
  • 00:15:03
    consistent and we want them to behave
  • 00:15:04
    consistently but they need to feel
  • 00:15:06
    different and so learning how to juggle
  • 00:15:08
    a design system between three products
  • 00:15:11
    and the file browser needs to have
  • 00:15:12
    elements of all of them this is such an
  • 00:15:14
    interesting challenge that like my team
  • 00:15:16
    is working on that that that we're all
  • 00:15:18
    working on every day um and it's it's a
  • 00:15:21
    new adventure now that you know fpl's
  • 00:15:24
    kind of in the hands of people at figma
  • 00:15:26
    what are what are the next steps the
  • 00:15:29
    next steps are let's figure out what
  • 00:15:32
    needs to be improved there's a design
  • 00:15:34
    system's never done anyone any Design
  • 00:15:36
    Systems anyone who is working on Design
  • 00:15:38
    Systems says my my design system is done
  • 00:15:40
    I don't need to do anything more has
  • 00:15:42
    stopped Building Product and so you know
  • 00:15:44
    everything new that we do requires us to
  • 00:15:47
    go back and revisit a pattern and say
  • 00:15:49
    okay I if I'm stretching this pattern if
  • 00:15:51
    this pattern doesn't feel right here do
  • 00:15:53
    we need to make that pattern better I
  • 00:15:56
    think figma as a product Suite is sort
  • 00:15:58
    of of changing in ways that uh is always
  • 00:16:01
    trying to ultimately service the
  • 00:16:03
    customer and yeah and and with that uh
  • 00:16:06
    you know we have to service those
  • 00:16:07
    changes and adapts and I think uh you
  • 00:16:10
    know the ambition of our team the FPL
  • 00:16:12
    team is really to be at the Forefront of
  • 00:16:15
    that and operationalize that and make
  • 00:16:16
    that as easy to use and as easy to
  • 00:16:19
    implement as possible um for both us and
  • 00:16:23
    the End customer all right so the last
  • 00:16:24
    couple minutes here I wanted to share a
  • 00:16:27
    couple of questions that people posted
  • 00:16:29
    on our socials uh that they would love
  • 00:16:31
    to know about
  • 00:16:32
    FPL first question what's the hardest
  • 00:16:36
    thing to keep organized in a design
  • 00:16:38
    system I think feedback is really hard
  • 00:16:40
    to keep organized figma's gotten to be a
  • 00:16:43
    big product right the most of most
  • 00:16:45
    products in the world depend on us now
  • 00:16:47
    and so we have a bunch of people trying
  • 00:16:49
    to build them as the design system grows
  • 00:16:51
    we have to get more and more feedback
  • 00:16:53
    and that is an interesting Challenge and
  • 00:16:56
    so we've had to a lot of a lot of my
  • 00:16:58
    focus in the last six months has been
  • 00:17:01
    figuring out the right the right points
  • 00:17:03
    and time and the right ways to collect
  • 00:17:05
    that feedback and make sure we don't
  • 00:17:06
    lose it all right other question how do
  • 00:17:08
    you manage documentation and usage
  • 00:17:10
    guidelines so we actually just built a
  • 00:17:13
    whole new Doc site for our for the for
  • 00:17:15
    the engineering part of the design
  • 00:17:17
    system um where we build it from the
  • 00:17:19
    ground up to uh service all of all the
  • 00:17:23
    things our customers are asking for um
  • 00:17:25
    our customers being developers in the
  • 00:17:27
    organization and so so we built it not
  • 00:17:30
    only to document the components but also
  • 00:17:32
    to document how some best practices to
  • 00:17:37
    using them as well as some pitfalls to
  • 00:17:39
    avoid especially around accessibility to
  • 00:17:41
    help people help train help train people
  • 00:17:43
    up on how to build more accessibly for
  • 00:17:44
    the web and we built that all in uh
  • 00:17:47
    cooperation with uh with Wayne and some
  • 00:17:50
    of uh his design colleagues to make it
  • 00:17:52
    look cool when you're going to design
  • 00:17:53
    system doc you should feel good about it
  • 00:17:55
    and so we spent a little bit of extra
  • 00:17:56
    time making that look and feel good to
  • 00:17:59
    the people that are using it too um one
  • 00:18:01
    other question that someone asked was
  • 00:18:03
    which component did you all create first
  • 00:18:06
    don't tell me it's the button we created
  • 00:18:08
    the checkbox first that was the first
  • 00:18:10
    thing we did because buttons are too
  • 00:18:12
    wide reaching and the first thing we
  • 00:18:13
    wanted to do was something that was both
  • 00:18:15
    simple uh but also didn't wasn't
  • 00:18:18
    everywhere and so checkboxes are used
  • 00:18:20
    they're important but buttons are kind
  • 00:18:22
    of complicated like we talked about uh
  • 00:18:25
    but buttons are buttons get crazy cuz
  • 00:18:27
    they're everywhere whereas a checkbox is
  • 00:18:28
    only used in a few places so checkboxes
  • 00:18:31
    were an opportunity for us to just score
  • 00:18:33
    quick early you know as a team that was
  • 00:18:35
    still jelling and coming together we
  • 00:18:36
    could celebrate something that was
  • 00:18:38
    pretty achievable do people get punished
  • 00:18:41
    if they detach yeah they go to fpl jail
  • 00:18:44
    yeah I'm the one who slides notes under
  • 00:18:45
    them and tells them how to get out but I
  • 00:18:47
    think like uh no yeah I think like for
  • 00:18:49
    for myself I try to make sure that you
  • 00:18:52
    know uh in the event that they need to
  • 00:18:53
    detach it probably means that we're not
  • 00:18:55
    doing something right and so myself as a
  • 00:18:58
    designer I try to just uh you know spend
  • 00:19:00
    some time uh be very embedded within the
  • 00:19:02
    teams and and just figure out why um and
  • 00:19:05
    uh you know if it's a case of us not
  • 00:19:07
    covering a particular state or variant
  • 00:19:09
    we can solve that um and sometimes it's
  • 00:19:11
    a deeper like functional thing in which
  • 00:19:13
    case it might give rise to like new
  • 00:19:15
    guidance and and new behaviors and us
  • 00:19:17
    for us to actually like definitively
  • 00:19:19
    draw a line and say hey this should be
  • 00:19:20
    different for a very specific reason all
  • 00:19:22
    that information is really helpful and
  • 00:19:24
    um I think like a detach is just a
  • 00:19:26
    symptom that you know maybe maybe
  • 00:19:28
    there's something that we're not doing
  • 00:19:30
    and so for myself I just take it as
  • 00:19:31
    signal that hey how can we do things
  • 00:19:33
    differently how can we help you um and
  • 00:19:35
    to investigate those reasons uh one
  • 00:19:38
    thing that we did early on was make it
  • 00:19:40
    so that detachments were able to be
  • 00:19:42
    visible in code and so what we can do is
  • 00:19:44
    now we can go and audit why teams are
  • 00:19:47
    detaching ask them followup questions if
  • 00:19:49
    it's not obvious what they're detaching
  • 00:19:50
    into uh and so now we we are able to
  • 00:19:53
    track all these detachments and use them
  • 00:19:54
    as a feedback channel for us to develop
  • 00:19:56
    the design system for there very cool
  • 00:19:58
    well thank you guys so much for sitting
  • 00:20:01
    down with me and talking about FPL it
  • 00:20:04
    sounds like you have a lot of work cut
  • 00:20:06
    out for you but wishing you all the best
  • 00:20:08
    of luck thank you yeah it's great doing
  • 00:20:11
    this well thank you so much Tom and
  • 00:20:14
    Wayne for sharing some of the insights
  • 00:20:16
    of things that you've learned when
  • 00:20:17
    building FPL as well as some of the
  • 00:20:19
    details around how you built Your Design
  • 00:20:21
    system to the people who are watching I
  • 00:20:24
    hope you guys really enjoyed this
  • 00:20:25
    conversation if you have any more
  • 00:20:27
    questions around how to build a design
  • 00:20:29
    system or how we build it here at figma
  • 00:20:31
    please drop a comment below and we hope
  • 00:20:34
    to see you guys some other time
Tags
  • FPL
  • Figma
  • 设计系统
  • 工程
  • 组件属性
  • code connect
  • 产品开发