Design Comps Made Easy: Effective FIGMA Designs for Seamless Designer-Developer Collaboration

Drupal Camp Asheville 2024 - July 12th-14th

Start Time

Topics

Presenter(s)

Lisa Ridley
of
PlanLeft LLC
Lisa Ridley headshot

Lisa Ridley, Product Manager / Tech Team Manager

PlanLeft LLC

Lisa is a long-time member of the Drupal community, having first gotten involved with Drupal in 2010 as a front-end developer on a Drupal 6 to Drupal 7 migration and upgrade project for a non-profit out of Alexandria Virginia.  Prior to a career in web development, she was a health benefits consultant and project manager for several major employee benefits consulting firms, focused on designing and administering comprehensive employee benefits programs for Fortune 500 companies.

After working as a front-end developer for a few years, she made the transition to back-end development and site architecture, and eventually operating as a tech team lead and technical project manager for a digital agency out of Chicago Illinois, where she honed her development and Drupal chops as well as her DevOps expertise on crafting and maintaining continuous delivery pipelines for the development team.

As a product manager and a member of the leadership team at PlanLeft, she oversees the entire digital web delivery process from conception to site launch, which includes working with the design team at PlanLeft on effective design / developer collaborative processes.  She has worked with both the design and the development teams to facilitate an efficient, scalable design and development process that maximizes client value through efficient use of tools and processes for both the design team as well as the developer team.

Lisa holds several professional certifications, including Certified Scrum Master and Certified Scrum Product Owner certifications from the Scrum Alliance, has completed a Human Centered Design consultative program and most recently completed a FIGMA MasterClass certification.

She lives in Chattanooga TN with her pint-sized companion, Sassy Britches, and in her spare time loves SEC college football, college basketball and is a long-time NASCAR race fan.

Submission ID
24

Join us for a half-day training session on "Design Comps Made Easy:  Effective FIGMA Designs for Seamless Designer-Developer Collaboration" at DrupalCamp Asheville. 

This training will show you how to build design compositions using FIGMA, a powerful design tool for creating wireframes, UI designs, and prototypes. We will dive into the FIGMA structural design process and provide hands-on experience in building design compositions structured for maximum usability by your developer team.

This training is ideal for designers, developers, and anyone who wants to streamline their design process and enhance collaboration between designers and developers. With this training, you will learn how to create efficient design comps with FIGMA that ensure smooth collaboration between designers and developers, ultimately leading to faster development times and better-quality products.

Attendees will leave with a good understanding of using FIGMA to create design compositions and effectively collaborate with developers, setting them up for success in delivering web applications as you designed and intended. Don't miss this opportunity to learn valuable skills and enhance your workflow at DrupalCamp Asheville!

Who is your ideal audience member, the person who would get the most out of your training?

  • Designers looking to improve the usability of their FIGMA design comps to both clients and developer teams in a collaborative fashion
  • Designers looking to create reusable components and component libraries
  • Front End Developers, collaborating with designers / design teams, who are responsible for implementing FIGMA design comps as web applications
  • Developers looking to create and leverage FIGMA reusable design component libraries in their work
  • Technical team members looking to improve their design and prototyping skills using FIGMA

What do you expect people to be able to take away from your training?

  • How to create and leverage reusable color tokens
  • How to create and leverage reusable typography tokens
  • How to leverage design tokens and assets to build meaningful style guides
  • How to create and leverage developer friendly, responsive components with variants
  • How to structure components for responsiveness
  • How to build a reusable design system in FIGMA
  • How to leverage the prototype feature to demonstrate UX in your design comps
  • Links to useful resources to further your knowledge base about FIGMA
  • Links to proprietary and open source FIGMA design component libraries

How much and what kind of technical knowledge do people need going in to your training?

General knowledge:

  • General familiarity with FIGMA
  • Basic understanding of web design
  • General understanding of front end development

Prerequisites:

  • Sign up for a FIGMA account (free community account is fine)
  • Download the FIGMA Desktop application (download link available after signing up for an account, local Desktop application is useful for “offline” work)
  • Download and install the Class materials in your Desktop FIGMA application