Figma Fundamentals: Responsive Component Activity
UI Design • April 3rd, 2024 • by Dan Olsavsky
By following the step-by-step process outlined in this lesson, you will create a base component, utilize instances for efficiency, and maintain uniformity across your design. In addition, you may practice inclusive design by exploring accessibility considerations. As you continue to apply these fundamentals in your projects, you’re not just creating visually appealing interfaces but also fostering a user-centric approach.
- Objective: Create a row of three cards in Figma, ensuring consistency in height and structure. One card will serve as the base component while the other two will be instances of this component.
- Elements: Each card should comprise an image, a category badge, a title, a description, and a button.
- Process:
- Design the base card by arranging the elements according to the provided example.
- Convert this base card into a component by selecting it and clicking “Create Component” in the toolbar or using the shortcut Ctrl/Cmd + Alt + K.
- Duplicate the component twice to create two instances beside the original.
- Customize the content of the instances as needed, ensuring consistency in design elements and spacing.
- Ensure all three cards maintain the same height to retain a uniform appearance.
- Experiment with responsive design by adjusting the layout or content to observe how the cards adapt to changes in screen size.
- Bonus: Use the Accessibility plugin to ensure your component passes accessibility standards.
- Discussion: Once satisfied with the design, please schedule a 1 hour call to review.
Parting Words
As we conclude this series on Figma Fundamentals, thank you for being part of the learning journey! Join me again next week for more as we continue to explore a new topic. Want to continue the conversation? Drop your thoughts in the comments below. If you found today’s article helpful, consider sharing it with your network. Until next time, keep practicing, experimenting, and refining your skills. Remember, design is a journey of continuous improvement!
