HTML to React. The Startup Designer. Departure Mono.
Sponsor
Webflow Conf 2024
Join us this October for the conference that brings together the makers, creators, and visual developers behind the world’s greatest websites.
Release Notes
Change the color of connectors and text
So much polish has been added to FigJam in the last few weeks! Now, you can change the color of connectors and their text independently.
Publish a library to a workspace
Users in Enterprise organizations with workspaces set up can now publish libraries to a workspace in addition to a team or the whole org.
What’s New
Departure Mono
My friend Helena Zhang designed a new monospaced pixel font and licensed it under the SIL Open Font License. It’s beautiful and nostalgic, bringing back so many memories from the early days of the web. The website is a lovely mix of retro vibes and a modern feel.
The Startup Designer
What a fantastic post from Paul Stamatiou! His observations resonated with me after working on multiple products from the early days. “There’s nothing glamorous about being a designer at a startup. It’s a role that frequently values speed and pragmatism over going deep in the craft. It’s not all big launches, viral tweets, building for happy paths, and clear-cut product requirements. However, it can be incredibly rewarding. The fun comes from being able to excel at learning new skills and wearing many different hats while being solely responsible for large efforts.”
Figgy
“Figgy instantly turns your FigJam into a website. You get a published site, with a clean domain and custom SEO. All you have to do is drop in your Figma link and it’s live. No coding or technical experience is required.” Read how this project came to life in this Twitter thread.
Layers Portugal
Layers, a community conference by Friends of Figma, Portugal, published an extended list of speakers. Register for a free virtual or in-person event on September 20th to catch talks by designers from Shopify, Miro, ADPList, Volvo, and more.
Using Figma
Light and dark modes
Loren Baxter shares at Sneak Peek how to use Figma variables to design a dynamically colored UI for light and dark modes.
Text style for labels
Brilliant tip from Molly Hellmuth — create a special text style for labels where line height aligns to your grid. No matter what variable is used for padding, the height of your UI elements will be a multiple of the base grid. (This is also a nice way to keep your labels aligned with icons.)
How I set up Figma for mobile design
Adrian prepared a short tutorial on how to set up Figma for mobile design using the right frame sizes, grids, Auto Layout, constraints, and system components.
Progressive blur
Brett from Designjoy shows how to achieve a cool visual effect with a Progressive Blur plugin.
How to get in and out of your Figma files 10x faster
In a short video, Ridd shows how to set up and use the Raycast Figma File Search extension to navigate your Figma files quickly.
Bringing Figma to developers in VS Code
Figma Developer Advocate Jake Albaugh joins a livestream on the Visual Studio Code channel to talk about Figma for VS Code extension, allowing developers to easily access and inspect designs from VS Code.
Figma Slides
Office Hours: Getting started with Figma Slides
“Come learn the basics of how to use Figma Slides to communicate with your team and present to stakeholders. You’ll learn how to create, edit, and polish a Slide deck and how to present to your stakeholders.”
In the file: Become a better presenter with compelling visuals
“You can get the attention of your audience and better communicate your ideas by turning them into simple, compelling stories. Join this livestream with Janis Ozolins to learn the principles of visual communication and see how to create compelling visuals in Figma Slides in a few easy steps.“
Plugins
HTML to React & Figma
A Chrome extension that converts any page or a section of a page into React code or an editable Figma design.
Stippling
New plugin for Vijay Verma for creating a beautiful stippling effect.
Displace
Mike Bespalov is cooking something dope. The glass effect is very cool, but I love the displacement effect applied to the text even more. The plugin is not out yet, but it’s coming soon — can’t wait to try it out!