Wireframing | Techlist.io

figmaMar 31, 20252 min readCurated summary

The Designer's Handbook for Developer Handoff | Figma Blog

Design-to-development handoff works best as an ongoing collaboration rather than a final transfer of files. Designers and developers bring different priorities—elegance and consistency versus performance and stability—so teams should involve engineering early, communicate openly, and agree on what “good” means. The article organizes this collaboration around aligning on the product, choosing how to build it, sharing vocabulary, and clarifying design intent. ## Align on What You’re Building - Involve developers during wireframing or early feasibility checks, when design ideas are still easy to change. - Early engineering input can: - Clarify scope and technical constraints - Reveal difficult implementation logic - Identify opportunities to reuse or extend existing functionality - Prevent costly rework later - Use wireframes in Figma or FigJam to make ideas concrete without overcommitting to visual details. - Figma is suited to more structured, concrete visuals. - FigJam supports exploratory thinking and feedback from outside collaborators. - Less realistic wireframes help teams focus on user flows and overall direction instead of prematurely debating polish. ## Ask Developers Targeted Questions - Developers may notice redundant work or reusable patterns, but designers often need to prompt them explicitly. - Ask about: - Constraints and possible friction in the data layer - Missing states in a sequence of screens - Existing product patterns that could be reused - Asking these questions turns developers into proactive design partners rather than people who only implement finished screens. ## Work Within Developer Workflows - Developers frequently switch contexts and need uninterrupted time to reach a productive flow state. - Designers can build trust and improve collaboration by understanding how developers work and meeting them in their existing tools and processes. - The article also points to shared artifacts, such as using code blocks in FigJam to align on component APIs in design-system documentation and development workflows. ## Broader Collaboration Principles - Effective handoff depends on curiosity, continuous communication, and a shared point of view about quality. - The remaining focus areas are deciding how the design should be built, adopting a shared language, and explaining design intent in ways that account for the developer experience. Designers should treat handoff as a shared problem-solving process, involving developers early and asking precise questions about constraints, states, reuse, and implementation. This reduces rework while producing designs that are both ambitious and practical to build.

Read original

Wireframing Figma Design Systems Figjam+2

figmaAug 24, 20212 min readCurated summary

FIT’s principles for fostering a collaborative classroom | Figma Blog

Professor Christie Shin of the Fashion Institute of Technology uses Figma to create a virtual classroom centered on systems thinking, frequent feedback, and open collaboration. Her approach treats design as an evolving process rather than a finished object, helping students build habits that mirror professional design teams. She organizes coursework into Figma teams, projects, files, and templates while preserving space for experimentation and individual expression. ## Celebrate Early Work - Students share unfinished ideas regularly instead of waiting for polished presentations. - They visit one another’s files and provide feedback both verbally and directly in Figma. - This reduces the fear of exposing imperfect work and reinforces design as a way of thinking. ## Guide the Process While Leaving Room to Grow - Coursework—from exercises to final presentations—is kept in Figma. - Students receive structured files with named pages and templates for each activity. - The infinite canvas leaves room for sketches, iterations, and exploratory work. - Each file becomes a “creative journey,” documenting research, summaries, wireframes, and development over time. ## Work Individually, Together - Students complete individual projects within study groups. - For a project involving an MTA app design system and video case study, students presented progress incrementally rather than waiting for final critiques. - Continuous peer feedback reflects real-world cross-functional collaboration and helps students become less attached to initial solutions. ## Embrace Influences - Students are encouraged to share work openly instead of hiding ideas to prevent others from copying them. - Shin frames influence as a normal and valuable part of design practice. - Each project requires students to collect and credit visual references from professional designers and classmates. - Discussing these influences during critiques makes the design process more transparent. The article recommends combining clear structure with open collaboration: provide students with organized tools and milestones, but give them room to experiment, share early work, learn from peers, and acknowledge the influences shaping their designs.

Read original

Wireframing Figma Design Systems User Experience Design+2

figmaDec 15, 20202 min readCurated summary

Redesigning Dropbox’s ways of working | Figma Blog

