Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. It is a cloud-based design tool that is used to create and test apps and websites. Figma is a collaborative design tool for building meaningful products, allowing users to seamlessly design, prototype, develop, and collect feedback in a single platform.
Figma allows users to create designs in three different modes: design mode, prototype mode and developer mode.
Design mode enables users to draw shapes, frames and components, apply styles and modify layers to organize your canvas.
Prototype mode creates interactive flows between frames and screens so that users can test UX, link frames to simulate navigation and set interactions like “On Click” or “While Hovering”.
Developer mode or dev mode allows users to inspect elements for code snippets, download assets marked for export, see variables and tokens, and view dimensions easily. These tools combined allow users to leverage Figma to create interactive designs for uses like web development.
Developing Web Layouts
This video is from another course, but has some great advice on how the CCK structures their research website pages. Pro tip: if you have a strong vision in mind, the prototyping process will make more sense as you work towards your design vision! Please note that the “invision” templates described at the end of this video no longer exist. Other templates are available through Figma.