Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.
Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. “Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”
Developer Advocates Jake and Akbar made a couple of sample plugins for importing/exporting variables and converting existing color styles to variables. (Also, Ryhan provides an interesting insight into how Figma migrated from color styles to variables in their internal design system.)
🛠 Plugins to help you along the way
— Figma (@figma) June 21, 2023
Our developer advocates @jak___e and @actuallyakbar have published a number of plugins to help you get started.
👉 Variables import/export plugin: https://t.co/HpyNOJ0JGd
👉 Styles to variables converter: https://t.co/ud7XFW2NpU pic.twitter.com/69T42lPAKM
An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.