Dropbox’s shift to a virtual-first model required more than moving meetings online; it meant redesigning how teams collaborate and maintain creative energy. Having already adopted Figma, the design team expanded its use from design production to brainstorming, reviews, handoffs, and cross-functional communication. Figma ultimately became a shared visual workspace for teams across Dropbox, helping recreate some of the spontaneity and connection of the physical office. ## The Challenge of Virtual-First Work - Dropbox’s culture and workspaces had been designed around in-person collaboration across twelve global offices. - Design teams relied on physical workshops, post-its, whiteboards, and informal interactions to generate ideas. - Remote work made creative flow and team connection less automatic, requiring more intentional collaboration practices. ## Redesigning Collaboration with Figma - Dropbox’s design organization had migrated from Sketch to Figma in 2018 and already used it for: - Brainstorming - Wireframing - Prototyping - Commenting - During the pandemic, designers increased their reliance on Figma to reduce communication gaps. - Observation mode replaced some in-person design reviews, allowing participants to follow a presenter’s work directly. - Designers shared files for rapid iteration instead of pairing at a desk or brainstorming in a physical room. - Design sprints brought engineers and product managers directly into Figma, making participation easier for non-designers. - Teams also created asynchronous workflows, such as using checkmarks in an icon template to signal that assets were ready for inclusion in the master library. - These file-based processes reduced unnecessary communication and improved the efficiency of recurring library releases. ## Expanding Figma Across Dropbox - The design team became an example of how remote collaboration could work for the broader organization. - Cheechee Lin led workshops teaching cross-functional teams how to navigate Figma and use features such as commenting, exporting, viewing, and following. - More than 200 people from marketing, research, data science, and other teams attended the workshops. - Figma provided a shared visual space that compensated for the lack of physical whiteboards. - Teams beyond design began using Figma for test plans, research presentations, survey data, qualitative insights, and collaborative presentations. Dropbox’s experience suggests that successful virtual-first work depends on deliberately rebuilding collaborative habits, not simply adopting video calls. Making a shared, accessible workspace central to communication can help distributed teams preserve creativity, speed, and cross-functional involvement.

Read original

Wireframing Figma Design Systems Prototyping+2

figmaJun 17, 20203 min readCurated summary

How to get closer with your developer | Figma Blog

Bringing engineers into product design early helps teams uncover technical constraints, explore better solutions, and move faster. Rather than waiting until designs are polished, designers should use early, exploratory collaboration to expose assumptions and edge cases. The post recommends partnering closely with one engineer through ideation using straw man mocks, brainstorming, and clearly defined questions. ## Technical Knowledge Improves Ideation - Engineers can identify technical constraints and unexpected edge cases early. - This input helps designers avoid solutions that seem promising but are difficult or costly to build. - Early collaboration does not eliminate creativity; it makes ideas more thoughtful and grounded. - Sharing unfinished work can be more productive than protecting designs until they appear complete. ## Establish a Close Engineering Partnership - For Coda’s Packs Tables feature, Helena Jaramillo worked closely with one engineering partner, Gil. - Packs Tables connected services such as Spotify, Google Calendar, and Gmail to Coda documents. - Because the feature had to work across multiple APIs, close engineering collaboration was essential. - The broader team was involved, but having a consistent partner enabled faster brainstorming and continuous feedback. ## Start with Straw Man Mocks - Straw man mocks are quick, rough visual proposals intended to generate discussion rather than finalize a design. - They should: - Be fast to create, since early assumptions are often incorrect. - Ask more questions than they answer. - Present multiple directions instead of prematurely narrowing to one solution. - Designers should first imagine how the feature might work if it were easy, then test those assumptions with an engineer. - Useful questions include: - What assumptions or misconceptions are we making? - What are we overlooking? - Which directions are interesting? - Which directions are technically difficult, and what trade-offs would they involve? ## Brainstorm Through Visualization - Early brainstorming should involve both designers and engineers, not just a finished design review. - Teams can use wireframing kits, high-fidelity components, paper sketches, iPads, or screen sharing. - During Packs Tables, Helena and Gil used whiteboarding to explore UI ideas and clarify potential problems. - The goal at this stage is alignment and exploration—not polished interface design. ## Define Key Questions - Key questions act as principles for making later decisions. - They help teams address foundational issues before debating individual solutions. - Answering questions about constraints, resources, priorities, and desired outcomes makes detailed decisions easier. - Helena and Gil recorded their key questions in a Coda document and reviewed them with the engineers involved in the project. Designers should treat engineers as creative partners from the beginning of a project. Rough mocks, shared brainstorming, and agreed-upon guiding questions create a faster path to feasible, thoughtful solutions.

