Learn Babel, Figma and Reactfire

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.

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

figma

The Beginner's Guide to Figma

Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins.
You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

Using a plugin you can:

* Load Real Data from your server and visualize it 
* Change elements in your design programmatically 
* Convert your design to JSX or HTML, the sky is the limit

Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want





JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Create a Figma Plugin Using Typescript

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

In this video, you will learn how to bootstrap a Basic Figma plugin using the Figma app

Bootstrap a Figma Plugin

In this video, you will learn how to send and receive data from Figma to use it in your plugin

Communicate between the plugin and Figma 

In this video, you will learn how, in your plugin, to change the text value of a selected text node in Figma 

Change the text value of a select node

Now you have your plugin built and ready it's time to publish it.

In this video, you will learn to publish your Figma plugin to the public

Publish a Figma Plugin

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

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

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.

Design and Add a Custom App Icon with Figma to Your React Native iOS App 

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install `babel-cli` and `babel-preset-latest` and wire up a `build` script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

Set up compilation of source code using babel with npm scripts

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

React and Firebase with ReactFire

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

**This lesson is out of date and uses an older version of Babel.**

Writing next generation JavaScript with Babel 5 (out of date)

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

Webpack Loaders, Source Maps, and ES6

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.

Topics

Instructors

Content Type