The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
š¤When applying to jobs, I often see requirements like āadvanced Figma skillsā or āusing best practices, Auto Layout, components, variables, etc.ā
Come on, this is the basics.š¤·š»āāļø
As a designer with 10+ years of experience building SaaS web applications, I see these things as a foundation, not something that should even need to be asked about.
But since clients often want proof of these skills, I decided to write an article showing exactly how I organize a large SaaS web application in Figma.
I think it can be useful not only for clients, but also for experienced designers and teams.
And Iād be glad to hear about any practices you use that I didnāt mention.š
1ļøā£ Project & file setup
Every engagement starts with a clean project structure. I create the project in your Figma workspace, so ownership and admin rights always stay on your side.
Inside the project, work is split into separate files so nothing gets mixed up: product design,...
2ļøā£ Component library
The component library lives in its own file, separate from the screens. This is deliberate. It keeps design files light and fast, makes the library reusable across projects, and, most importantly, enables sync. Every design file is connected to the same...
What the library is built from
ā¢Ā Variables: colors, spacing and corner radius values live as tokens (including light/dark themes), paired with a full type scale applied consistently on every screen.
ā¢Ā Text styles: a full type scale (headings, body, captions) applied consistently...
That table is the single source of truth for the whole product, and variable names match the code's design tokens 1:1, giving design and development a shared language. Because every screen pulls from the same place, values can't drift apart from screen to screen: change a token once and everything using it updates.
Reusable components
Every recurring element (buttons, inputs, cards, navigation) lives in the library as a component. A component is defined once, with variants for every state and size, and used across screens as instances that stay connected to the source. When a component...
Auto layout & responsive design
Every component and screen is built with auto layout, Figma's equivalent of how developers actually build UI. When text gets longer or an element is added, the card resizes itself: nothing overlaps and nothing needs manual realignment.
Auto layout also speeds up work on mobile versions. With properly configured auto layout, a row of cards reflows onto the next line by itself and spacing holds at any frame width.
3ļøā£ Organizing work in a file
In any project I work on, the page list reads like a table of contents. Three conventions make that work:
Page names. Each major part of the product gets its own page, usually mirroring the productās sidebar or navigation.
Flow organization. Each flow...
4ļøā£ Prototyping
I test flows before theyāre built. Screens are wired into clickable prototypes right in the design file, so stakeholders click through a flow instead of imagining it, and usability issues surface before a line of code is written.
For complex logic
5ļøā£ Developer handoffĀ
A handed-off file should answer questions, not create them. Before anything is marked ready:
ā¢Ā Layers get clean, semantic names. No āFrame 427ā.
ā¢Ā All sizes, padding and gaps come from the spacing scale, so the Inspect panel shows real, systematic values.
ā¢Ā ...
š Summary
You own the files and always see the real project state. One component library keeps every screen consistent and speeds up new ones. Statuses make progress visible without meetings, flows are tested as prototypes before development, and developers receive clean, annotated, token-based files.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
pure eye candy š
Built a distinctive identity system for The Growth Fit, turning its precise, human approach to talent sourcing into a scalable brand experience.
the system feels precise without losing warmth. how did you land on the final yellow direction?
What if hairstyles were treated more as a medium for self-expression, not just beauty?
For this premium hair extensions brand, created byĀ a Paris-based hairstylist whose work celebrates the artistry, diversity and individuality of hair, we created a brand that brings the energy of creative editorial hairstyling into everyday life.
In many ways, society is shifting the meaning ofĀ luxury. Weāre gradually moving toward the idea that luxury is less about how others perceive us and more about how we experience life, what we choose for ourselves and how we express who we are.
Have you noticed this shift in other industries too?
Full project
wonderful branding for hair extension brand.
