Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Figr Identity – Generate Design Systems in Figma Instantly (figma.com)
79 points by Mokshgarg003 32 days ago | hide | past | favorite | 6 comments
Hi everyone,

I’d love to introduce Figr Identity, which helps you generate design systems with variables, styles, Styles sheets and custom components in your design language. We built this plugin to take away the non-creative work from the design system setup process.

1. Setup the design tokens: Colours, typography, corner radius, spacing system, grids and elevation.

2. Setup the component Library: All the design tokens are automatically reflected in custom component library.

3. Export to Figma: Get the style guideline, variables, and component library to your file in a single click.

Would love to hear your feedback as we continue to improve the plugin :)




As a UX designer, this looks really intriguing. I'll play around with it and give some additional feedback when I get the chance!


Hey,

I took a look at https://figr.design/

How is it different from v0.dev?


We focus on capturing detailed user intent, starting with app flows and moodboards, before crafting detailed wireframes.


Some thoughts:

1. Colors

Love how everything updates as you drag the primary color, but if you edit an individual color (say, primary 100), it updates by itself. When I clicked the dark mode toggle, I was expecting to have the option to generate a dark mode palette alongside the light mode palette. I think having this option would be great (I’m assuming you can go back and generate a dark mode if you want?).

2. Fonts

I like how the basic primary & secondary font updates in real time on an artboard, but it’d be great to see the individual Display & Headings show up in an individual artboard as well instead of only showing up when you click on a parameter. Until I clicked on a parameter, I had no idea that 3rd line of text would update. I’d prefer to see the typography page that appears once you generate the design system.

3. Spacing

Having 6px as a default is kind of odd given that a lot of existing design systems use , I’d stick with 8px as the default.

4. Grids

For the 3 labels (desktop/tablet/mobile), it looks like I can only have 1 grid per size. It’d be great to have the ability to add multiple types of grids for the various sizes as sometimes I bounce around depending on the need (i.e. overall grid for desktop is 12 columns, but on a smaller card I may use 4 columns, etc).

5. Radius

It strikes me that you guys have a LOT of options in the base size sector. Sharp radius just turns everything off, maybe relabel this to “Disable Radius” or something like that. Nitpick, I tried lowering the variant count to less than 8 and it threw an error, perhaps just disable the minus at that point? This also goes for clicking on the trash can next to the standard variants, why have it if I can’t actually delete anything?

6. Shadow

Could you add the plus button to the grid to add multiple grids per type of screen size? Having to scroll to view the stats for each type of shadow was kind of awkward. It’d be nice if you could replicate what was done on some of the earlier screens here. For example, take the layout of the typography creation screen that has the name, type, size, etc inside the modal, but show the actual results of the shadow outside inside a Figma artboard.

7. Components

Spent the least amount of time on this page, but it looks OK in terms of available components. For more inspiration I’d look at either something like IBM’s Carbon design system, or an existing Figma kit like Untitled UI or UI Prep.

Happy to keep on reviewing this if you'd like!


Hey, this is really great feedback, thankyou for this.

1. We'll add in option to get both Dark and Light at the same time. 3. Yes, that's something we'll change soon to 8px or 4px 4. Would it help if you could export grid styles and other styles separately rather than the complete export at once? 5. Fair point, we'll change the UX for it. 6. It was made in this as the default shadows are blank as of now. But, I get your point. We'll add in recommendation for a complete shadow system in the future with a revamped UI.

7. We tried to incorporate the most common components used. Any particular reason for you to use Figa Kits like Untitled UI? Is the because they have complete page designs as well?

Again thanks for such feedback, helps a lot.

By the way, we'll also add component code library in the future.


I think that's a great idea.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: