Week 27 - Figma to Notion, import web colors and more

This week's five new Figma plugins.

New week, new plugins! From a color extractor that brings a website’s colors directly into Figma, to a plugin for connecting Figma and Notion, there’s an interesting selection in this issue… There’s also a new special effect you can apply to images, and a tool for organizing and tracking your design projects.

You’ll just have to keep reading for the full details 😏

‎

1. Color Extractly

Extract all color styles from a website.

We’re suckers for code-to-design tools, so Color Extractly is our kind of plugin! 🤩 Copy the HTML code of any website (from Inspect mode, for example) and paste it into the home screen. The plugin instantly extracts all colors used on the site, including their hex codes and even details about how that color is applied. You can then choose to save the colors as variables or local styles in Figma.

• 🎁 FREE

• 🎨 Quickly extract all color styles from a website

• 🚀 Bring colors directly into Figma as variables

💡 Another quick way to get a website’s colors into Figma is by importing a webpage using html.to.design. In the options menu, select “Create local styles” to automatically turn all colors and typography into local Figma styles.

‎‎

2. FigNotion

Import FigJam sticky notes into a Notion database.

FigNotion is great for linking your Figma brainstorming sessions to the more structured and task-driven Notion. This plugin syncs your FigJam sticky notes with a database in Notion, so you can sort, filter and group ideas quickly, without having to copy-paste or switch back-and-forth between tools.

It’s helpful for taking your team’s action points from a meeting into a Notion task database, adding user research insights into a research repository, or collaborating and planning your roadmaps visually in FigJam to then sync them back into a structured Notion database.

• 🎁 FREE

• 🏷️ Connect FigJam to Notion

• ⏰ Speed-up your planning and research processes

‎

3. Fractal Glass Effect

Add a fractal glass effect to your images.

Every day there are more image editing plugins in Figma that help achieve effects once only possible with tools like Photoshop. Fractal Glass Effect is one of the latest and adds an instant glass-like effect to your images in Figma. You can adjust the strength of the effect without a lengthy process or additional editing tools.

• 🎁 FREE

• 🥃 Add a fractal glass effect to images

• 🤩 Cool and fun

‎

4. Frame Status

Track progress with statuses on your page.

Frame Status helps to keep track of how a project is going with one glance of your Figma canvas. The plugin comes with 6 default statuses you can add to your frames in a click, to show what stage a design is in (draft, in progress, approved…). You can also create custom statuses to organize your design tracking however it suits you best.

• 🎁 FREE

• ✅ Add default or custom statuses to your frames

• 📏 Track progress at a glance

‎‎ ‎

5. Icon Park

Over 2000 free and editable icons.

You can never have enough icon sets, and when they come in the form of a plugin, even better. Icon Park is one of the latest icon library plugins with over 2000 icons to choose from. Search among 40 categories, drag-and-drop icons directly into your canvas or import them as components. All icons are free and fully-editable.

• 🎁 FREE

• 💟 Over 2000 editable icons to choose from

• ⚡️ Drag-and-drop, import as components and more

‎

---

Newsletter brought to you by ‹div›RIOTS.

---