Figma: which skills should you demonstrate beyond attractive mockups?
A useful Figma file helps a team understand, evolve and discuss an interface. Show component behaviour and file organisation alongside visual quality.
1. Design for changing content
Prepare a card with a short title, then a longer one. Use auto layout to organise elements and adapt spacing and sizing to content. Explain what stretches, stays fixed or wraps.
2. Show component states
Present relevant form-field states: empty, completed, error and unavailable. Components and variants help organise similar elements. Avoid adding dozens of variants without a real need.
| Fictional exercise | Evidence |
|---|---|
| Change a button label | Size adapts while spacing remains consistent. |
| Show an error | Useful message and consistent state. |
| Reduce screen width | Layout decisions and planned limitations. |
3. Make the file understandable
Name pages, components and screens clearly. Separate explorations, selected proposals and items awaiting approval. Include a short introduction with the scenario and open decisions.
4. Demonstrate a journey
A prototype can show key transitions and interactions. Include a return route, empty state and error. Explain what is simulated: clickable links or animation do not prove a working application exists.
5. Prepare a demonstration
“In this personal project, I can change card content, show field variants and run the prototype. The file also describes expected development behaviour.”
Official resources: auto layout and Figma variants. Claim only functions you have actually used.
Illustrative stock photos; the people shown are not presented as Kamerjob employers. Cover and illustration: Pexels / Pexels.
Find opportunities on Kamerjob and tailor your portfolio to the actual duties in each vacancy.
The Kamerjob team
Comments
Loading comments…