Framework APAC: Office hours: Design systems, AMA

Summary

In this insightful session, Figma's designer advocate Corey and his colleague discuss the intricacies of Design Systems during an AMA session. They cover topics like variable scopes for typography, the use of Q&A for questions, and the utility of modes for translations. They also delve into the benefits of typography variables over styles, the coexistence of design guidelines and systems, and the potential of code connect for accessibility. The conversation provides a rich resource for designers looking to enhance their understanding and application of Design Systems in their work.

Takeaways

• 😀 The AMA session is focused on Design Systems and aims to answer questions related to design systems and recent feature launches in Figma.
• 🔍 Corey, a designer advocate at Figma, is working on variable scopes for typography, which are in the early stages and will have updates in the future.
• 🌟 Figma has introduced new features like typography variables, gradients, code connect data, and library analytics to enhance design systems.
• 📝 Users can utilize text variables for translations and change labels and languages using modes, which is currently possible with existing variable features.
• 🔄 Modes can be used for more than just translations, such as adjusting the tone and manner of text in a single language environment.
• 🔗 Code connect is currently in beta and open for organizations and enterprise plans, aiming to bridge the gap between design and code.
• 📚 Design Systems and traditional design guidelines are seen as complementary, with Figma offering a spectrum of documentation options.
• 🛠️ There is an ongoing discussion about the best practices for documentation, with some organizations using both Figma and external tools like Storybook.
• 🔑 Figma's approach to composite variables, such as typography and gradients, is to use styles that wrap individual variables together for easier management.
• 🔄 The session touched on the possibility of using variables for dynamic font scaling and testing designs across different platforms like iOS and Android.
• 🛑 The AMA session concluded with a Q&A, emphasizing the importance of community engagement and the continuous evolution of design systems in Figma.

Q & A

What is the AMA session about?

The AMA (Ask Me Anything) session is about Design Systems, where the hosts, Corey and Jess, discuss various aspects of Design Systems, answer questions, and talk about recent feature launches in Figma related to Design Systems.

What is the current status of variable scopes for typography in Figma?

Variable scopes for typography are intentionally being worked on and are still in their early stages. The audience is advised to stay tuned for more updates on this feature.

Can text variables be set for text layers in Figma?

Yes, text variables can be set for the value of a text layer, such as a button label, and can be changed using modes for different translations or languages.

What is the role of Design Systems in relation to traditional design guidelines?

Design Systems and traditional design guidelines are complementary. They should work hand in hand, with Design Systems providing a more interactive and scalable approach, while traditional guidelines offer detailed documentation.

How can developers add accessibility to components via Code Connect?

Developers can refer to the Code Connect repository on GitHub for examples on writing different ARA tags for components in various formats like React or Storybook.

Is it possible to use text variables for dynamic font scaling across iOS and Android designs?

Yes, modes can be utilized to test design variations for different platforms like iOS and Android, allowing for dynamic font scaling adjustments.

What is the current stance on composite variables for typography in Figma?

Styles are considered the composite variables in Figma. They allow packaging all typography variables together, making it easier to manage and apply as a whole.

Does Dev mode support low-code platforms like OutSystems?

The script does not provide specific information about OutSystems support in Dev mode. It suggests that more context or details are needed to provide an accurate answer.

Can Figma's Code Connect support other types of development frameworks besides React and Swift UI?

While React and Swift UI are currently supported, Figma is considering support for other frameworks like Angular, indicating that updates on this matter will be provided in the future.

How should a single component library be set up for multiple products with different theming?

A single component library can be efficiently set up using variables with separate modes for different themes. This allows for easy updates and theming across multiple products.

What is the benefit of using typography variables over Styles in Figma?

Typography variables are beneficial for scaling Design Systems, allowing for quick switching between different modes or brands. They also help in syncing better with the code base, bringing design and development closer together.

How does Figma plan to make its products more comprehensive for designers as new features are added?

Figma is aware of the increasing complexity and is focused on making the product more comprehensive. Designer advocates serve as a bridge between the product and the community, helping to educate and share best practices to adopt new features without overwhelming users.

What is the difference between Storybook and Code Connect in the context of documenting design and code?

Code Connect is a native Figma feature that connects code repositories to Figma for documentation, while Storybook is a separate tool outside of Figma for documenting design and code together, with additional features not native to Figma.

How should a team approach modifications to an existing Design System to fit their business needs?

Teams should start with an existing design system framework and gradually customize it as their needs grow. It's important to build on the initial framework, adjusting and scaling it to suit the business requirements over time.