Design, prototype, and gather feedback all in one place with Figma.

figma

Learn Figma

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions. 

We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state. 

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

The Beginner's Guide to Figma

In this video, you will learn how to create frames (i.e. layouts) in Figma using the "frame" tool. This will allow you to get up and running quickly using pre-defined sizes.

Create a Mobile, Tablet and Desktop Frame in Figma

In this lesson, you will learn how to build a component in Figma, which is the equivalent to a "symbol" in Sketch. It's essentially a reusable piece of design. This will allow you to work more efficiently when designing your app.

Build Reusable Designs with Figma Components

In this lesson, you will learn how to use Figma's ellipse and pen tool to draw a simple clock icon. This will show you how to create vector-based graphics for your websites and apps.

Create a Simple Icon with Figma Ellipse and Pen Tool

In this lesson, you will learn how to add a reusable Figma component to multiple frames in your project. 

Add a Reusable Figma Component to Multiple Frames

In this lesson, you will learn how to duplicate grouped vectors to create a patterned logo in Figma. 

Duplicate Grouped Vectors to Create a Patterned Logo in Figma

In this video, you will learn how to establish your typography system for your project using Text Styles in Figma.

Establish a Typography System in Figma with Text Styles

In this video, you will learn how to create Color Styles, or a color palette so that you can reuse colors across various frames in your project in Figma.  

Create Figma Color Styles to Reuse Across Frames 

In this video, you will learn how to reuse Effects such as a drop shadow using Effect Styles in Figma. 

Reuse a Drop Shadow in Figma with Effect Styles

In this lesson, you will learn how to use Figma's prototyping feature to simulate a screen transition. This is a great feature to demo how users will interact with your app.

Prototype a Screen Transition in Figma

In this lesson, you will learn how to export frames in Figma to share with others. You will also learn how to share links so others can see your design happening in real-time.

Export and Share Figma Frames

Figma is a web-based collaborative interface design tool that we can use to prototype the look and feel of our OpenGraph cards. We dive into a few of the basic features using [Ryan Warner's](https://twitter.com/ryanwarnercodes) community [social branding templates](https://twitter.com/ryanwarnercodes/status/1239578329340170240), such as text placement, using the eyedropper and color tools, as well as pulling in gradients as images to fit our working area.

* [Social Branding Template](https://www.figma.com/community/file/820337605519256142)
* [Gradient Magic](https://www.gradientmagic.com/)

Designing OpenGraph unfurls in Figma

Figma Auto Layout gives our designs superpowers. By adding auto-layout to our button component, we can change the text within the button while automatically maintaining consistent horizontal and vertical padding, just like we would in code.

Build an Adaptive Button with Figma Auto Layout

Keyboard shortcuts speed up our workflow, and make us aware of some features we didn't know existed. Figma has an awesome in app menu for exploring the keyboard shortcuts available to us.

Figma Keyboard Shortcuts

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

How to create an app icon from scratch, generate the required sizes, and add to your iOS app.

Image editing - [Figma](https://www.figma.com/) is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc, as long as the output is a 1024x1024 .png image.

Asset generator - [Iconizer](https://raphaelhanneken.com/iconizer/) is a free mac app for generating the correct sized assets from your icon.

Topics

Instructors

Content Type

Figma