Read original

Wireframing Product Design Collaboration API+2

figmaApr 20, 20202 min readCurated summary

How Inneract Project empowers brown and black designers | Figma Blog

Inneract Project, founded in 2004 by Maurice Woods, introduces Black and brown students to design as a path for creative expression, community impact, and future careers. Its curriculum evolved from hands-on paper exercises to professional digital design training as students’ interests shifted toward UX/UI. Figma became especially valuable because its browser-based, free-to-start platform removed cost and access barriers while enabling collaboration and continued practice outside the classroom. ## Building a Foundation Through Hands-On Design - Early courses avoided software and hardware, emphasizing critical and creative thinking through paper-based activities. - As students requested more formal training, Inneract developed **Pathway to Design**, a curriculum for students as young as middle school. - The program initially focused on graphic design, then introduced professional software and hardware. - Expensive licenses and limited equipment often meant students had to share computers. ## Finding Figma - As the industry moved toward mobile apps and interfaces, Inneract updated its curriculum to teach UX/UI design. - Figma was free to get started, reducing financial barriers for students and the program. - Its beginner-friendly tools were also relevant to professional design workplaces. - Because Figma runs in a browser, students could access their files from libraries, schools, and other public computers. - Students practiced outside class more easily, accelerating their skills. - Collaborative Figma projects expanded opportunities to work with classmates, volunteers, and community partners. ## Student Growth and Real-World Projects - Inneract offers workshops, multi-day courses, hackathons, company partnerships, and an expanding student community. - Students have pursued design education and careers, including graphic design and design research. - Student projects address practical community needs: - Sierra designed a more usable walker concept for elderly people and created a music-focused mobile app. - Noah developed an ad campaign supporting homeless youth and created a zine about Oakland graffiti and street art. - Leigh created posters and graphics for her high school before studying graphic design. - The projects demonstrate how early design education can build confidence, creativity, and an interest in solving real-world problems. Inneract’s experience shows that accessible tools, combined with early mentorship and community-focused projects, can help underrepresented students envision and pursue careers in design.

Read original

Wireframing Figma Graphic Design Mobile Apps+2

figmaAug 11, 20192 min readCurated summary

How to wireframe | Figma Blog

Wireframes are simple blueprints for websites and digital products that clarify structure, functionality, and user experience before visual details are finalized. Their low-detail nature encourages feedback from designers, developers, stakeholders, and users without distracting them with colors or branding. The article recommends choosing the appropriate fidelity, keeping visuals deliberately simple, and using wireframes to communicate and iterate on ideas. ## What Is a Wireframe? - A wireframe represents the skeletal framework of a digital product, similar to a building blueprint. - It shows the shape, layout, and structure without defining final visual details. - Wireframes should be understandable to the entire team, including designers, developers, stakeholders, and users. - Because they are not treated as final designs, they support usability research, stakeholder feedback, and rapid iteration. - Their simplicity keeps discussions focused on functionality and user experience rather than aesthetics. ## Types of Wireframes ### Low-Fidelity Wireframes - Low-fidelity wireframes use basic layouts and high-level interactions. - They are typically grayscale and represent UI elements with simple shapes, lines, and placeholders. - Pen and paper can be sufficient, though tools such as Figma make sharing and updating designs easier. - They are useful for exploring ideas quickly before investing in detailed design work. ### High-Fidelity Wireframes - High-fidelity wireframes develop the low-fidelity structure with more realistic visual elements. - They may include colors, graphics, branding, typography, textures, shadows, images, and copy. - Designers can move from low-fidelity wireframes directly to prototypes, or treat high-fidelity wireframing as an intermediate step. ## Best Practices for Creating Wireframes - Keep aesthetic elements simple, generally using grayscale rather than full color. - Use no more than two fonts to establish information hierarchy. - Create hierarchy through font size, weight, and styles such as bold or italic. - Represent images with boxes or rectangles, often marked with an X. - Represent video placements with a box and a play-button triangle. - Focus on communicating layout and function instead of producing polished visuals. ## Designing for Different Screens - Wireframes should account for the practical contexts in which a design will be used. - Consider how layouts adapt between desktop and mobile devices. - Plan for both portrait and landscape orientations when relevant. - Different screen sizes and orientations may require separate wireframe versions. ## Practical Recommendation Start with a low-fidelity wireframe to test structure and interactions, gather feedback, and refine the concept. Add visual detail only when the layout and user experience are sufficiently clear.

