Design Thursday #64
A weekly recap of everything you need to know about tools, events, guidelines and design in general.
Midjourney V1 Video Model
Midjourney created its first video model as a next step to build towards a real-time image model where you can control it in a 3D space. The first video model is meant to act as an image-to-video model. After you’ve generated an image, you now have an “Animate” option to transform it into a video. You can choose between high and low motion, plus you can extend the video 4 times for 4 seconds. What’s great, you can also animate images not generated by Midjourney. Just drag it in to mark it as a start frame.
Read more about the V1 Video Model
Firefly mobile app
Adobe Firefly is now available as a mobile app to generate visuals and videos even faster. It also includes generative fill and expand, features where you would otherwise need Photoshop. It’s now available on iOS and Android.
Read more about Firefly for mobile
Design Mode in v0
Vercel added Design Mode in v0, which allows you to change copy, typography, layout, color, styling, and more without having to spend any credits or having to wait for AI. All is immediately changed and ready to be previewed. Under the hood, it uses Tailwind and shadcn.
Import SVG & JSON in LottieFiles
You can now copy+paste SVGs or Lottie JSON files in the LottieFiles After Effects plugin to adapt an existing animation or create a new one based on an existing icon or illustration.
Clickmaps in Webflow
Webflow Analyze has a new feature to show how often site visitors click on a specific link. Compared to heatmaps, this is far more useful as it shows the exact number of clicks as an overlay on your website.
Read about Clickmaps in Webflow
New in Framer
As almost any week, Framer has been dropping a bunch of new features:
- Inline editing for CMS items
- New fonts you can use for free
- Localization glossary for names, slogans, and terms that should not be translated or have a specific translation. This will help when translating your content with AI, so it won’t give unexpected translations.
- New built-in icon sets: Phosphor and Iconic
- Stroke width for vectors is now available as a variable
- Vector Sets can now be used in the CMS
- Updated linking UI to support the rel parameter and tracking
Code layers in Figma Sites
You can now create custom code layers in Figma Sites to integrate custom interactions and animations. You can write React, TypeScript, and use Tailwind to create the code, also with the help of the built-in AI chat. You can use it to animate text, build shader effects, include gestures, create custom components, and much more.
How to use gradients and progressive blur in Hana
A short tutorial to show off how to use the recently released features of Hana.
New Talking Layers episode
A brand new episode of Sketch’s Talking Layers goes into depth with Katarina Lotrič and Andrej Mihelič from Gentler Streak.
Unicorn Studio
In a new episode of Deep Dive, Ridd talks with Tom Johnson about Unicorn Studio. Showing off how visual effects using WebGL can be created easily.