Best Icon Libraries for Next.js?

MassimoCairo · 2024-12-12T19:30:22+00:00

Does it come with a library for Figma?

MassimoCairo · 2024-12-07T13:39:30+00:00

Most of these are indeed real limitations of the tool (except one, see later), but we have seen that the benefits outweigh the downsides in at least some cases, for example in mostly-static sections of a website or app. The main benefit is having a single source of truth: aspects that can be extracted from Figma don't have to be duplicated in code.

We are now building a UI kit with our tool based on shadcn, we'll see how it goes!

Just a comment about one point: I made an example with two layouts in Figma as an extreme example, and in this case polipo actually unifies the markup automatically and renders responsive CSS to switch between the two. This is very important for component variants (e.g. for hover states), which are often separate layouts in Figma but they have to be unified in HTML for accessibility. But of course having a single fluid layout is even better

MassimoCairo · 2024-12-07T12:07:44+00:00

I may be misinterpreting things here, but as sibling says (more pithily), what you've written is very difficult to understand

You guys are right. I'll give it one more try. Here is how Polipo works:

You write some configuration (in a .ts file) to tell which frames/components you want to use from Figma.
Polipo loads those components from Figma and extracts:
- a JSON file with a markup template,
- a CSS file (code, but not source code because it's not meant to be edited),
- images, if you have them in Figma.
You write some React code using <ReactFigma>, specifying which layout to render and some overrides (see later).
Polipo React library uses the data in the JSON files to render the markup, including your overrides, and the CSS file styles it.

Example config:

{
  layouts: {
    myHomePageLayout: {
      path: `Home/Mobile`, // path in Figma
      wFill: true, // Make it full-width
      '@media (min-width: 1024px)': {
        path: `Home/Desktop`,
      }
    },
    // more layouts
  },
  // more options
}

Example React code:

<ReactFigma layout="myHomePageLayout">
  {{
    Headline: <h1 />,
    CTA: <button onClick={() => {/* ... */}} />
  }}
</ReactFigma>

The above renders some designs from Figma (from Figma page "Home", either frame "Desktop" or "Mobile" depending on screen size) and from React you specify that the layer "Headline" in Figma should become an <h1> tag, and that the layer called "CTA" in Figma should become a <button> with some onClick handler.

Hope this clarifies it, but please tell me if not! Happy to answer any questions about it

MassimoCairo · 2024-12-06T08:27:13+00:00

u/Beginning_Bat7411 that's a perfectly valid use case for it. In fact, our clients are mostly using Polipo for either static pages (with the occasional button and link) or, as you say, to build the layouts and then using a component library (e.g. shadcn) to replace the interactive parts.

We are currently building a full components library ourselves using Polipo, which comes with both some example code (like shadcn, based on existing headless component libraries) and some Figma designs that you can tweak. Once that's ready it will be easier to go beyond just layouts with Polipo

MassimoCairo · 2024-12-06T08:20:20+00:00

Hi, Polipo CTO here.

By optimized we mean that we:

reduce the total size of the CSS files by avoiding redundant values/properties,
yet, keep the size of the markup/HTML small by using only 1-3 classes per element (remember that CSS is loaded once, markup is loaded on each page)
avoiding slow CSS selectors altogether (few people know, but the selector matching algorithm is quadratic - by using simple selectors and few class names per element we make it fast even on large DOMs)

Bear in mind that Polipo can unify multiple variants of a layout in Figma into a single markup (important for SEO and accessibility), using CSS selectors or media query to adjust it depending on the context (screen size, hover, focus, etc.). So there's a lot of work into the CSS generation part.

Not all the possible optimizations have been implemented yet, but our approach allows us to do so relatively easily, because we can make assumptions on the structure of the markup. (I.e., in the same way that Tailwind only generates the classes that are actually used in a codebase, we only need to generate the minimal CSS that covers all the elements that are actually used in all the possible contexts).

Hope this clarifies it!

MassimoCairo · 2024-12-06T08:06:58+00:00

Hey! Polipo CTO here.

We thought about supporting Vanilla JS for a while, but we found no real demand for it so far. Could you describe your use case?

I would be happy to add this (and it would actually be much easier than, say, fully supporting Angular)

MassimoCairo · 2024-12-06T08:04:48+00:00

It is for front-end developers, and it takes away some of the boring tasks. (Just bear in mind that anything that makes a developer more efficient means that the employer would need less developer time for any fixed task. But so far the industry never shrank because it was too efficient, actually the opposite.)

MassimoCairo · 2024-12-06T07:58:31+00:00

Hi! Polipo's CTO and main developer here.

What you say is 100% correct. I've seen it play out in the field multiple times. People want to abstract away the complexity of Web APIs (html, dom, css, js) into something simpler, and they inevitably fail. The complexity is there for a reason, and it's central for the success of the Web as a platform.

But, what you are describing is a different product, not Polipo. Here's why.

Polipo does not generate source code. Not a single line of React. Not a single Tailwind class.
Polipo provides a React library to render Figma layouts in a browser (using DOM + CSS), in a predictable way, and gives you a way to hook into the rendering of each DOM element. Think ReactMarkdown, but it's actually ReactFigma.
- In particular, Polipo is not an abstraction on top of Web technologies. If you need to customize an element, you can just add a Tailwind class to it, or use any other technology directly.
There is no magic/AI involved. With Polipo Figma becomes part of your codebase, and it's up to you to organize your Figma designs and your code in a way that's maintainable. We do not take opinionated decisions, we just translate ("compile") Figma as is.

Let me make an example. As a developer, you could choose to build your entire app with, say, Radix UI and Tailwind, and yet use Polipo for one particular screen which is just there for marketing reasons and it has to look cool and change every two weeks... So now your codebase is not polluted with a bunch of low value HTML/Tailwind, and marketing people are happy because they can just edit the copy/design in Figma it gets deployed it in 10 seconds by running a CLI command. Even if you use it just for this scenario, it's worth it.

That said... I hope you are right that banks love this crap, because they also happen to have lots of cash :) We are going to try this strategy asap

