Civic by Design: Figma Workshop

Summary

Purpose and context

The session introduced Civic by Design, a collaboration involving AIGA, Designpreneurs Hackathon, New York City’s Office of Technology and Innovation, and Parsons The New School. The event combined information about the initiative’s Figma online challenge with a practical workshop on developing a hackathon project, followed by recruiting and career advice from a Figma recruiter.

Figma workshop: Designing a strong hackathon project

Figma educator Steph emphasized that a successful submission does not need to be a complete product. Under a tight deadline, focus on the project’s distinctive core idea and the screens or interactions that best communicate its value. Secondary features, such as onboarding or settings, can often wait.

Her main principles were:

• Start with the problem and audience. Be clear about what you are making, whom it serves, and why it matters. AI can speed up parts of the process, but it does not replace these design decisions.
• Use the approach that works for you. Develop ideas in writing, with sketches, or through visual brainstorming, then bring them into Figma.
• Explore alternatives. Make several versions and compare them side by side—an approach Steph described as A/B testing or, more broadly, iterating through multiple options.
• Spend saved time on craft and storytelling. Quick prototyping is valuable because it leaves more time to refine the project’s visual identity, interactions, and story.
• Plan for the demo. Identify the key screens that will show the project’s value quickly, especially if the presentation is only a few minutes long.
• Get feedback. Share a working prototype with potential users or community members, then adjust it based on what you learn.

Suggested hackathon preparation

Steph recommended the following practical steps:

• Read the brief, judging criteria, and submission instructions carefully.
• Confirm the submission link, required format, and deadline well in advance.
• Prepare a short, roughly 15-second explanation of the project.
• Look at past winning projects for inspiration, but do not copy them.
• Share the work publicly, whether or not it wins.
• Track deadlines with a dashboard or another reminder system so a last-minute submission does not fail.

Figma workflow demonstrated

Steph used a sample idea—an app that encourages neighbors to explore their community through local “quests”—to illustrate a quick design process.

1. Brainstorm in FigJam. Map possible local destinations and activities, such as parks, museums, libraries, murals, or community cleanups.
2. Choose a core concept. The example evolved into a neighborhood adventure or loyalty card, with quests that users could complete.
3. Prototype in Figma Make. Describe what the app does, whom it helps, how it should be structured, and what visual style or interactions you want. A sketch or existing design elements can also serve as input.
4. Iterate with specific requests. State what should change, what the result should look like, and which interactions or design details matter. The example added image-based stamps, a navigation bar, and adjustments for the iPhone Dynamic Island.
5. Preview and publish. Test the prototype in a device-sized view and, where useful, publish it so it can be opened and tested on a phone.
6. Refine the experience. Rather than relying on simple checkmarks, the sample concept explored photo stamps tied to locations. This gave the product a more distinctive feel and could help confirm that a quest was completed.
7. Prepare the handoff and presentation. Figma tools can help organize design specifications for developers and turn designs into a presentation or interactive demo.

Steph also reviewed several interface basics:

• Command/Ctrl + Z: Undo
• Command/Ctrl + Shift + Z: Redo
• C: Add a comment for discussion and collaboration
• Command/Ctrl + K: Open quick actions and search for Figma commands
• The left side of the interface is for navigation, the canvas controls are along the bottom, and the right panel shows properties of the selected object.

She mentioned free APIs and resources for prototypes, including OpenStreetMap for maps and Unsplash for placeholder images. She also advised keeping an eye on AI-credit usage and renaming files early to keep work organized.

Figma challenge

The organizers described an online challenge focused on a New York City civic issue: noise complaints in 311 data. Participants could develop either a brand-oriented or product-oriented response, such as a UX/UI prototype, motion design, logo, or animated brand, and submit it through Figma Slides or a presentation.

The session stated that the application deadline was Friday, October 30, and that submitting earlier could qualify participants for a drawing for career or portfolio-review opportunities. A Friday live Q&A was also announced. The organizers clarified that the Figma online challenge was the single application route for the wider Civic by Design initiative, including interest in the Parsons hackathon.

Recruiting and career advice from Shell

Shell, an early-career recruiter at Figma, shared guidance on applications and interviews:

• Apply early. Popular roles can attract many applicants, and applying soon after a posting appears may help. Job alerts on LinkedIn can make it easier to spot openings.
• Check application details carefully. Verify contact information rather than relying on autofill. Shell said incorrect email addresses had prevented some candidates from being contacted.
• Submit a portfolio for design roles. A portfolio is an important part of the application, and failing to provide one may result in rejection.
• Maintain a useful LinkedIn profile. Include work history, titles, skills, and relevant keywords so recruiters can find you.
• Show more than conventional employment experience. Hackathons, independent projects, volunteer work, and student organizations can demonstrate relevant skills and initiative.
• Prepare to discuss your decisions. Portfolio reviews and presentations may explore trade-offs, feedback received, collaboration, and changes in direction.
• Understand the early-career threshold. Figma’s described threshold was generally fewer than two years of full-time work experience after a degree or training program; internships were not counted toward that limit.
• For career changers, take gradual steps. Consider related roles, volunteering, or hackathons rather than expecting to move directly into a dream position.
• Prepare for interviews. Research the company and be ready to explain specifically why you are interested. Shell said curiosity, openness to feedback, and collaboration matter alongside experience.
• Start learning Figma with beginner resources. Try beginner tutorials and simpler tools such as Slides or FigJam if the full design interface feels intimidating.

Shell explained that applications are generally reviewed by people, although large applicant volumes can make the process slow. She also described portfolio reviews, project presentations, behavioral interviews, and a generative design exercise as parts of Figma’s hiring process.

Speakers and sources featured

Speakers

• Julia Donatello — AIGA design competitions and events manager; introduced the initiative and its logistics.
• Sally — Founder of Designpreneurs Hackathon; explained the partnership and online challenge.
• Steph / Stephanie — Figma for Education product design educator; led the Figma and hackathon-design workshop.
• Shell — Figma early-career recruiter; discussed hiring and career preparation.
• Isaac — Briefly acknowledged in connection with resolving the screen-sharing issue.

Organizations, products, and resources mentioned

• AIGA
• Designpreneurs Hackathon
• New York City Office of Technology and Innovation (NYC OTI)
• Parsons The New School
• Figma, including FigJam, Figma Slides, Figma Make, and Figma’s agent tools
• Sponsors: Magnific, Pentagram, Centurion, Tre Revs, Imagine Art, Framer, and Lovable
• OpenStreetMap and Unsplash, mentioned as prototype resources
• Figma education access and tutorial resources, including the Figma YouTube channel and Figma EDU materials