Read original

Wireframing Figma User Experience Prototyping+2

figmaMar 20, 20192 min readCurated summary

The power of Figma Drafts | Figma Blog

Figma Drafts provide a private space for experimentation before designs are ready for team-wide visibility. Josh Dunsterville argues that separating rough exploration from polished project files reduces fear of judgment and encourages faster, more creative iteration. The central principle is simple: create first, organize and share later. ## Why Drafts Matter - Traditional design workflows often encourage sharing only polished, “presentable” work. - This can lead designers to prioritize tidy files, perfect pixels, grids, and layer names over exploring solutions. - Drafts act as a private personal folder, independent of broader team or project permissions. - Individual draft files can be shared when appropriate, but drafts cannot be opened globally to an entire team. - The concept resembles a physical notebook: informal, incomplete, and free from pressure to look finished. - This environment can also help overcome designer’s block by removing the need to plan every detail before starting. ## Using Drafts for Exploration - Drafts can hold anything from quick app concepts to experiments with Figma features. - Untitled files, rough shapes, default colors, and messy layouts are acceptable. - The key workflow is: **create first, organize second**. - Designers should use drafts to quickly capture and test ideas without worrying about presentation quality. ## Moving Ideas into Projects - When a draft is ready for further development or team collaboration, it can be moved into a project. - Files can be transferred by: - Dragging them into the desired project. - Selecting the “Drafts” location inside the file and choosing a project. - If an idea may be useful later, duplicate the draft before moving it so the original remains as a snapshot. - Drafts can remain the messy source of truth, while project files are cleaned up for broader use. - File-browser filters such as file name, creation date, and last-modified date help manage drafts as they accumulate. Drafts are most valuable when treated as a low-pressure digital notebook rather than a staging area for finished work. Keep early thinking private and messy, then promote only the ideas that merit organization and collaboration.

Read original

Wireframing Figma Design Systems Prototyping+2

figmaJun 4, 20182 min readCurated summary

With websites, what comes first: The copy or design? | Figma Blog

Website projects often become slow, repetitive exchanges between copywriters, designers, and stakeholders. The post argues that copy and design should be developed together rather than sequentially, using a shared, cloud-based workspace like Figma. Real-time collaboration reduces revisions, meetings, delays, and confusion while producing better web assets. ## The Problems with Separate Copy and Design Workflows - Copywriters may work in Google Docs while designers work in Sketch or another separate tool. - Teams repeatedly exchange drafts after discovering that text does not fit the design. - Design critiques, copy reviews, and stakeholder feedback can force additional redesigns. - Remote collaboration makes the process even more cumbersome; the author describes printing designs, writing edits by hand, scanning them, and sending them back. - Siloed tools make the project difficult to track, even for project managers. ## Developing Copy and Design Together in Figma - The author outlined the main copy points for each page in a Google Doc. - Designers created Figma frames representing the website pages. - Marketing and design worked simultaneously, progressing from high-fidelity wireframes to final designs. - Copy could be edited directly while viewing it in its intended visual context. - Designers spent less time handling communication and more time focusing on the design itself. ## A Shared Source of Truth - Stakeholders could access the latest copy and designs through a single project URL. - Team members could leave comments and review version history without exporting or emailing files. - The same designs could be used for user testing, allowing everyone to connect feedback with the current work. - Fewer meetings were needed, and the remaining meetings became more efficient. - Last-minute updates no longer required a separate scramble before milestone reviews. The practical recommendation is to replace sequential, tool-separated workflows with real-time collaboration between writers, designers, and stakeholders. Treating copy and design as interconnected parts of one process can make website projects faster, clearer, and less frustrating.