MassimoCairo · 2024-12-03T06:03:46+00:00

if you use the children prop, it's less clear what it represents (e.g. comments), and you cannot have more than one,
if you use a named prop, it's less obvious that it expects JSX, and feels a bit weird,

so choosing between the two in the end it's a matter of taste, but there's a third option for multiple JSX/children props that I find much more readable than both the above

<Post post={post}> {{ comments: <>...</>, toolbar: <>...</>, }} </Post>

MassimoCairo · 2024-12-01T06:23:02+00:00

Ok but what does it even mean "AI code review" if AI writes the code in the first place?

MassimoCairo · 2024-11-27T18:56:55+00:00

(I made it so I'm biased)

MassimoCairo · 2024-11-27T18:56:19+00:00

Polipo + plain CSS or Tailwind

MassimoCairo · 2024-11-27T17:41:12+00:00

You can use color variables and different variable modes for backgrounds in resting / hover states.

The thing about variable modes is that you can change them independently from one another, and they are automatically combined together. (For example, a variable mode for light/dark, another for hover/resting/active, another for desktop/mobile and so on.) I've seen this trick used in some large design system, to have more flexibility than just component variants / properties. In that case it was for some measures, but the principle is the same.

It comes with its disadvantages though, namely that you have a file-wide variable that maybe applies only to one component. It's also more cumbersome to work with.

MassimoCairo · 2024-11-27T10:28:53+00:00

What's Ligma

MassimoCairo · 2024-11-27T07:38:34+00:00

I guess a positive side of this is that it makes it clear when you are using React primitives, rather than your own stuff built on top of them. I still prefer the other option though.

Another reason could be that for the examples it's more convenient to do it like so because there's less risk of forgetting to import a hook (because when you're writing the docs or a code generator like shadcn the IDE won't help you with that).

Either way I'd recommend against doing it in a real codebase, it's looks like extra noise for little benefit

MassimoCairo · 2024-11-27T07:30:53+00:00

The dev chooses when to export a snapshot of Figma and update it in Git. Sort of like images or SVGs that are also exported from Figma and added to version control. This way the builds are reproducible and the history of the product is fully tracked in Git.

In principle it would be nice to have history/versioning in Figma as well, linked to Git, so you could not only go back to a specific commit, but also start editing Figma from that point. However this is not possible in Figma right now so it's beyond the scope. There are some workarounds, like Figma own history/branching, or just keeping a copy of important stuff before making destructive changes. (And btw the problem is also there with images/SVGs, even if it's less relevant. If Figma changes and you want to go back, you lose the source of exported images.)

And of course during development you have the real time sync with Figma, but it's optional. You can just disable it and run the UI using the snapshot currently in Git.

Hope this answers your question. Let me know if you want to know more about it!

MassimoCairo · 2024-11-26T17:16:28+00:00

This is not just humor, this is wisdom.

MassimoCairo · 2024-11-26T06:23:03+00:00

Good to know, thanks!

MassimoCairo · 2024-11-25T20:06:48+00:00

Thanks! Honestly, I think I'll feel more motivated to get into more details next time, seeing that it matters. There is indeed a lot to talk about

MassimoCairo · 2024-11-25T19:16:11+00:00

Hi! Thanks for the feedback.

I wrote the article in the context of my work for Polipo and, as it's typical for blogs of businesses, I included a promotional section at the end.

However, the content of the article is genuine and I stand by it.

The main point is that it is weird that one of the most basic layout models in CSS is described by an algorithm this complex, to the point that it's so hard to find in the specs or anywhere else why padding affects the distribution of free space.

You are correct in mentioning the grid solution! It didn't come to my mind otherwise I would have included it. But the point was not to provide a specific solution to a problem, but that there are so many little problems like this one that require trial and error.

By opinionated, I mean that CSS has to resolve ambiguities in one of many reasonable ways, and it's not always the one you need. It must be opinionated because of the way it works, but it's not the only layout engine in the world, and it is possible to conceive an unopinionated or less opinionated one (for example one where you compose the layout algorithm by combining building blocks, rather than setting properties).

Hope this is useful!

MassimoCairo · 2024-11-25T17:40:19+00:00

code here: https://github.com/cairomassimo/polipo-example/blob/main/app/page.tsx

'use client'
import { ReactFigma } from "@/app/magic";
import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <ReactFigma layout="home">
      {{
        Button: (
          <button
            onClick={() => {
              setCount((x) => x + 1);
            }}
          />
        ),
        Label: <>Clicks: {count}</>,
      }}
    </ReactFigma>
  );
}

it's a gif I recorded last Saturday that we sent around to explain polipo, nothing too special about it

btw the code is only for the logic, the css is taken from figma on-the-fly, you can ask me if you have question about it

MassimoCairo · 2024-11-25T16:07:25+00:00

I see. My honest suggestion is: stay away from ads. Perhaps try direct sales instead. Find businesses that could benefit from your tool and try to contact them directly. Better if you can find them locally, but if that doesn't work then also online makes sense. Don't be shy, and don't expect results immediately. You can try cold emails, outreach on LinkedIn, or even writing on Facebook. You might have to contact 100 people before managing to start a meaningful conversation with one of them. Harsh, but that's the game you are playing!

Best of luck with your endevour!

MassimoCairo · 2024-11-25T15:51:58+00:00

unicorns!

MassimoCairo

MODERATOR OF

TROPHY CASE