How to create components like a pro

A growing collection of design pills packed with practical tips, tricks, and best practices: made to help the design community build better components (and layouts), faster.

1.

Set up the behaviors correctly

The card's content is responsive, ensuring optimal functionality across desktop, tablet and mobile views. Resizing or editing the card will not affect it's responsiveness, ensuring it adapts seamlessly to any screen size or orientation.

Anatomy card

Design + < /Code > Figma

Dieter Rams

@thedonutimage

Building Websites and Webapps with Seamless User Experience Across Devices.

238Following84Followers

linkedin.com/in/dieterrams

Valencia

2.

Responsive Structure and Auto Layout

It automatically adjusts if the content grows or if elements are hidden. Use combinations of `fill container` for text/containers and `hug/fixed` for fixed-size elements.

Structure fill_vs_hug

  • All roles
  • Project Manager
  • Designer
  • Engineer
Dieter RamsOnlineProject Manager
Dieter Rams17 AgoDesigner
Dieter Rams1 Day AgoEngineer
Dieter Rams2 DaysDesigner
3.

Semantic Layer Naming & Standards

Avoid default names like Frame 42 or Group 12. By using descriptive names such as Header, Body, Media-Container, or Actions, we significantly improve readability during code inspection. Components can scale properly in functionality, and when it comes to creating animations, we can unlock much more potential—having a clear system makes the work easier for everyone.

components → PascalCaseproperties → camelCasetokens → kebab-case

Naming before_vs_after

45% Sales

$ 34,333

New Sales Last Period

4.

Component Composition

Cards are built using smaller nested components (e.g., Badge, Button, Avatar). When these base components are updated, the card updates automatically.

Composition with Slots or Swap Instances

If the card needs to support dynamic or flexible content (such as an illustration, a map, or a video player in the middle area), design a interchangeable "Slot"

Compositions components / slots

$ 1,587

45% Sales by day

Title

5.

Boolean Properties

Used to hide or show optional elements e.g., hasBadge, showFooter, hasImage with a single click.

Text Properties

Allow direct editing of titles, body copy, and button labels without deep-selecting layers.

Variant Properties

Keep variants strictly for primary structural or visual states,

Variants =
Navigation | Checkboxes
Type =
Info | Warning | Error | Succes
Device =
Desktop | Tablet | Mobile
State =
Default | Hover | Disabled
Axis =
Vertical | Horizontal

Propertys edit_panel_figma

  • Card
  • Badge
  • Button
  • Avatar
  • List item
  • Input

Simple Design System

Keyboards: Cards

Type

variant

  • Default
  • Hover
  • Disabled

hasBadge

booleans

Title

text

Text