Figma Mockup Design
Design Systems
A design system is very useful for creating mockups and prototypes quickly and consistently. A design system is a set of rules regarding visual elements such as: color, typography, spacing, border radius, and pseudo states.
A design system also include commonly used components such as buttons, cards, panels. Just like with the style assets, you can take a very structured approach to your components, or you can set up a minimal system. It depends on the scope of the project.
We are going to create a design system in Figma. These will be applied to both our mockups as well as our actual code. This is possible by using Figma plugins to export stylesheets based on our design systems.
Important Plugins
- StyleList: Create text and color styles
- Color Designer]: Another color palette generator
- Color Scheme: Similar to StyleList for color generation
- CSS Export: Export Vanilla CSS
- Figma Tailwind: Export a Tailwind Configuration
- Tailwind Import: Import a tailwind configuration file into Figma
Design System Setup
- Pick colors and generate variations
- Pick typography and generate variations
- Create a couple simple components to generate:
- border-radius
- effect styles
Activity: Create a color scheme for your design system (15min)
- Use one of the above specified, or any other color palette generator
- Create a color palette that includes
- a primary color
- a secondary color
- grayscale shades
- Set between 5 - 10 variations
Activity: Create a Typography Scheme for your design system (15min)
- Extra Reading: Typography
- Choose 2 fonts
- Heading
- Body Text
- Set up all of your font variations
- Label them based on html font names or based on utility class styles
Debrief
- Show off your work
- Ask questions
- Learn from one another
Components
It's good to learn how components work by building your own first. However for fast production of mockups, you can use prebuilt component UI libraries. When you get to the development phase, this speed can be continued by using corresponding css frameworks. o
Activity: Create your own components (15Min)
- Create and save a button component
- Set the border radius
- Set a variation (solid and outline versions)
- Save the component and use it in a different file
- Component needs to be saved and reusable from assets
UI Kits to try
Keep in mind that many of these will have a limited free version and a premium full version
- Official Tailwind CSS for Figma
- Tailwind CSS UI Kit
- Bootstrap 4 UI Kit
- Figma IOS UI Kit
- Material Design UI Kit
Activity: Create a page component(15min)
- Choose one of the following:
- Hero
- 3 Card Layout
- Gallery
- Panel
Debrief Discussion
- Review work as a group
- Discuss UI kit experiences
- Make sure everyone can create components
Content Plugins
Lab time
Sleep in Activity: Create a Design System
-
Due: 11:59PM Today
-
Your design system must include:
- a color scheme
- typography
- shadow
- border radius
- components:
- a button
Submission
- Create a team = Add the Design System file to your team
- Publish as a library
- Share an editable link in your submission to Brightspace
Optional Activity: Create a web page mockup using a UI Kit
- It must have the following sections of content
- Top bar
- Header/Hero
- Section of Content
- Footer
- Create either a desktop layout, or a mobile layout
- You can design a page from scratch, or you can follow a webpage that already exists as inspiration
- Placeholder text and images are ok
- It must use actual Images