Figma Config 2023 Feedback

#DesignSystem #DesignTokens #DesignSystemTokens #Design #DesignDevelopment

I loved being able to participate to the #figma #config2023 Watch party in Paris. It reminded me of the early days of Adobe or Macromedia when they showcased their new products for new features. Same early bird atmosphere with the effervescence and enthousiasme of the rising potential of what you can do with all that. It was also great to interact with the actors of the community, finally turning the Covid page.

I would like in that regard to thank the figma local team for the great #configwatchparty organization. Great location and multiple ambiance to follow the live or to network and party. I would also like to stress that such an event is fantastic to meet today's #DesignSystem pioneers, with a lot of energetic youth and talented experts. It was great to meet with so many people with the same needs, such as Gabriela Gabriel , from Renault. It was lots of fun!...

Some quick notes

During the conference, it is worth flagging out that although the Adobe purchase was mentioned, the entire show went on as if nothing had happened. It looks as if the indépendance of the team have remained after the purchase. A good sign for the continuity of the product. It would be good if it can stay that way, and learn from that past mistakes.

An interesting sing of time is the mention of the release of the latest ios 17 design guidelines by Apple. So now on mobile both Apple and Google have migrated to use figma as a reference design platform.

Another hype subject was covered by presenting the acquisition of Diagram that positions AI at the service of designers. Not much more to say as it sounded like the token subject presented last year... here is an ongoing subject we'll have to come back to in the future ;)

This config session was indeed very rich in new features and I was impressed with the important positioning turn that Figma is evolving toward. However I would like to take the time to focus on 2 major impacting evolutions:

#DesignTokens & #Variables

Figma has long implied that they where working on tokens. This new release did confirm this direction but surprised in going beyond just the strict design tokens.

As a good developer, the concept was analyzed to scope out how and where it could be used. When you try to explain design tokens to people, you always come back to a common vocabulary to use between designers and developers, and that is that Design Tokens are simple variables that you define and commonly share between all co workers. Applying the tokens in the figma interface probably rappidly raised an issue that the design tokens could be applied all throughout the interface. If you consider that this becomes commun usage and that you can now interact with variables everywhere, then how do you make the difference between design tokens variables and other types of variables used in other parts of the interface, like the prototypes? This is why I think Figma have quickly used a more generic wording that can evolve easily over time, and serve broader needs then just the Design Tokens.

I've started to play with the variables, and i love it. Very promising. It gives a hole new perspective on the use of tokens within figma. It does allow to generate a structured Design System Token architecture with options and decisions. You can create options like reference tokens that can in turn be used in the decisions system tokens.

Once you've setup the entire architecture, you can use modes to generate themes. These themes can include the light and dark mode or/and a complete branding theme. There is definitely a kind of magic when you apply a mode as a context of your frame and... ?? Ta-da!... the change is automatic!

Now, I still need to go beyond the mode appearance that allows for the theme switcher including branding logo management. I particularly need to investigate the API available to interact with variable... Lost to discover I presume.

The current variable implementation, is obviously the first of many updates, to come on the subjects. But I do however miss some important features like the w3c json compatibility that does allow to easily export, but more importantly, to edit the variables in an easy format to play aroud with. I also found that the current implementation is missing the ability to apply the variables on other types of data like typography styles, images, ...

In this article I'm not talking about the usage of variables in the prototypes because it is less in my scope of work but it seems to allow a massive simplification to create mokups.

Developer inclusion

Another very important evolution of figma in this 2023 edition of config is the work done to provide a service adapted to 1/3 of the users of the tool: the developers.

Some simple features turn out to be the most important ones, not in size but in streamlining the worflow between collaborators. A simple tag on your design that says... "Ready to dev" becomes a super time saver for the dev to focus only on whats ready.

The dev mode is obviously more then that, as it proposes a direct view of the finalized designs in a direct decomposition of each independant items... No need to drill down into multiple layers structure of items embeded into one another. One click and you're there to see this item was setup by the design with relation to it's context.

The new dev mode also specifically proposes a dedicated code implementation in various target languages web like css, or mobile like swift ui and jetpack compose. That remains to be tested as these features were never to the likes of the devs in the past experiences... but its too early to say as now, designers will need to better fonalize their designs to make sure the design rules are being setup at creation and not reversed engineered by developers, based on their interpretation of a design ;).

If the new designs are well constructed, then the code base could be appropriately created... aspecially knowing that figma is allowing this descriptive formalization of the design created in the same way that the new descriptive languages allow this same type of description. This natural compatibility should raise the possible compatibility of the previously separated univers. In this regard figma is definitly creating the bridge between designers and developers as coworker working together around the same tools.

Conclusion

I have not covered all that was anounced in this year's config event. I'm sure I've missed more features to test that i hope to enjoy as much as these ones.

As you can see all those evolutions put together and the figma tools expands its realm into various areas of work to compete even more with specialists tools like axure or zepplin. One environment can integrate what you where previously performing with multiple tools. Internal expertise can be captalized more easily as everyone can use the same tool accross all company expertises; UI designs, UX designs, prototypes, accessibility, development.

I'm now energized to explore even more all these new features in more deapth.