Learn Figma, Nativescript and Twit

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

In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker. 

Twitter API Client for node

Supports both the REST and Streaming API.

twit

Create your own twitter bots

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. 

In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community. 

We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal. 

Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps 

In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of NativeScript layouts using XML. This course will use the app templates provided from the NativeScript framework and installed using [the NativeScript CLI](https://egghead.io/lessons/angular-1-x-set-up-a-native-app-project-with-the-nativescript-cli).

We will cover the following layouts: `StackLayout`, `WrapLayout`, `GridLayout`, `DockLayout`, `AbsoluteLayout` and `FlexboxLayout`. Understanding the concepts and usage of UI layouts in NativeScript is key for a great app.

Build Basic NativeScript App Templates

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

This Angular course assumes a solid understanding of the fundamentals.
We have Intermediary Angular courses including topics on [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained), [Components, Directives](https://egghead.io/courses/building-angular-components), [Forms](https://egghead.io/courses/intro-to-angular-forms), [Router](https://egghead.io/courses/intro-to-angular-router), and [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Create Native Mobile Apps with NativeScript for Angular

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

Learn how to use the `nsRouterLinkActive` directive with options to control styling when a route is active in [NativeScript](/q/nativescript).

Add styles to active routes using nsRouterLinkActive

We will learn how to install an Objective C library distributed via a [CocoaPod](https://cocoapods.org) into our project and expose its native api to our app. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it. Take for example [Filestack](https://filestack.com), a really powerful file uploading api that provides an SDK written in [JavaScript](/q/javascript) for the web, but also offers native SDK's for iOS and Android. Let's take a look at how to code right against this [native iOS SDK](https://filestack.com/docs/sdks/ios).

Use an Objective C library in NativeScript for Angular iOS app

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

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 

The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common `btn` classes for Buttons, `h1`, `h2`, etc. Label classes and convenient `p-10` or `m-10` (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme

Style NativeScript views using the default core theme

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

Translate common Java/Android APIs into NativeScript for Angular Android apps

Objective C is a very interesting programming language which offers a lot of power as well as interesting paradigms. Let’s look at some Objective C api’s and how they translate to NativeScript. In particular, let’s learn how to wire up iOS delegates using [Filestack's FSPickerDelegate](https://github.com/filestack/FSPicker#fspickerdelegate) as an example. We will also look at handling WeakRef’s and iterating an NSArray.

Topics

Instructors

Content Type