A guide on using Figma for product management and frontend development
Read quick tips on how to work with Figma and better understand how Ataccama designers prepare their files for collaboration and hand-offs.
Figma essentials#
Join the Ataccama team#
Access Figma from your browser or download the Figma desktop application.
Request being added to our Ataccama Figma team or ask a designer in your spaceport to add you to the organization.
Once you’re part of Ataccama team you can browse designs in all Spaceports . Jump into the Spaceport you’re part of and add it to your favorites — you will see all the design files related to your Spaceport. This is now your homepage for designs. Bookmarking is heartily recommended!
Search for files and people#
Find a specific file or see what a particular person has been recently working on.
Search inside a file (CMD+F) to find the content you're looking for.
Use filters to refine your search results.
Add comments to design files#
We encourage everyone to share feedback with us in the comments. Designs are getting better with feedback.
Use the comment tool button or press “C” and place the comment in a frame. Comments outside of frames get lost when content is moved or duplicated.
Place the comment in a frame. If done differently, the comment gets lost when the frame is moved or duplicated.
Use common keyboard shortcuts and markdown to format your comments or mention users by entering @ in the comments.
Sharing screens and files#
Prefer sharing a specific screen to make it easier to understand what you're referring to.
Unselect everything, click on Share button and select copy link to share links to the whole Figma.
Inspect designs in the dev mode#
Access dev mode (Shift+D) to inspect designs. The dev mode allows you to:
- See the components used by Flamingo (the design library in Figma )
- Measure margin and padding values
- Check variants of components
- Use plugins
- Check fonts and colors
- See the changelog
Read more about the Figma dev mode here.
Figma structure#
The following list contains the structural building blocks of how Ataccama organizes their Figma files:
- Team (Ataccama)
- Projects (Spaceports: DQG / MDM / Cloud / Foundations / …)
- Files (Missions / GC tasks)
- Pages (Discovery / Ready for dev / …)
Prototypes#
Designers might create interactive prototypes where you can try, see, and feel the designs in action, like it was coded and implemented.
The interface is a bit different from the editor mode. You can browse different flows in the left panel, share the prototype, and change view options.
Find more details on prototyping in Figma here.
We use prototypes to:
- Show interactions
- Demonstrate user flows
- Conduct user testings
Design hand-offs#
This is a more in-depth view on how to orient in Figma files that designers prepared during their lifecycle — from research and discovery to prototypes and final screens. It may differ depending on your Spaceport and designers.
File types#
We have 2 main file types: Missions and Ground Crew tasks. Designers are responsible for updating the state of the mission (Discovery / Space / Landed).
Organization of GC tickets depends on how complex they are. You can have a file per a feature or a single file with more features together.
File structure#
Design files usually contain multiple pages accessible from the left panel. The structure is as follows:
✅ Ready for Dev: proposals aligned with developers and PMs.
🔁 Prototype: for user testing or for important flow presentations.
📒 Discovery: a playground for designers where PMs and Devs can collaborate.
🔎 Research: brainstorming, initial sketches, and competitor analysis.
📁 Archive: no longer needed proposals kept for future reference.
📄 About: cover and links to missions.
Page structure#
Designers are asked to follow these recommendations:
- Use sections to divide the content into logical parts, such as onboarding, dashboard, emails, and use cases.
- Use section descriptions to explain the objectives, target audience, and provide links.
- Use status indicators to provide clear states for others, such as current vs. new, in progress, in review, ready, etc.
- Use connectors to visualize the flow between sections.
- Put screens next to each other to show the flow between them.
- Put screens under each other to show variants.
- In case of multiple variants, separate the components and annotate them.
Annotations#
We use labels and stickers to explain our design rationale. Screens that are placed in Ready for dev page should always contain such annotations. Don’t hesitate to ask your designer to add it if they're missing:
Status indicators#
Indicators helps to orient among screens on a page. Designers indicate the state a section, frame, or a screen currently is in. We use the following states and colors:
🔵 In progress
🟣 For review
🟢 Ready for dev
🔴 Rejected / Deleted / Descoped
🌑 Archive / Current / Others
Resources#
Figma Design Handoffs with Jan Patka | Ataccama blog
Dev Mode: Design-to-Development | Figma
Design Overview: A Collaborative Product Development Platform | Figma