Read original

Wireframing Figma User Experience Web Design+4

figmaJan 9, 20183 min readCurated summary

How Figma Transformed This Berkeley Design Class | Figma Blog

UC Berkeley’s CS 160 course used Figma to make digital product design more accessible to computer science students. The cloud-based tool solved problems involving incompatible devices, steep software learning curves, and limited collaboration. As a result, students spent more time applying usability principles and less time learning complicated design software. ## Challenges in Teaching Digital Design - CS 160 teaches human-computer interaction through 3–4-person teams building Android apps around themes such as healthcare and elections. - The course struggled with: - Students using Linux, Windows, Macs, or no personal computer. - Limited computer-lab solutions for incompatible software. - Adobe tools requiring substantial training. - Students with prior design experience often handled wireframing and prototyping, while others focused on coding or user testing. - Enrollment demand was high enough that the course’s original 100-student limit had to be doubled. ## Figma Made Design More Accessible - Figma was free for students and worked across different operating systems. - Its simple interface allowed students without design backgrounds to learn the basics quickly—one student reported becoming productive in about an hour. - Built-in features supported teaching: - In-context comments for instructor feedback. - Version history for reviewing progress. - Simultaneous editing by multiple students. - Integrated prototyping for presentations. - Students could focus on concepts such as Nielsen’s usability heuristics instead of spending most of their time learning Photoshop. ## More Effective Project-Based Learning - Students applied classroom lessons directly to their projects, reinforcing the concepts through practice. - One healthcare-themed team designed an app helping people with alcoholism locate nearby Alcoholics Anonymous meetings. - Figma’s quick prototyping was especially useful because teams had only about an hour of face-to-face collaboration each week. - Teachers and TAs could comment directly on relevant parts of a design rather than sending unclear, broad feedback by email. ## Collaboration Across Disciplines - Real-time editing enabled students to brainstorm, observe one another’s work, and contribute regardless of their design background. - Teams could work outside class without worrying about conflicting file versions or accidentally overwriting one another’s work. - The course used Figma to bring coding and design together, giving computer science students a more collaborative introduction to product design. Figma’s main contribution was reducing technical and logistical barriers so students could concentrate on design thinking, usability, and teamwork. For similar project-based courses, accessible cross-platform tools with real-time collaboration and contextual feedback can make design education more inclusive and effective.

Read original

Wireframing Figma User Experience Prototyping+4

figmaNov 1, 20172 min readCurated summary

Introducing: Figma Pages | Figma Blog

Figma Pages adds an organizational layer within a single design file, letting designers separate brainstorming, wireframes, iterations, and final assets without creating separate documents. The feature supports multiple workflows, including platform-specific designs, shared component libraries, and multiple prototypes. Figma emphasizes that Pages are for organization—not version control—and warns that duplicating large files across Pages may hurt performance. ## Organizing Designs with Pages - Pages can be added, switched, or deleted from the file’s left-hand panel. - The Pages menu collapses after use but can be kept open with a control-click. - Sketch imports preserve the original document’s pages and symbols. - There is no limit to the number of Pages in a file. ## Common Uses - Separate brainstorming, wireframing, and polished designs. - Organize iOS and Android screens on different Pages. - Store shared components, icons, or other interface elements separately. - Choose the first Page to control which design appears as the file thumbnail. - Create separate prototypes within one file. ## Collaboration and Moving Components - Sharing one Page grants access to the entire file containing it. - Components can be moved between Pages by right-clicking and choosing **“Move to Page.”** ## Pages Versus Version Control - Pages should not be used to create copies of designs as a version-control system. - Figma already provides version history for tracking changes. - Repeatedly duplicating large designs across Pages can negatively affect performance. Figma Pages is best used to structure related design work within one accessible file, while Figma’s version history should handle historical snapshots and revisions.

Read original

Wireframing Figma User Experience Prototyping+2