Figma Review
An overview of my Figma design process and how I leverage key Figma features to optimize both design and development workflows while following best practices.
Role
Project Design Lead
Team
1 Developer
Duration
1 month
Viewports
I incorporated Bootstrap's core grids into Figma, often times creating designs for five distinct viewports based on different Bootstrap grid sizes. This approach ensures that responsive behaviors function as intended across various screen sizes.
Auto Layout
To streamline the design process, I utilized Auto Layout while grouping layers in Figma. This enables me to efficiently reuse existing groups and components across different pages and viewports. Less time is spent nudging around layers when the layout automatically adjusts for me.
Reusable Components
During the design of this site, I created components for frequently reused elements, such as navigation menus for various screen sizes, footers, buttons, and card layouts. This approach allows me to make changes across all frames while also reducing file size and improving application loading speed.
Defined Styles
Defining official colors, shadows, opacity settings, and font sizes in Figma is essential for me to stay organized and quickly select the right style for this (and any) design scenario. This approach also facilitates rapid changes across multiple frames and simplifies the development handoff process.
Dev Mode
A frequent issue in the design-to-development handoff is inconsistency in front-end implementation. To minimize these flaws, I prioritize displaying critical measurements, annotating key attributes, and adding comments for elements that require additional explanation.
Other Resources
While Figma was the main tool used in designing this portfolio website, I also relied on other applications to complete the project. Photoshop was used for graphic design, Illustrator for logo creation, Pexels for parallax photography, and Mockups for device showcasing.
Additionally, I utilized resources outside the design process, such as Upwork, Slack, and ChatGPT.
